diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss index efb54f860..bd2cd373c 100644 --- a/UI/Web/src/_series-detail-common.scss +++ b/UI/Web/src/_series-detail-common.scss @@ -1,209 +1,273 @@ @use './theme/variables' as theme; -.title { - color: white; - font-weight: bold; - font-size: 1.75rem; -} - -.image-container { - align-self: flex-start; - max-height: 400px; - max-width: 280px; -} - -.subtitle { - color: var(--detail-subtitle-color); - font-weight: bold; - font-size: 0.8rem; -} - .main-container { overflow: unset !important; - margin-top: 15px; -} + margin-top: 0.9375rem; + + .info-container { + .info-grid-container { + display: grid; + grid-template-columns: 20% 80%; + grid-template-rows: auto auto; + .image-container { + grid-column: 1; + grid-row: 1 / 3; + margin-right: 1.5rem; + } + .metadata-details-upper { + display: flex; + flex-direction: column; + justify-content: center; + grid-column: 2; + grid-row: 1; + .title { + color: white; + font-weight: bold; + font-size: 1.75rem; + } + .subtitle { + color: var(--detail-subtitle-color);; + font-weight: bold; + font-size: 0.8rem; + } + } + .metadata-details-lower { + grid-column: 2; + grid-row: 2; + .continue-container { + display: flex; -::ng-deep .badge-expander .content a { - font-size: 0.8rem; -} - -.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: 1px 1px 1px 0 !important; -} - -.btn-group > .btn:not(:last-child):not(.dropdown-toggle) { - border-width: 1px 0 1px 1px !important; -} - -.card-body > div:nth-child(2) { - height: 50px; - overflow: hidden; - -webkit-line-clamp: 2; - display: -webkit-box; - overflow: hidden; - -webkit-box-orient: vertical; -} - -.under-image ~ .overlay-information { - top: -404px; - height: 364px; -} - -.overlay-information { - position: relative; - top: -364px; - height: 364px; - transition: all 0.2s; - border-top-left-radius: 4px; - border-top-right-radius: 4px; - - &:hover { - cursor: pointer; - background-color: var(--card-overlay-hover-bg-color) !important; - - .overlay-information--centered { - visibility: visible; + .actions-row { + display: flex; + width: unset; + } + } + .upper-details { + font-size: 0.9rem; + } + } } } - .overlay-information--centered { - position: absolute; - border-radius: 15px; - background-color: rgba(0, 0, 0, .7); - border-radius: 50px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 115; - visibility: hidden; - - &:hover { - background-color: var(--primary-color) !important; - cursor: pointer; + .carousel-tabs-container { + overflow-x: auto; + white-space: nowrap; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; + scrollbar-width: none; + box-shadow: inset -0.0625rem -0.125rem 0.0rem -0.0625rem var(--elevation-layer9); + .nav-tabs { + flex-wrap: nowrap; } + } +} - div { - width: 60px; - height: 60px; - i { - font-size: 1.6rem; - line-height: 60px; - width: 100%; +.carousel-tabs-container::-webkit-scrollbar { + display: none; +} + +:host ::ng-deep { + .main-container { + .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%; + } + } + .metadata-details-lower { + .continue-container { + .btn-group { + >.btn { + border: unset; + background-color: var(--primary-color-dark-shade); + &:hover { + border: unset; + background-color: var(--primary-color-darker-shade); + } + span { + i { + padding-right: 0.2rem; + } + } + } + .dropdown { + .dropdown-toggle-split { + border-top-right-radius: var(--bs-border-radius); + border-bottom-right-radius: var(--bs-border-radius); + background-color: var(--primary-color-dark-shade); + border: unset; + box-shadow: inset 1px 0 1px 0 rgba(0,0,0,0.1); + &:hover { + background-color: var(--primary-color-darker-shade); + } + &::after { + vertical-align: 0.11rem; + } + } + } + } + } + } } } } } -.progress { - border-radius: 0; -} - -.progress-banner.series { - position: relative; -} - -::ng-deep .progress-banner.series span { - position: absolute; - left: 50%; - transform: translate(-50%, -50%); - color: white; - top: 50%; -} - -.carousel-tabs-container { - overflow-x: auto; - white-space: nowrap; - -webkit-overflow-scrolling: touch; - -ms-overflow-style: -ms-autohiding-scrollbar; - scrollbar-width: none; - box-shadow: inset -1px -2px 0px -1px var(--elevation-layer9); -} -.carousel-tabs-container::-webkit-scrollbar { - display: none; -} -.nav-tabs { - flex-wrap: nowrap; -} - -.upper-details { - font-size: 0.9rem; -} - -::ng-deep .carousel-container .header i.fa-plus, ::ng-deep .carousel-container .header i.fa-pen{ - border-width: 1px; - border-style: solid; - border-radius: 5px; - border-color: var(--primary-color); - padding: 5px; - vertical-align: middle; - - &:hover { - background-color: var(--primary-color-dark-shade); - } -} - -::ng-deep .image-container.mobile-bg app-image img { - max-height: 400px; - 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%); + .main-container { + .info-container { + .info-grid-container { + 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%); + } } } -::ng-deep .image-container.mobile-bg app-image img { - max-height: 100dvh !important; - object-fit: cover !important; -} - -/* col-lg */ -@media (max-width: theme.$grid-breakpoints-lg) { - .image-container.mobile-bg{ - width: 100vw; - top: calc(var(--nav-offset) - 20px); - 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.mobile-bg app-image img { - max-height: unset !important; - opacity: 0.05 !important; - filter: blur(5px) !important; - max-width: 100dvw; - height: 100dvh !important; - overflow: hidden; - position: absolute; - top: 0; - left: 0; - object-fit: cover; - } - - .progress-banner { - display:none; - } - - .under-image { - display: none; - } - -} -.upper-details { - font-size: 0.9rem; -} - -@media (max-width: theme.$grid-breakpoints-lg) { - .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%; + } + } + } +} + +@media (max-width: theme.$grid-breakpoints-sm) { + .main-container { + .info-container { + .info-grid-container { + grid-template-columns: 35% 65%; + grid-template-rows: auto auto; + padding-bottom: unset; + + .image-container { + display: block !important; + grid-column: 1; + grid-row: 1; + margin-right: 1rem; + } + + .metadata-details-upper { + display: flex; + flex-direction: column; + justify-content: center; + grid-column: 2; + grid-row: 1; + .title { + font-size: 1.375rem; + } + .subtitle { + font-size: 0.625rem; + } + } + + .metadata-details-lower { + grid-column: 1 / 3; + grid-row: 2; + margin-top: 2rem; + } + } + } + } + :host ::ng-deep { + .read-more-cont { + div { + max-width: unset !important; + } + } + } +} + +@media (max-width: theme.$grid-breakpoints-smm) { + .main-container { + .info-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 { + margin-top: 0rem; + .continue-container { + flex-direction: column; + .actions-row { + margin-top: 0.5rem; + } + } + } + } + } + } + :host ::ng-deep { + .main-container { + .info-container { + .info-grid-container { + .image-container.mobile-background { + 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; + } + } + } + } + } + } + } + + :host ::ng-deep { + .main-container { + .info-container { + .info-grid-container { + .image-container { + .progress-banner { + display: none; + } + .under-image { + display: none; + } + } + } + } + } } } diff --git a/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.scss b/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.scss index 42eb06de9..5443b3710 100644 --- a/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.scss +++ b/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.scss @@ -13,8 +13,10 @@ .time-left{ font-size: 0.8rem; + display: inline-block; } .word-count { font-size: 0.8rem; + display: inline-block; } diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html index 9587eb026..498037175 100644 --- a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html +++ b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html @@ -4,170 +4,189 @@ @if (series && seriesMetadata && libraryType !== null) {
-
- -
-
-

- {{series.name}} - - @if(isLoadingExtra || isLoading) { - - } - - -

-
- @if (series.localizedName !== series.name && series.localizedName) { - {{series.localizedName | defaultValue}} - } +
+
+
- - +
+
+

+ {{ series.name }} -
- - + @if (isLoadingExtra || isLoading) { + + } + +

+
+ @if (series.localizedName !== series.name && series.localizedName) { + {{ series.localizedName | defaultValue }} + } +
+ + + + +
+ + +
+
-
-
+
+
-
- +
+
-
- -
- - @if (isAdmin) { -
-
- } - @if ((licenseService.hasValidLicense$ | async) && libraryAllowsScrobbling) { + @if (isAdmin) { +
+ +
+ } + + @if ((licenseService.hasValidLicense$ | async) && libraryAllowsScrobbling) { +
+ +
+ } +
- +
+ +
- } -
-
- -
-
- -
- -
- -
-
- -
- -
- -
-
-
- {{t('writers-title')}} -
- - - {{item.name}} - - -
-
-
- {{t('publication-status-title')}} -
- @if (seriesMetadata.publicationStatus | publicationStatus; as pubStatus) { - - {{pubStatus}} - - } +
+
-
-
-
-
- {{t('genres-title')}} -
- - - {{item.title}} - - +
+ +
+ +
+
+
+ {{ t('writers-title') }} +
+ + + {{ item.name }} + + +
+
+
+ {{ t('publication-status-title') }} +
+ @if (seriesMetadata.publicationStatus | publicationStatus; as pubStatus) { + + {{ pubStatus }} + + } +
+
-
- {{t('tags-title')}} -
- - - {{item.title}} - - +
+
+
+ {{ t('genres-title') }} +
+ + + {{ item.title }} + + +
+
+ +
+ {{ t('tags-title') }} +
+ + + {{ item.title }} + + +
@@ -176,25 +195,30 @@
-
    +
      @if (showStorylineTab) {
    • - {{t(TabID.Storyline)}} + {{ t(TabID.Storyline) }} @defer (when activeTabId === TabID.Storyline; prefetch on idle) { - +
      - @for(item of scroll.viewPortItems; let idx = $index; track item) { + @for (item of scroll.viewPortItems; let idx = $index; track item) { @if (item.isChapter) { - + } @else { - + } } - +
      } @@ -206,17 +230,20 @@ @if (showVolumeTab) {
    • - {{UseBookLogic ? t('books-tab') : t('volumes-tab')}} - {{volumes.length}} + {{ UseBookLogic ? t('books-tab') : t('volumes-tab') }} + {{ volumes.length }} @defer (when activeTabId === TabID.Volumes; prefetch on idle) {
      - @for (item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead + + '_volumes') { - + @for (item of scroll.viewPortItems; let + idx = $index; track item.id + '_' + item.pagesRead + +'_volumes') { + } - +
      } @@ -227,17 +254,20 @@ @if (showChapterTab) {
    • - {{utilityService.formatChapterName(libraryType)}} - {{chapters.length}} + {{ utilityService.formatChapterName(libraryType) }} + {{ chapters.length }} @defer (when activeTabId === TabID.Chapters; prefetch on idle) {
      - @for (item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead + '_chapters') { - + @for (item of scroll.viewPortItems; let + idx = $index; track item.id + '_' + item.pagesRead + '_chapters') { + } - +
      } @@ -248,15 +278,17 @@ @if (hasSpecials) {
    • - {{t(TabID.Specials)}} - {{specials.length}} + {{ t(TabID.Specials) }} + {{ specials.length }} @defer (when activeTabId === TabID.Specials; prefetch on idle) { - +
      - @for(item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead + '_specials') { - + @for (item of scroll.viewPortItems; let + idx = $index; track item.id + '_' + item.pagesRead + '_specials') { + }
      @@ -268,8 +300,8 @@ @if (hasRelations || readingLists.length > 0 || collections.length > 0 || bookmarks.length > 0) {
    • - {{t(TabID.Related)}} - {{relations.length + readingLists.length + collections.length + (bookmarks.length > 0 ? 1 : 0)}} + {{ t(TabID.Related) }} + {{ relations.length + readingLists.length + collections.length + (bookmarks.length > 0 ? 1 : 0) }} @defer (when activeTabId === TabID.Related; prefetch on idle) { @@ -286,18 +318,20 @@ @if (hasRecommendations) {
    • - {{t(TabID.Recommendations)}} - {{combinedRecs.length}} + {{ t(TabID.Recommendations) }} + {{ combinedRecs.length }} @defer (when activeTabId === TabID.Recommendations; prefetch on idle) {
      - @for(item of scroll.viewPortItems; let idx = $index; track idx) { + @for (item of scroll.viewPortItems; let idx = $index; track idx) { @if (!item.hasOwnProperty('coverUrl')) { - + } @else { - + } }
      @@ -309,19 +343,19 @@
    • - {{t(TabID.Reviews)}} - {{reviews.length + plusReviews.length}} + {{ t(TabID.Reviews) }} + {{ reviews.length + plusReviews.length }} @defer (when activeTabId === TabID.Reviews; prefetch on idle) { - + }
      • @if (seriesMetadata && showDetailsTab) {
    • - {{t(TabID.Details)}} + {{ t(TabID.Details) }} @defer (when activeTabId === TabID.Details; prefetch on idle) { + } @case (TabID.Storyline) { - + } } } @@ -373,15 +409,18 @@ [actions]="chapterActions" [libraryType]="libraryType" (selection)="bulkSelectionService.handleCardSelection('chapter', scroll.viewPortInfo.startIndexWithBuffer + idx, totalLength, $event)" - [selected]="bulkSelectionService.isCardSelected('chapter', scroll.viewPortInfo.startIndexWithBuffer + idx)" [allowSelection]="true"> + [selected]="bulkSelectionService.isCardSelected('chapter', scroll.viewPortInfo.startIndexWithBuffer + idx)" + [allowSelection]="true"> - + [selected]="bulkSelectionService.isCardSelected('volume', scroll.viewPortInfo.startIndexWithBuffer + idx)" + [allowSelection]="true"> @@ -391,6 +430,7 @@ [actions]="chapterActions" [libraryType]="libraryType" (selection)="bulkSelectionService.handleCardSelection('special', scroll.viewPortInfo.startIndexWithBuffer + idx, totalLength, $event)" - [selected]="bulkSelectionService.isCardSelected('special', scroll.viewPortInfo.startIndexWithBuffer + idx)" [allowSelection]="true"> + [selected]="bulkSelectionService.isCardSelected('special', scroll.viewPortInfo.startIndexWithBuffer + idx)" + [allowSelection]="true"> diff --git a/UI/Web/src/theme/_variables.scss b/UI/Web/src/theme/_variables.scss index 1ffbdeb54..9b247ef6e 100644 --- a/UI/Web/src/theme/_variables.scss +++ b/UI/Web/src/theme/_variables.scss @@ -16,6 +16,7 @@ $accordion-icon-active-color: #cecece; $grid-breakpoints-xs: 0; +$grid-breakpoints-smm: 350px; $grid-breakpoints-sm: 576px; $grid-breakpoints-md: 768px; $grid-breakpoints-lg: 992px; diff --git a/UI/Web/src/theme/components/_buttons.scss b/UI/Web/src/theme/components/_buttons.scss index 82603e761..a4cd20ca3 100644 --- a/UI/Web/src/theme/components/_buttons.scss +++ b/UI/Web/src/theme/components/_buttons.scss @@ -110,7 +110,7 @@ } } -.btn-actions { +.btn-actions:not(.download) { color: var(--btn-fa-icon-color); border-radius: var(--btn-actions-border-radius); diff --git a/UI/Web/src/theme/themes/dark.scss b/UI/Web/src/theme/themes/dark.scss index 7ec33d613..3f3cd157e 100644 --- a/UI/Web/src/theme/themes/dark.scss +++ b/UI/Web/src/theme/themes/dark.scss @@ -87,7 +87,7 @@ --theme-color: #000000; --color-scheme: dark; --tile-color: var(--primary-color); - --nav-offset: 60px; + --nav-offset: 48px; --nav-mobile-offset: 55px; /* Should we render the series cover as background on mobile */