From 39541a9b06604ab0a1e43a0b2d18110288ed6cf8 Mon Sep 17 00:00:00 2001 From: Christopher <39032787+MrRobotjs@users.noreply.github.com> Date: Sun, 4 May 2025 20:49:20 -0600 Subject: [PATCH 1/9] bring icon down with text Makes it so icons and text are brought down together to the next line because screen is too small --- .../metadata-detail-row/metadata-detail-row.component.scss | 2 ++ 1 file changed, 2 insertions(+) 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; } From d9f1ab0d1ad9963f562b663dc3dac00a030a76d1 Mon Sep 17 00:00:00 2001 From: Christopher <39032787+MrRobotjs@users.noreply.github.com> Date: Sun, 4 May 2025 20:50:53 -0600 Subject: [PATCH 2/9] changed nav-offset variable to match height of the nav nav-offset variable was 60px which made content more lower than needed to --- UI/Web/src/theme/themes/dark.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UI/Web/src/theme/themes/dark.scss b/UI/Web/src/theme/themes/dark.scss index d06e4e4d0..a7e757361 100644 --- a/UI/Web/src/theme/themes/dark.scss +++ b/UI/Web/src/theme/themes/dark.scss @@ -88,7 +88,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 */ From 9b6b2c6df1d69f9529bea1a1ff6c780543ab75b0 Mon Sep 17 00:00:00 2001 From: Christopher <39032787+MrRobotjs@users.noreply.github.com> Date: Sun, 4 May 2025 21:37:19 -0600 Subject: [PATCH 3/9] series detail page mobile redesign --- UI/Web/src/_series-detail-common.scss | 260 ++++++++------- .../series-detail.component.html | 310 +++++++++--------- UI/Web/src/theme/_variables.scss | 1 + 3 files changed, 308 insertions(+), 263 deletions(-) diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss index f043dec17..1f17ed6ec 100644 --- a/UI/Web/src/_series-detail-common.scss +++ b/UI/Web/src/_series-detail-common.scss @@ -1,26 +1,141 @@ @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: lightgrey; - font-weight: bold; - font-size: 0.8rem; -} - .main-container { overflow: unset !important; - margin-top: 15px; + margin-top: 0.9375rem; + + .info-container { + .image-container-background.series { + display: none; + } + .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: lightgrey; + font-weight: bold; + font-size: 0.8rem; + } + } + .metadata-details-lower { + grid-column: 2; + grid-row: 2; + .continue-container { + display: flex; + .actions-row { + display: flex; + width: unset; + } + } + .upper-details { + font-size: 0.9rem; + } + } + } + } + + .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; + } + } +} + +@media (max-width: theme.$grid-breakpoints-lg) { + .main-container { + .info-container { + .info-grid-container { + grid-template-columns: 30% 70%; + } + } + } +} + +@media (max-width: theme.$grid-breakpoints-sm) { + .main-container { + .info-container { + .info-grid-container { + grid-template-columns: 35% 65%; + grid-template-rows: auto auto; + + .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; + .continue-container { + margin-top: 1rem; + } + } + } + } + } + :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 { + .metadata-details-lower { + .continue-container { + flex-direction: column; + .actions-row { + margin-top: 0.5rem; + } + } + } + } + } + } } ::ng-deep .badge-expander .content a { @@ -30,15 +145,15 @@ .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; + border-width: 0.0625rem 0.0625rem 0.0625rem 0 !important; } .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { - border-width: 1px 0 1px 1px !important; + border-width: 0.0625rem 0 0.0625rem 0.0625rem !important; } .card-body > div:nth-child(2) { - height: 50px; + height: 3.125rem; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; @@ -46,97 +161,16 @@ -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; - } - } - - .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; - } - - div { - width: 60px; - height: 60px; - i { - font-size: 1.6rem; - line-height: 60px; - width: 100%; - } - } - } -} - -.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-width: 0.0625rem; border-style: solid; - border-radius: 5px; + border-radius: 0.3125rem; border-color: var(--primary-color); - padding: 5px; + padding: 0.3125rem; vertical-align: middle; &:hover { @@ -144,8 +178,8 @@ } } -::ng-deep .image-container.mobile-bg app-image img { - max-height: 400px; +::ng-deep .image-container-background.mobile-bg app-image img { + max-height: 25rem; object-fit: contain; } @@ -156,16 +190,16 @@ } } -::ng-deep .image-container.mobile-bg app-image img { +::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.mobile-bg{ + .image-container-background.mobile-bg{ width: 100vw; - top: calc(var(--nav-offset) - 20px); + top: calc(var(--nav-offset) - 1.25rem); left: 0; pointer-events: none; position: fixed !important; @@ -175,10 +209,10 @@ height: 100dvh !important; } - ::ng-deep .image-container.mobile-bg app-image img { + ::ng-deep .image-container-background.mobile-bg app-image img { max-height: unset !important; opacity: 0.05 !important; - filter: blur(5px) !important; + filter: blur(0.3125rem) !important; max-width: 100dvw; height: 100dvh !important; overflow: hidden; 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 6d39b0b28..0c69a6740 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,173 +4,183 @@ @if (series && seriesMetadata && libraryType !== null) {
+
+ 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">
- -
-

- {{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('tags-title')}} +
+ + + {{item.title}} + + +
+
+
-
- {{t('publication-status-title')}} -
- @if (seriesMetadata.publicationStatus | publicationStatus; as pubStatus) { - - {{pubStatus}} - - } -
-
-
-
- -
-
-
- {{t('genres-title')}} -
- - - {{item.title}} - - -
-
- -
- {{t('tags-title')}} -
- - - {{item.title}} - - -
-
-
diff --git a/UI/Web/src/theme/_variables.scss b/UI/Web/src/theme/_variables.scss index 1ffbdeb54..a254053e6 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: 327px; $grid-breakpoints-sm: 576px; $grid-breakpoints-md: 768px; $grid-breakpoints-lg: 992px; From a67d5166bc4d016c9ba2aa51a9b23c61200b4aca Mon Sep 17 00:00:00 2001 From: Christopher <39032787+MrRobotjs@users.noreply.github.com> Date: Wed, 7 May 2025 22:52:17 -0600 Subject: [PATCH 4/9] poster becomes background at 350px --- UI/Web/src/_series-detail-common.scss | 206 +++++++++--------- .../series-detail.component.html | 7 +- UI/Web/src/theme/_variables.scss | 2 +- 3 files changed, 107 insertions(+), 108 deletions(-) diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss index 1f17ed6ec..448b1a892 100644 --- a/UI/Web/src/_series-detail-common.scss +++ b/UI/Web/src/_series-detail-common.scss @@ -5,9 +5,6 @@ margin-top: 0.9375rem; .info-container { - .image-container-background.series { - display: none; - } .info-grid-container { display: grid; 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) { .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%); + } + } +} + +@media (max-width: 760px) { + .main-container { + .info-container { + .info-grid-container { + grid-template-columns: 35% 65%; } } } @@ -80,6 +130,7 @@ .info-grid-container { grid-template-columns: 35% 65%; grid-template-rows: auto auto; + padding-bottom: unset; .image-container { display: block !important; @@ -105,9 +156,7 @@ .metadata-details-lower { grid-column: 1 / 3; grid-row: 2; - .continue-container { - margin-top: 1rem; - } + margin-top: 2rem; } } } @@ -125,7 +174,22 @@ .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 { @@ -136,108 +200,48 @@ } } } -} - -::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: 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; -} - -.card-body > div:nth-child(2) { - 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); + :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; + } + } + } + } + } + } } -} - -::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 { display:none; + background: red; } .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%); + :host ::ng-deep .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/series-detail/series-detail.component.html b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html index 0c69a6740..82df22e7b 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 @@ -5,13 +5,8 @@
-
- -
-
-
diff --git a/UI/Web/src/theme/_variables.scss b/UI/Web/src/theme/_variables.scss index a254053e6..9b247ef6e 100644 --- a/UI/Web/src/theme/_variables.scss +++ b/UI/Web/src/theme/_variables.scss @@ -16,7 +16,7 @@ $accordion-icon-active-color: #cecece; $grid-breakpoints-xs: 0; -$grid-breakpoints-smm: 327px; +$grid-breakpoints-smm: 350px; $grid-breakpoints-sm: 576px; $grid-breakpoints-md: 768px; $grid-breakpoints-lg: 992px; From 99c84952e5519e40e219990930dbfc951593b312 Mon Sep 17 00:00:00 2001 From: Christopher <39032787+MrRobotjs@users.noreply.github.com> Date: Thu, 8 May 2025 06:03:53 -0600 Subject: [PATCH 5/9] cleanup + changed reading button to solid color --- UI/Web/src/_series-detail-common.scss | 46 ++++++++++++++++++++------- 1 file changed, 35 insertions(+), 11 deletions(-) diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss index 448b1a892..ad4867074 100644 --- a/UI/Web/src/_series-detail-common.scss +++ b/UI/Web/src/_series-detail-common.scss @@ -36,6 +36,7 @@ grid-row: 2; .continue-container { display: flex; + .actions-row { display: flex; width: unset; @@ -61,16 +62,6 @@ } } -.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; } @@ -95,6 +86,40 @@ 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; + } + } + } + } + } + } } } @@ -226,7 +251,6 @@ } .progress-banner { display:none; - background: red; } .under-image { From b75cee7bac23fd7018664ffb2901530455d41e71 Mon Sep 17 00:00:00 2001 From: Christopher <39032787+MrRobotjs@users.noreply.github.com> Date: Thu, 8 May 2025 06:06:24 -0600 Subject: [PATCH 6/9] final cleanup --- UI/Web/src/_series-detail-common.scss | 94 ++++++++++++++------------- 1 file changed, 49 insertions(+), 45 deletions(-) diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss index ad4867074..7f59e46b1 100644 --- a/UI/Web/src/_series-detail-common.scss +++ b/UI/Web/src/_series-detail-common.scss @@ -66,54 +66,58 @@ 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%; - } - } - .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; - } +:host ::ng-deep { + .main-container { + .info-container { + .info-grid-container { + .image-container { + app-image { + img { + max-height: 100dvh !important; + object-fit: cover !important; } } - .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); + .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; + } + } } - &::after { - vertical-align: 0.11rem; + .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; + } + } } } } From e0fc4f11f582dd2a12f3079267d39ee1eb4325d7 Mon Sep 17 00:00:00 2001 From: Christopher <39032787+MrRobotjs@users.noreply.github.com> Date: Thu, 8 May 2025 06:13:53 -0600 Subject: [PATCH 7/9] fixed css hierarchy so progress bar and under image is gone when poster becomes background --- UI/Web/src/_series-detail-common.scss | 28 +++++++++++++-------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/UI/Web/src/_series-detail-common.scss b/UI/Web/src/_series-detail-common.scss index 7f59e46b1..cf97ba153 100644 --- a/UI/Web/src/_series-detail-common.scss +++ b/UI/Web/src/_series-detail-common.scss @@ -253,21 +253,19 @@ } } } - .progress-banner { - display:none; - } - - .under-image { - display: none; - } - :host ::ng-deep .info-container { - .info-grid-container { - .image-container { - .progress-banner { - display: none; - } - .under-image { - display: none; + + :host ::ng-deep { + .main-container { + .info-container { + .info-grid-container { + .image-container { + .progress-banner { + display: none; + } + .under-image { + display: none; + } + } } } } From f0c88ae0b926d777c5b53b35f45c9c7b8a2f7799 Mon Sep 17 00:00:00 2001 From: Christopher <39032787+MrRobotjs@users.noreply.github.com> Date: Thu, 15 May 2025 05:37:23 -0600 Subject: [PATCH 8/9] fixed applying background-color twice to the download button --- .../_components/series-detail/series-detail.component.html | 2 +- UI/Web/src/theme/components/_buttons.scss | 2 +- 2 files changed, 2 insertions(+), 2 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 82df22e7b..707f24cc0 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 @@ -105,7 +105,7 @@
-
+
diff --git a/UI/Web/src/theme/components/_buttons.scss b/UI/Web/src/theme/components/_buttons.scss index 09ce4157b..f1ad431fc 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); From 2739e1848edfd5626735ce450a25b7e920e48ad5 Mon Sep 17 00:00:00 2001 From: Christopher <39032787+MrRobotjs@users.noreply.github.com> Date: Thu, 15 May 2025 22:32:47 -0600 Subject: [PATCH 9/9] fixed indentation / updated to match develop --- .../series-detail.component.html | 397 ++++++++++-------- 1 file changed, 216 insertions(+), 181 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 707f24cc0..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,202 +4,221 @@ @if (series && seriesMetadata && libraryType !== null) {
- +
- +
- +
-

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

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

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

+
+ @if (series.localizedName !== series.name && series.localizedName) { + {{ series.localizedName | defaultValue }} + } +
+ + - -
-
+ [mangaFormat]="series.format"> + + +
+ + +
+
- +
-
-
-
- -
- -
- +
+ +
+ -
-
-
+ +
- -
-
-
+
+ +
+
+ -
+ +
- @if (isAdmin) { -
- -
- } - - @if ((licenseService.hasValidLicense$ | async) && libraryAllowsScrobbling) { -
- -
- } - -
-
- -
-
- -
- -
+ @if (isAdmin) { +
+
-
+ } -
- -
- -
-
-
- {{t('writers-title')}} -
- - - {{item.name}} - - -
-
-
- {{t('publication-status-title')}} -
- @if (seriesMetadata.publicationStatus | publicationStatus; as pubStatus) { - - {{pubStatus}} - - } -
-
+ @if ((licenseService.hasValidLicense$ | async) && libraryAllowsScrobbling) { +
+
-
+ } -
-
-
- {{t('genres-title')}} -
- - - {{item.title}} - - -
-
- -
- {{t('tags-title')}} -
- - - {{item.title}} - - -
-
+
+
+
+
+ +
+ +
+
+ +
+ +
+ +
+
+
+ {{ t('writers-title') }} +
+ + + {{ item.name }} + + +
+
+
+ {{ t('publication-status-title') }} +
+ @if (seriesMetadata.publicationStatus | publicationStatus; as pubStatus) { + + {{ pubStatus }} + + } +
+
+
+
+ +
+
+
+ {{ t('genres-title') }} +
+ + + {{ item.title }} + + +
+
+ +
+ {{ t('tags-title') }} +
+ + + {{ item.title }} + + +
+
+
+
-