Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2025-07-09 03:04:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

dynamic height for series detail (#1321)

Browse Source 
* Adding dynamic height function

* pushing change requests

* Moved method to getter

* Changed carousel reel to onpush strat

Co-authored-by: Joseph Milazzo <joseph.v.milazzo@gmail.com>
This commit is contained in:
Robbie Davis 2022-06-14 11:01:06 -04:00 committed by GitHub
parent 1edf23d8c3
commit 78f0bad144
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
UI/Web/src/app/carousel/carousel-reel/carousel-reel.component.ts
View File

@ -1,10 +1,11 @@
import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
import { Swiper, SwiperEvents } from 'swiper/types'; import { Swiper, SwiperEvents } from 'swiper/types';
@Component({ @Component({
selector: 'app-carousel-reel', selector: 'app-carousel-reel',
templateUrl: './carousel-reel.component.html', templateUrl: './carousel-reel.component.html',
styleUrls: ['./carousel-reel.component.scss'] styleUrls: ['./carousel-reel.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class CarouselReelComponent { export class CarouselReelComponent {
@ -18,7 +19,7 @@ export class CarouselReelComponent {
trackByIdentity: (index: number, item: any) => string; trackByIdentity: (index: number, item: any) => string;
constructor() { constructor(private readonly cdRef: ChangeDetectorRef) {
this.trackByIdentity = (index: number, item: any) => `${this.title}_${item.id}_${item?.name}_${item?.pagesRead}_${index}`; this.trackByIdentity = (index: number, item: any) => `${this.title}_${item.id}_${item?.name}_${item?.pagesRead}_${index}`;
} }
@ -26,6 +27,7 @@ export class CarouselReelComponent {
if (this.swiper) { if (this.swiper) {
if (this.swiper.isEnd) return; if (this.swiper.isEnd) return;
this.swiper.setProgress(this.swiper.progress + 0.25, 600); this.swiper.setProgress(this.swiper.progress + 0.25, 600);
this.cdRef.markForCheck();
} }
} }
@ -33,6 +35,7 @@ export class CarouselReelComponent {
if (this.swiper) { if (this.swiper) {
if (this.swiper.isBeginning) return; if (this.swiper.isBeginning) return;
this.swiper.setProgress(this.swiper.progress - 0.25, 600); this.swiper.setProgress(this.swiper.progress - 0.25, 600);
this.cdRef.markForCheck();
} }
} }
@ -42,5 +45,6 @@ export class CarouselReelComponent {
onSwiper(eventParams: Parameters<SwiperEvents['init']>) { onSwiper(eventParams: Parameters<SwiperEvents['init']>) {
[this.swiper] = eventParams; [this.swiper] = eventParams;
this.cdRef.detectChanges();
} }
} }

2
UI/Web/src/app/series-detail/series-detail.component.html
View File

@ -52,7 +52,7 @@
</app-side-nav-companion-bar> </app-side-nav-companion-bar>
<div (scroll)="onScroll()" class="main-container container-fluid pt-2" *ngIf="series !== undefined" #scrollingBlock> <div (scroll)="onScroll()" [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid pt-2" *ngIf="series !== undefined" #scrollingBlock>
<div class="row mb-3 info-container"> <div class="row mb-3 info-container">
<div class="col-md-2 col-xs-4 col-sm-6 d-none d-sm-block"> <div class="col-md-2 col-xs-4 col-sm-6 d-none d-sm-block">
<app-image maxWidth="300px" [imageUrl]="seriesImage"></app-image> <app-image maxWidth="300px" [imageUrl]="seriesImage"></app-image>

2
UI/Web/src/app/series-detail/series-detail.component.scss
View File

@ -23,7 +23,7 @@
// This is responsible for ensuring we scroll down and only tabs and companion bar is visible // This is responsible for ensuring we scroll down and only tabs and companion bar is visible
.main-container { .main-container {
height: calc(var(--vh)*100 - 117px); // Height set dynamically by series-detail.component.ts getHeight();
overflow-y: auto; overflow-y: auto;
} }

12
UI/Web/src/app/series-detail/series-detail.component.ts
View File

@ -1,4 +1,4 @@
import { Component, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Title } from '@angular/platform-browser'; import { Title } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { NgbModal, NgbNavChangeEvent, NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap'; import { NgbModal, NgbNavChangeEvent, NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';
@ -65,7 +65,7 @@ interface StoryLineItem {
}) })
export class SeriesDetailComponent implements OnInit, OnDestroy { export class SeriesDetailComponent implements OnInit, OnDestroy {
@ViewChild(VirtualScrollerComponent) private virtualScroller!: VirtualScrollerComponent; @ViewChild('scrollingBlock') scrollingBlock: ElementRef<HTMLDivElement> | undefined;
/** /**
* Series Id. Set at load before UI renders * Series Id. Set at load before UI renders
@ -261,6 +261,14 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
} }
} }
get ScrollingBlockHeight() {
if (this.scrollingBlock === undefined) return 'calc(var(--vh)*100)';
const mainOffset = this.scrollingBlock.nativeElement.offsetTop;
return 'calc(var(--vh)*100 - ' + mainOffset + 'px)';
}
ngOnInit(): void { ngOnInit(): void {
const routeId = this.route.snapshot.paramMap.get('seriesId'); const routeId = this.route.snapshot.paramMap.get('seriesId');
const libraryId = this.route.snapshot.paramMap.get('libraryId'); const libraryId = this.route.snapshot.paramMap.get('libraryId');