poster becomes background at 350px
This commit is contained in:
Christopher
parent
9b6b2c6df1
commit
a67d5166bc
3 changed files with 107 additions and 108 deletions
|
|
@ -5,9 +5,6 @@
|
||||||
margin-top: 0.9375rem;
|
margin-top: 0.9375rem;
|
||||||
|
|
||||||
.info-container {
|
.info-container {
|
||||||
.image-container-background.series {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.info-grid-container {
|
.info-grid-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 20% 80%;
|
grid-template-columns: 20% 80%;
|
||||||
|
|
@ -64,11 +61,64 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-group > .btn.dropdown-toggle-split:not(first-child){
|
||||||
|
border-top-right-radius: var(--bs-border-radius) !important;
|
||||||
|
border-bottom-right-radius: var(--bs-border-radius) !important;
|
||||||
|
border-width: 0.0625rem 0.0625rem 0.0625rem 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
|
||||||
|
border-width: 0.0625rem 0 0.0625rem 0.0625rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-tabs-container::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .info-container {
|
||||||
|
.info-grid-container {
|
||||||
|
.image-container {
|
||||||
|
app-image {
|
||||||
|
img {
|
||||||
|
max-height: 100dvh !important;
|
||||||
|
object-fit: cover !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.progress-banner {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.under-image {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.overlay-information {
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: theme.$grid-breakpoints-lg) {
|
@media (max-width: theme.$grid-breakpoints-lg) {
|
||||||
.main-container {
|
.main-container {
|
||||||
.info-container {
|
.info-container {
|
||||||
.info-grid-container {
|
.info-grid-container {
|
||||||
grid-template-columns: 30% 70%;
|
grid-template-columns: 30% 70%;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.carousel-tabs-container {
|
||||||
|
mask-image: linear-gradient(to right, transparent, black 0%, black 90%, transparent 100%);
|
||||||
|
-webkit-mask-image: linear-gradient(to right, transparent, black 0%, black 90%, transparent 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.main-container {
|
||||||
|
.info-container {
|
||||||
|
.info-grid-container {
|
||||||
|
grid-template-columns: 35% 65%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -80,6 +130,7 @@
|
||||||
.info-grid-container {
|
.info-grid-container {
|
||||||
grid-template-columns: 35% 65%;
|
grid-template-columns: 35% 65%;
|
||||||
grid-template-rows: auto auto;
|
grid-template-rows: auto auto;
|
||||||
|
padding-bottom: unset;
|
||||||
|
|
||||||
.image-container {
|
.image-container {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
|
|
@ -105,9 +156,7 @@
|
||||||
.metadata-details-lower {
|
.metadata-details-lower {
|
||||||
grid-column: 1 / 3;
|
grid-column: 1 / 3;
|
||||||
grid-row: 2;
|
grid-row: 2;
|
||||||
.continue-container {
|
margin-top: 2rem;
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -125,7 +174,22 @@
|
||||||
.main-container {
|
.main-container {
|
||||||
.info-container {
|
.info-container {
|
||||||
.info-grid-container {
|
.info-grid-container {
|
||||||
|
.image-container.mobile-background {
|
||||||
|
width: 100vw;
|
||||||
|
top: calc(var(--nav-offset) - 1.25rem);
|
||||||
|
left: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
position: fixed !important;
|
||||||
|
display: block !important;
|
||||||
|
max-height: unset !important;
|
||||||
|
max-width: unset !important;
|
||||||
|
height: 100dvh !important;
|
||||||
|
}
|
||||||
|
.metadata-details-upper {
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
}
|
||||||
.metadata-details-lower {
|
.metadata-details-lower {
|
||||||
|
margin-top: 0rem;
|
||||||
.continue-container {
|
.continue-container {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
.actions-row {
|
.actions-row {
|
||||||
|
|
@ -136,108 +200,48 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
:host ::ng-deep {
|
||||||
|
.main-container {
|
||||||
::ng-deep .badge-expander .content a {
|
.info-container {
|
||||||
font-size: 0.8rem;
|
.info-grid-container {
|
||||||
}
|
.image-container.mobile-background {
|
||||||
|
app-image {
|
||||||
.btn-group > .btn.dropdown-toggle-split:not(first-child){
|
img {
|
||||||
border-top-right-radius: var(--bs-border-radius) !important;
|
max-height: unset !important;
|
||||||
border-bottom-right-radius: var(--bs-border-radius) !important;
|
opacity: 0.05 !important;
|
||||||
border-width: 0.0625rem 0.0625rem 0.0625rem 0 !important;
|
filter: blur(0.3125rem) !important;
|
||||||
}
|
max-width: 100dvw;
|
||||||
|
height: 100dvh !important;
|
||||||
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
|
overflow: hidden;
|
||||||
border-width: 0.0625rem 0 0.0625rem 0.0625rem !important;
|
position: absolute;
|
||||||
}
|
top: 0;
|
||||||
|
left: 0;
|
||||||
.card-body > div:nth-child(2) {
|
object-fit: cover;
|
||||||
height: 3.125rem;
|
}
|
||||||
overflow: hidden;
|
}
|
||||||
-webkit-line-clamp: 2;
|
}
|
||||||
display: -webkit-box;
|
}
|
||||||
overflow: hidden;
|
}
|
||||||
-webkit-box-orient: vertical;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-tabs-container::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep .carousel-container .header i.fa-plus, ::ng-deep .carousel-container .header i.fa-pen{
|
|
||||||
border-width: 0.0625rem;
|
|
||||||
border-style: solid;
|
|
||||||
border-radius: 0.3125rem;
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
padding: 0.3125rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--primary-color-dark-shade);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep .image-container-background.mobile-bg app-image img {
|
|
||||||
max-height: 25rem;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: theme.$grid-breakpoints-lg) {
|
|
||||||
.carousel-tabs-container {
|
|
||||||
mask-image: linear-gradient(transparent, black 0%, black 90%, transparent 100%);
|
|
||||||
-webkit-mask-image: linear-gradient(to right, transparent, black 0%, black 90%, transparent 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep .image-container-background.mobile-bg app-image img {
|
|
||||||
max-height: 100dvh !important;
|
|
||||||
object-fit: cover !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* col-lg */
|
|
||||||
@media (max-width: theme.$grid-breakpoints-lg) {
|
|
||||||
.image-container-background.mobile-bg{
|
|
||||||
width: 100vw;
|
|
||||||
top: calc(var(--nav-offset) - 1.25rem);
|
|
||||||
left: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
position: fixed !important;
|
|
||||||
display: block !important;
|
|
||||||
max-height: unset !important;
|
|
||||||
max-width: unset !important;
|
|
||||||
height: 100dvh !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep .image-container-background.mobile-bg app-image img {
|
|
||||||
max-height: unset !important;
|
|
||||||
opacity: 0.05 !important;
|
|
||||||
filter: blur(0.3125rem) !important;
|
|
||||||
max-width: 100dvw;
|
|
||||||
height: 100dvh !important;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-banner {
|
.progress-banner {
|
||||||
display:none;
|
display:none;
|
||||||
|
background: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
.under-image {
|
.under-image {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
:host ::ng-deep .info-container {
|
||||||
}
|
.info-grid-container {
|
||||||
.upper-details {
|
.image-container {
|
||||||
font-size: 0.9rem;
|
.progress-banner {
|
||||||
}
|
display: none;
|
||||||
|
}
|
||||||
@media (max-width: theme.$grid-breakpoints-lg) {
|
.under-image {
|
||||||
.carousel-tabs-container {
|
display: none;
|
||||||
mask-image: linear-gradient(to right, transparent, black 0%, black 90%, transparent 100%);
|
}
|
||||||
-webkit-mask-image: linear-gradient(to right, transparent, black 0%, black 90%, transparent 100%);
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,8 @@
|
||||||
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid" #scrollingBlock>
|
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid" #scrollingBlock>
|
||||||
<div class="row mb-0 mb-xl-3 info-container">
|
<div class="row mb-0 mb-xl-3 info-container">
|
||||||
|
|
||||||
<div [ngClass]="mobileSeriesImgBackground === 'true' ? 'mobile-bg' : ''"
|
|
||||||
class="image-container-background series col-5 col-sm-6 col-md-5 col-lg-5 col-xl-2 col-xxl-2 col-xxxl-2 mb-3 position-relative">
|
|
||||||
<app-cover-image [entity]="series" [coverImage]="imageService.getSeriesCoverImage(series.id)" [continueTitle]="ContinuePointTitle" (read)="read()"></app-cover-image>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-grid-container">
|
<div class="info-grid-container">
|
||||||
<div [ngClass]="mobileSeriesImgBackground === 'true' ? 'mobile-image' : ''"
|
<div [ngClass]="mobileSeriesImgBackground === 'true' ? 'mobile-background' : ''"
|
||||||
class="image-container series position-relative">
|
class="image-container series position-relative">
|
||||||
<app-cover-image [entity]="series" [coverImage]="imageService.getSeriesCoverImage(series.id)" [continueTitle]="ContinuePointTitle" (read)="read()"></app-cover-image>
|
<app-cover-image [entity]="series" [coverImage]="imageService.getSeriesCoverImage(series.id)" [continueTitle]="ContinuePointTitle" (read)="read()"></app-cover-image>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ $accordion-icon-active-color: #cecece;
|
||||||
|
|
||||||
|
|
||||||
$grid-breakpoints-xs: 0;
|
$grid-breakpoints-xs: 0;
|
||||||
$grid-breakpoints-smm: 327px;
|
$grid-breakpoints-smm: 350px;
|
||||||
$grid-breakpoints-sm: 576px;
|
$grid-breakpoints-sm: 576px;
|
||||||
$grid-breakpoints-md: 768px;
|
$grid-breakpoints-md: 768px;
|
||||||
$grid-breakpoints-lg: 992px;
|
$grid-breakpoints-lg: 992px;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue