AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding isfilteropen to card-detail-layout

Browse source 
fully fixes #3584
This commit is contained in:
Robbie Davis 2025-03-14 17:34:31 -04:00
parent 5ef8d43540
commit 059c4c6936
3 changed files with 21 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
View file

@ -24,7 +24,7 @@
}
<app-metadata-filter [filterSettings]="filterSettings" [filterOpen]="filterOpen" (applyFilter)="applyMetadataFilter($event)"></app-metadata-filter>
<div class="viewport-container ms-1" [ngClass]="{'empty': items.length === 0 && !isLoading}">
<div class="viewport-container ms-1" [ngClass]="{'empty': items.length === 0 && !isLoading, 'expanded': (isFilterOpen$ | async)}">
<div class="content-container">
<div class="card-container mt-">
@if (items.length === 0 && !isLoading) {

10
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss
View file

@ -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;

15
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts
View file

@ -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<boolean>;
@Input() filterOpen!: EventEmitter<boolean>; // 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() {