@if (items.length === 0 && !isLoading) {
diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
index c4aacb7b8..3e07b1af3 100644
--- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
+++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
@@ -5,11 +5,21 @@
height: calc((var(--vh) *100) - 157px);
margin-bottom: 10px;
+ &.expanded {
+ height: calc((var(--vh) *100) - 520px);
+ }
+
+
+
&.empty {
height: auto;
}
}
+::ng-deep .viewport-container.expanded .virtual-scroller, ::ng-deep .viewport-container.expanded virtual-scroller {
+ height: calc((var(--vh) *100) - 520px);
+}
+
.content-container {
display: flex;
flex-direction: column;
diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts
index a8b27c953..a0b838f07 100644
--- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts
+++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts
@@ -1,4 +1,4 @@
-import {DOCUMENT, NgClass, NgForOf, NgTemplateOutlet} from '@angular/common';
+import {AsyncPipe, DOCUMENT, NgClass, NgForOf, NgTemplateOutlet} from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
@@ -36,9 +36,10 @@ import {MetadataFilterComponent} from "../../metadata-filter/metadata-filter.com
import {TranslocoDirective} from "@jsverse/transloco";
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
import {SeriesFilterV2} from "../../_models/metadata/v2/series-filter-v2";
-import {filter, map} from "rxjs/operators";
+import {filter, map, startWith} from "rxjs/operators";
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
-import {tap} from "rxjs";
+import {of, pipe, tap} from "rxjs";
+import { ToggleService } from 'src/app/_services/toggle.service';
const ANIMATION_TIME_MS = 0;
@@ -47,7 +48,7 @@ const ANIMATION_TIME_MS = 0;
selector: 'app-card-detail-layout',
standalone: true,
imports: [LoadingComponent, VirtualScrollerModule, CardActionablesComponent, NgbTooltip, MetadataFilterComponent,
- TranslocoDirective, NgTemplateOutlet, NgClass, NgForOf],
+ TranslocoDirective, NgTemplateOutlet, NgClass, NgForOf, AsyncPipe],
templateUrl: './card-detail-layout.component.html',
styleUrls: ['./card-detail-layout.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -60,6 +61,7 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
private readonly jumpbarService = inject(JumpbarService);
private readonly router = inject(Router);
private readonly destroyRef = inject(DestroyRef);
+ private readonly toggleService = inject(ToggleService);
protected readonly Breakpoint = Breakpoint;
@@ -73,7 +75,7 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
@Input() parentScroll!: Element | Window;
// Filter Code
- @Input() filterOpen!: EventEmitter
;
+ @Input() filterOpen!: EventEmitter; // TODO: Remove, we use a toggleservice
/**
* Should filtering be shown on the page
*/
@@ -108,6 +110,8 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
updateApplied: number = 0;
bufferAmount: number = 1;
+ isFilterOpen$ = this.toggleService.toggleState$.pipe(takeUntilDestroyed(this.destroyRef), startWith(false));
+
constructor(@Inject(DOCUMENT) private document: Document) {}
@@ -169,6 +173,7 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
setTimeout(() => this.virtualScroller.scrollToIndex(0, true, 0, ANIMATION_TIME_MS), 10);
}
}
+
}
hasCustomSort() {
diff --git a/UI/Web/src/app/cards/series-card/series-card.component.html b/UI/Web/src/app/cards/series-card/series-card.component.html
index d226353cb..4b3a61599 100644
--- a/UI/Web/src/app/cards/series-card/series-card.component.html
+++ b/UI/Web/src/app/cards/series-card/series-card.component.html
@@ -66,7 +66,7 @@
-
+
{{series.name}}
diff --git a/UI/Web/src/app/metadata-filter/metadata-filter.component.ts b/UI/Web/src/app/metadata-filter/metadata-filter.component.ts
index a6469a0a3..6205d6b91 100644
--- a/UI/Web/src/app/metadata-filter/metadata-filter.component.ts
+++ b/UI/Web/src/app/metadata-filter/metadata-filter.component.ts
@@ -38,7 +38,7 @@ import {
Select2UpdateValue
} from "ng-select2-component";
import {SmartFilter} from "../_models/metadata/v2/smart-filter";
-import {animate, state, style, transition, trigger} from "@angular/animations";
+import {animate, keyframes, state, style, transition, trigger} from "@angular/animations";
const ANIMATION_SPEED = 750;
@@ -55,7 +55,11 @@ const ANIMATION_SPEED = 750;
[
style({ height: 0, opacity: 0 }),
animate('.5s ease-out',
- style({ height: 300, opacity: 1 }))
+ keyframes([
+ style({ height: 300, offset: 0}),
+ style({ opacity: 1, offset: 0.8 })
+ ])
+ )
]
),
transition(
@@ -63,9 +67,14 @@ const ANIMATION_SPEED = 750;
[
style({ height: 300, opacity: 1 }),
animate('.5s ease-in',
- style({ height: 0, opacity: 0 }))
- ]
- )
+ keyframes([
+
+ style({ opacity: 0, offset: 0 }),
+ style({ height: 0, offset: 0.8})
+ ])
+ )
+ ],
+ ),
]
),
],
diff --git a/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.scss b/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.scss
index 51810e4cd..165fa742e 100644
--- a/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.scss
+++ b/UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.scss
@@ -36,7 +36,7 @@ $image-height: 125px;
}
::ng-deep .read-more-cont div {
- -webkit-line-clamp: 4;
+ -webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
display:-webkit-box;
@@ -45,7 +45,7 @@ $image-height: 125px;
@media (max-width: 576px) {
::ng-deep .read-more-cont div {
- -webkit-line-clamp: 4;
+ -webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
display:-webkit-box;
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 c89257c0b..2b01bdc46 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
@@ -1,6 +1,6 @@