From 4bbca2cfc36b6ef5426a82e870f9dd813ebe27ee Mon Sep 17 00:00:00 2001 From: Robbie Davis Date: Tue, 20 Aug 2024 09:09:19 -0400 Subject: [PATCH 1/9] new mobile background --- .../metadata-detail-row.component.html | 8 ++--- .../metadata-detail-row.component.scss | 20 +++++++++++ .../series-detail.component.html | 6 ++-- .../series-detail.component.scss | 34 +++++++++++++++++++ 4 files changed, 61 insertions(+), 7 deletions(-) diff --git a/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html b/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html index 73eb169427..e1c2af13d1 100644 --- a/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html +++ b/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html @@ -8,21 +8,21 @@ @if (hasReadingProgress && readingTimeLeft && readingTimeLeft.avgHours !== 0) { - + {{readingTimeLeft | readTimeLeft }} } @else { - + {{readingTimeEntity | readTime }} } • @if (libraryType === LibraryType.Book || libraryType === LibraryType.LightNovel) { - {{t('words-count', {num: readingTimeEntity.wordCount | compactNumber})}} + {{t('words-count', {num: readingTimeEntity.wordCount | compactNumber})}} } @else { - {{t('pages-count', {num: readingTimeEntity.pages | compactNumber})}} + {{t('pages-count', {num: readingTimeEntity.pages | compactNumber})}} } 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 e69de29bb2..c3e64f0d77 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 @@ -0,0 +1,20 @@ +.publisher-img-container { + background-color: var(--card-bg-color); + border-radius: 3px; + padding: 2px 5px; + font-size: 0.8rem; + vertical-align: middle; + + div { + min-height: 32px; + line-height: 32px; + } +} + +.time-left{ + font-size: 0.8rem; +} + +.word-count { + font-size: 0.8rem; +} \ No newline at end of file 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 189ae9064d..3c8341ba70 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 @@ -6,7 +6,7 @@
- + @if (series.pagesRead < series.pages && hasReadingProgress) {
@@ -130,7 +130,7 @@

-
+
{{t('writers-title')}} @@ -161,7 +161,7 @@

-
+
{{t('genres-title')}} diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss index 88835f221c..1a00dacda8 100644 --- a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss +++ b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss @@ -14,6 +14,36 @@ border-bottom-right-radius: 5px; text-align: center; } + +::ng-deep .image-container app-image img { + max-height: 400px; + object-fit: contain; +} + +@media screen and (max-width: 576px) { + .image-container{ + width: 100vw; + top: 0; + left: 0; + pointer-events: none; + position: absolute !important; + display: block !important; + max-height: unset !important; + max-width: unset !important; + } + + ::ng-deep .image-container app-image img { + max-height: unset !important; + width: 100dvw !important; + opacity: 0.1 !important; + filter: blur(5px) !important; + max-width: 100dvw; + height: 100dvh; + overflow: hidden; + object-fit: cover; + } + +} // //.rating-star { // margin-top: 2px; @@ -27,6 +57,10 @@ justify-content: space-around; } +.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; From d18a140fd198ef72b0fd363c2ff3c07d7420b5c9 Mon Sep 17 00:00:00 2001 From: Robbie Davis Date: Tue, 20 Aug 2024 09:10:51 -0400 Subject: [PATCH 2/9] playing with opacity --- .../_components/series-detail/series-detail.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss index 1a00dacda8..bc80bae1cc 100644 --- a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss +++ b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss @@ -35,7 +35,7 @@ ::ng-deep .image-container app-image img { max-height: unset !important; width: 100dvw !important; - opacity: 0.1 !important; + opacity: 0.05 !important; filter: blur(5px) !important; max-width: 100dvw; height: 100dvh; From 01402cee444936702ab99cadb29d36e8c9180cda Mon Sep 17 00:00:00 2001 From: Robbie Davis Date: Tue, 20 Aug 2024 12:06:54 -0400 Subject: [PATCH 3/9] making this opt in --- .../series-detail.component.html | 9 ++-- .../series-detail.component.scss | 42 +++++++++++++++++++ .../series-detail/series-detail.component.ts | 5 +++ UI/Web/src/theme/themes/dark.scss | 2 + 4 files changed, 55 insertions(+), 3 deletions(-) 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 3c8341ba70..ef1493f754 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,9 +4,12 @@ @if (series && seriesMetadata && libraryType !== null) {
-
- - +
+ @if(mobileSeriesImgBackground === 'true') { + + } @else { + + } @if (series.pagesRead < series.pages && hasReadingProgress) {
diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss index bc80bae1cc..57912db8d2 100644 --- a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss +++ b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss @@ -73,3 +73,45 @@ 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: 768px) { + .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.mobile-bg app-image img { + max-height: 400px; + object-fit: contain; +} + +@media screen and (max-width: 576px) { + .image-container.mobile-bg{ + width: 100vw; + top: 0; + left: 0; + pointer-events: none; + position: absolute !important; + display: block !important; + max-height: unset !important; + max-width: unset !important; + } + + ::ng-deep .image-container.mobile-bg app-image img { + max-height: unset !important; + width: 100dvw !important; + opacity: 0.05 !important; + filter: blur(5px) !important; + max-width: 100dvw; + height: 100dvh; + overflow: hidden; + object-fit: cover; + } + +} \ No newline at end of file diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.ts b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.ts index 1c7d800b24..3a24d5b4af 100644 --- a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.ts +++ b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.ts @@ -243,6 +243,7 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { isLoadingExtra = false; libraryAllowsScrobbling = false; isScrobbling: boolean = true; + mobileSeriesImgBackground: string | undefined; currentlyReadingChapter: Chapter | undefined = undefined; hasReadingProgress = false; @@ -384,6 +385,7 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { } } + get UseBookLogic() { return this.libraryType === LibraryType.Book || this.libraryType === LibraryType.LightNovel; } @@ -472,6 +474,9 @@ export class SeriesDetailComponent implements OnInit, AfterContentChecked { return; } + this.mobileSeriesImgBackground = getComputedStyle(document.documentElement) + .getPropertyValue('--mobile-series-img-background').trim(); + // Set up the download in progress this.download$ = this.downloadService.activeDownloads$.pipe(takeUntilDestroyed(this.destroyRef), map((events) => { diff --git a/UI/Web/src/theme/themes/dark.scss b/UI/Web/src/theme/themes/dark.scss index 2e20b7eb51..1817a1044e 100644 --- a/UI/Web/src/theme/themes/dark.scss +++ b/UI/Web/src/theme/themes/dark.scss @@ -416,4 +416,6 @@ --login-input-font-family: 'League Spartan', sans-serif; --login-input-placeholder-opacity: 0.5; --login-input-placeholder-color: #fff; + + --mobile-series-img-background: true; } From b83a325e082f7aec1a3caba4728e422ecda21d93 Mon Sep 17 00:00:00 2001 From: Robbie Davis Date: Tue, 20 Aug 2024 13:35:04 -0400 Subject: [PATCH 4/9] Adding opt in option to all detail pages --- UI/Web/src/_series-detail-common.scss | 59 +++++++++++++++++++ .../chapter-detail.component.html | 8 ++- .../chapter-detail.component.ts | 7 ++- .../volume-detail.component.html | 8 ++- .../volume-detail/volume-detail.component.ts | 7 ++- 5 files changed, 81 insertions(+), 8 deletions(-) diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss index ca4f7c8499..89c901a450 100644 --- a/UI/Web/src/_series-detail-common.scss +++ b/UI/Web/src/_series-detail-common.scss @@ -119,3 +119,62 @@ .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: 768px) { + .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.mobile-bg app-image img { + max-height: 400px; + object-fit: contain; +} + +@media screen and (max-width: 576px) { + .image-container.mobile-bg{ + width: 100vw; + top: 0; + left: 0; + pointer-events: none; + position: absolute !important; + display: block !important; + max-height: unset !important; + max-width: unset !important; + } + + ::ng-deep .image-container.mobile-bg app-image img { + max-height: unset !important; + width: 100dvw !important; + opacity: 0.05 !important; + filter: blur(5px) !important; + max-width: 100dvw; + height: 100dvh; + overflow: hidden; + object-fit: cover; + } + +} \ No newline at end of file diff --git a/UI/Web/src/app/chapter-detail/chapter-detail.component.html b/UI/Web/src/app/chapter-detail/chapter-detail.component.html index aa853c20a4..3530d4ab2f 100644 --- a/UI/Web/src/app/chapter-detail/chapter-detail.component.html +++ b/UI/Web/src/app/chapter-detail/chapter-detail.component.html @@ -4,9 +4,13 @@ @if (chapter && series && libraryType !== null) {
-
+
- + @if(mobileSeriesImgBackground === 'true') { + + } @else { + + } @if (chapter.pagesRead < chapter.pages && hasReadingProgress) {
diff --git a/UI/Web/src/app/chapter-detail/chapter-detail.component.ts b/UI/Web/src/app/chapter-detail/chapter-detail.component.ts index 4d2bf5f662..a786f72f66 100644 --- a/UI/Web/src/app/chapter-detail/chapter-detail.component.ts +++ b/UI/Web/src/app/chapter-detail/chapter-detail.component.ts @@ -9,7 +9,7 @@ import { } from '@angular/core'; import {BulkOperationsComponent} from "../cards/bulk-operations/bulk-operations.component"; import {TagBadgeComponent} from "../shared/tag-badge/tag-badge.component"; -import {AsyncPipe, DecimalPipe, DOCUMENT, NgStyle} from "@angular/common"; +import {AsyncPipe, DecimalPipe, DOCUMENT, NgStyle, NgClass} from "@angular/common"; import {CardActionablesComponent} from "../_single-module/card-actionables/card-actionables.component"; import {CarouselReelComponent} from "../carousel/_components/carousel-reel/carousel-reel.component"; import {ExternalListItemComponent} from "../cards/external-list-item/external-list-item.component"; @@ -110,6 +110,7 @@ enum TabID { TagBadgeComponent, VirtualScrollerModule, NgStyle, + NgClass, AgeRatingPipe, TimeDurationPipe, ExternalRatingComponent, @@ -182,6 +183,7 @@ export class ChapterDetailComponent implements OnInit { downloadInProgress: boolean = false; readingLists: ReadingList[] = []; showDetailsTab: boolean = true; + mobileSeriesImgBackground: string | undefined; @@ -206,7 +208,8 @@ export class ChapterDetailComponent implements OnInit { return; } - + this.mobileSeriesImgBackground = getComputedStyle(document.documentElement) + .getPropertyValue('--mobile-series-img-background').trim(); this.seriesId = parseInt(seriesId, 10); this.chapterId = parseInt(chapterId, 10); this.libraryId = parseInt(libraryId, 10); diff --git a/UI/Web/src/app/volume-detail/volume-detail.component.html b/UI/Web/src/app/volume-detail/volume-detail.component.html index 8d6a95468c..186d464eb9 100644 --- a/UI/Web/src/app/volume-detail/volume-detail.component.html +++ b/UI/Web/src/app/volume-detail/volume-detail.component.html @@ -4,9 +4,13 @@ @if (volume && series && libraryType !== null) {
-
+
- + @if(mobileSeriesImgBackground === 'true') { + + } @else { + + } @if (volume.pagesRead < volume.pages && hasReadingProgress) {
diff --git a/UI/Web/src/app/volume-detail/volume-detail.component.ts b/UI/Web/src/app/volume-detail/volume-detail.component.ts index a78e7d6b72..4d54e50e18 100644 --- a/UI/Web/src/app/volume-detail/volume-detail.component.ts +++ b/UI/Web/src/app/volume-detail/volume-detail.component.ts @@ -8,7 +8,7 @@ import { OnInit, ViewChild } from '@angular/core'; -import {AsyncPipe, DecimalPipe, DOCUMENT, NgStyle} from "@angular/common"; +import {AsyncPipe, DecimalPipe, DOCUMENT, NgStyle, NgClass} from "@angular/common"; import {ActivatedRoute, Router, RouterLink} from "@angular/router"; import {ImageService} from "../_services/image.service"; import {SeriesService} from "../_services/series.service"; @@ -143,6 +143,7 @@ interface VolumeCast extends IHasCast { NgbTooltip, ImageComponent, NgStyle, + NgClass, TranslocoDirective, CardItemComponent, VirtualScrollerModule, @@ -199,6 +200,7 @@ export class VolumeDetailComponent implements OnInit { hasReadingProgress = false; activeTabId = TabID.Chapters; readingLists: ReadingList[] = []; + mobileSeriesImgBackground: string | undefined; volumeActions: Array> = this.actionFactoryService.getVolumeActions(this.handleVolumeAction.bind(this)); @@ -267,7 +269,8 @@ export class VolumeDetailComponent implements OnInit { return; } - + this.mobileSeriesImgBackground = getComputedStyle(document.documentElement) + .getPropertyValue('--mobile-series-img-background').trim(); this.seriesId = parseInt(seriesId, 10); this.volumeId = parseInt(volumeId, 10); this.libraryId = parseInt(libraryId, 10); From 54d20a53e14567ac578bd618241b8fc3d4d22dc0 Mon Sep 17 00:00:00 2001 From: Robbie Davis Date: Tue, 20 Aug 2024 13:54:06 -0400 Subject: [PATCH 5/9] moving style to common --- .../series-detail.component.scss | 58 ------------------- 1 file changed, 58 deletions(-) diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss index 57912db8d2..23db2a67b3 100644 --- a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss +++ b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss @@ -57,61 +57,3 @@ justify-content: space-around; } -.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: 768px) { - .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.mobile-bg app-image img { - max-height: 400px; - object-fit: contain; -} - -@media screen and (max-width: 576px) { - .image-container.mobile-bg{ - width: 100vw; - top: 0; - left: 0; - pointer-events: none; - position: absolute !important; - display: block !important; - max-height: unset !important; - max-width: unset !important; - } - - ::ng-deep .image-container.mobile-bg app-image img { - max-height: unset !important; - width: 100dvw !important; - opacity: 0.05 !important; - filter: blur(5px) !important; - max-width: 100dvw; - height: 100dvh; - overflow: hidden; - object-fit: cover; - } - -} \ No newline at end of file From 3fab6a07707839a662de53f99f8fb02c4657332c Mon Sep 17 00:00:00 2001 From: Joseph Milazzo Date: Wed, 21 Aug 2024 10:12:13 -0500 Subject: [PATCH 6/9] Fixing up some weirdness with pressing enter on the new setting UX --- .../manage-email-settings.component.html | 18 +++++++++--------- .../manage-settings.component.html | 4 ++-- .../setting-button.component.html | 5 ----- .../setting-item/setting-item.component.html | 2 +- .../setting-title/setting-title.component.html | 2 +- 5 files changed, 13 insertions(+), 18 deletions(-) diff --git a/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html b/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html index 20315fb8af..569f98187e 100644 --- a/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html +++ b/UI/Web/src/app/admin/manage-email-settings/manage-email-settings.component.html @@ -16,8 +16,8 @@
- - + +
@if(settingsForm.dirty || settingsForm.touched) { @@ -39,7 +39,7 @@ {{formControl.value | defaultValue}} - + } @@ -52,7 +52,7 @@ {{formControl.value | defaultValue}} - + } @@ -78,7 +78,7 @@ {{formControl.value | defaultValue}} - + } @@ -89,7 +89,7 @@
- +
@@ -103,7 +103,7 @@ {{formControl.value | defaultValue}} - + } @@ -116,7 +116,7 @@ {{formControl.value ? '********' : null | defaultValue}} - + } @@ -129,7 +129,7 @@ {{formControl.value | bytes}} - + } diff --git a/UI/Web/src/app/admin/manage-settings/manage-settings.component.html b/UI/Web/src/app/admin/manage-settings/manage-settings.component.html index 4a98830b74..ab3e50526a 100644 --- a/UI/Web/src/app/admin/manage-settings/manage-settings.component.html +++ b/UI/Web/src/app/admin/manage-settings/manage-settings.component.html @@ -39,7 +39,7 @@

{{t('networking-settings-title')}}

- +
@if(settingsForm.dirty || settingsForm.touched) { @@ -64,7 +64,7 @@

{{t('networking-settings-title')}}

- +
@if(settingsForm.dirty || settingsForm.touched) { diff --git a/UI/Web/src/app/settings/_components/setting-button/setting-button.component.html b/UI/Web/src/app/settings/_components/setting-button/setting-button.component.html index 9418983b78..ca0c38a544 100644 --- a/UI/Web/src/app/settings/_components/setting-button/setting-button.component.html +++ b/UI/Web/src/app/settings/_components/setting-button/setting-button.component.html @@ -1,12 +1,7 @@
- - - - - @if (subtitle) {
} diff --git a/UI/Web/src/app/settings/_components/setting-item/setting-item.component.html b/UI/Web/src/app/settings/_components/setting-item/setting-item.component.html index 0b97943971..3ccd722aed 100644 --- a/UI/Web/src/app/settings/_components/setting-item/setting-item.component.html +++ b/UI/Web/src/app/settings/_components/setting-item/setting-item.component.html @@ -15,7 +15,7 @@
@if (showEdit) { - } diff --git a/UI/Web/src/app/settings/_components/setting-title/setting-title.component.html b/UI/Web/src/app/settings/_components/setting-title/setting-title.component.html index ec5fd18e7a..726cf5c0f6 100644 --- a/UI/Web/src/app/settings/_components/setting-title/setting-title.component.html +++ b/UI/Web/src/app/settings/_components/setting-title/setting-title.component.html @@ -9,7 +9,7 @@
{{title}}
- +
From b688208a7f6cbff3cd035c08505dd54b744bda49 Mon Sep 17 00:00:00 2001 From: Robbie Davis Date: Wed, 21 Aug 2024 13:40:08 -0400 Subject: [PATCH 7/9] Fixing some issues --- UI/Web/src/_series-detail-common.scss | 33 +++++++++++++---- .../chapter-detail.component.html | 14 ++++++-- .../metadata-detail-row.component.html | 6 ---- .../series-detail.component.scss | 36 ------------------- .../volume-detail.component.html | 14 ++++++-- 5 files changed, 49 insertions(+), 54 deletions(-) diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss index 89c901a450..4d02e03c01 100644 --- a/UI/Web/src/_series-detail-common.scss +++ b/UI/Web/src/_series-detail-common.scss @@ -150,31 +150,52 @@ } ::ng-deep .image-container.mobile-bg app-image img { - max-height: 400px; - object-fit: contain; + max-height: 100dvh !important; + object-fit: cover !important; } @media screen and (max-width: 576px) { .image-container.mobile-bg{ width: 100vw; - top: 0; + top: calc(var(--nav-offset) - 20px); left: 0; pointer-events: none; - position: absolute !important; + 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; - width: 100dvw !important; opacity: 0.05 !important; filter: blur(5px) !important; max-width: 100dvw; - height: 100dvh; + 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: 768px) { + .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%); + } } \ No newline at end of file diff --git a/UI/Web/src/app/chapter-detail/chapter-detail.component.html b/UI/Web/src/app/chapter-detail/chapter-detail.component.html index 68058c73ee..e21353273e 100644 --- a/UI/Web/src/app/chapter-detail/chapter-detail.component.html +++ b/UI/Web/src/app/chapter-detail/chapter-detail.component.html @@ -6,12 +6,20 @@
- - @if (chapter.pagesRead < chapter.pages && chapter.pagesRead > 0) { + @if(mobileSeriesImgBackground === 'true') { + + } @else { + + } + +
diff --git a/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html b/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html index c31fb25e2a..71c36a4df9 100644 --- a/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html +++ b/UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.html @@ -28,11 +28,5 @@ {{readingTimeEntity | readTime }} } - • - @if (libraryType === LibraryType.Book || libraryType === LibraryType.LightNovel) { - {{t('words-count', {num: readingTimeEntity.wordCount | compactNumber})}} - } @else { - {{t('pages-count', {num: readingTimeEntity.pages | compactNumber})}} - }
diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss index d0a05c55bc..677baf3c06 100644 --- a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss +++ b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.scss @@ -15,35 +15,8 @@ text-align: center; } -::ng-deep .image-container app-image img { - max-height: 400px; - object-fit: contain; -} -@media screen and (max-width: 576px) { - .image-container{ - width: 100vw; - top: 0; - left: 0; - pointer-events: none; - position: absolute !important; - display: block !important; - max-height: unset !important; - max-width: unset !important; - } - ::ng-deep .image-container app-image img { - max-height: unset !important; - width: 100dvw !important; - opacity: 0.05 !important; - filter: blur(5px) !important; - max-width: 100dvw; - height: 100dvh; - overflow: hidden; - object-fit: cover; - } - -} // //.rating-star { // margin-top: 2px; @@ -70,13 +43,4 @@ } } -.upper-details { - font-size: 0.9rem; -} -@media (max-width: 768px) { - .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%); - } -} diff --git a/UI/Web/src/app/volume-detail/volume-detail.component.html b/UI/Web/src/app/volume-detail/volume-detail.component.html index 99fb819b3b..1db3df2d33 100644 --- a/UI/Web/src/app/volume-detail/volume-detail.component.html +++ b/UI/Web/src/app/volume-detail/volume-detail.component.html @@ -6,12 +6,20 @@
- - @if (volume.pagesRead < volume.pages && volume.pagesRead > 0) { + @if(mobileSeriesImgBackground === 'true') { + + } @else { + + } + +

From 7befed39cba4809783a6189d01131f27db2c5d4b Mon Sep 17 00:00:00 2001 From: Robbie Davis Date: Wed, 21 Aug 2024 15:00:59 -0400 Subject: [PATCH 8/9] tablet test --- UI/Web/src/_series-detail-common.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss index 4d02e03c01..e8b5f51f2e 100644 --- a/UI/Web/src/_series-detail-common.scss +++ b/UI/Web/src/_series-detail-common.scss @@ -154,7 +154,7 @@ object-fit: cover !important; } -@media screen and (max-width: 576px) { +@media screen and (max-width: 800px) { .image-container.mobile-bg{ width: 100vw; top: calc(var(--nav-offset) - 20px); From 063a832e120d14c7f6f1c1781863185aa3475260 Mon Sep 17 00:00:00 2001 From: Robbie Davis Date: Wed, 21 Aug 2024 16:32:55 -0400 Subject: [PATCH 9/9] Adding for tablet view --- UI/Web/src/_series-detail-common.scss | 3 ++- .../_components/series-detail/series-detail.component.html | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss index e8b5f51f2e..7cb729d070 100644 --- a/UI/Web/src/_series-detail-common.scss +++ b/UI/Web/src/_series-detail-common.scss @@ -154,7 +154,8 @@ object-fit: cover !important; } -@media screen and (max-width: 800px) { +/* col-lg */ +@media screen and (max-width: 991px) { .image-container.mobile-bg{ width: 100vw; top: calc(var(--nav-offset) - 20px); 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 1172d25cc4..6cd15eafea 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 @@ -32,7 +32,7 @@

-
+

{{series.name}} @@ -136,7 +136,7 @@

-
+
{{t('writers-title')}}
-
+
{{t('genres-title')}}