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

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
Download patch file Download diff file Expand all files Collapse all files

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');