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';
@Component({
selector: 'app-carousel-reel',
templateUrl: './carousel-reel.component.html',
styleUrls: ['./carousel-reel.component.scss']
styleUrls: ['./carousel-reel.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CarouselReelComponent {
@ -18,7 +19,7 @@ export class CarouselReelComponent {
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}`;
}
@ -26,6 +27,7 @@ export class CarouselReelComponent {
if (this.swiper) {
if (this.swiper.isEnd) return;
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.isBeginning) return;
this.swiper.setProgress(this.swiper.progress - 0.25, 600);
this.cdRef.markForCheck();
}
}
@ -42,5 +45,6 @@ export class CarouselReelComponent {
onSwiper(eventParams: Parameters<SwiperEvents['init']>) {
[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>
<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="col-md-2 col-xs-4 col-sm-6 d-none d-sm-block">
<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
.main-container {
height: calc(var(--vh)*100 - 117px);
// Height set dynamically by series-detail.component.ts getHeight();
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 { ActivatedRoute, Router } from '@angular/router';
import { NgbModal, NgbNavChangeEvent, NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';
@ -65,7 +65,7 @@ interface StoryLineItem {
})
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
@ -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 {
const routeId = this.route.snapshot.paramMap.get('seriesId');
const libraryId = this.route.snapshot.paramMap.get('libraryId');