diff --git a/UI/Web/src/app/series-detail/series-detail.component.scss b/UI/Web/src/app/series-detail/series-detail.component.scss
index f2777c510..7c90e746b 100644
--- a/UI/Web/src/app/series-detail/series-detail.component.scss
+++ b/UI/Web/src/app/series-detail/series-detail.component.scss
@@ -16,20 +16,14 @@
.virtual-scroller, virtual-scroller {
width: 100%;
- //height: 10000px;
height: calc(100vh - 85px);
max-height: calc(var(--vh)*100 - 170px);
}
// This is responsible for ensuring we scroll down and only tabs and companion bar is visible
.main-container {
- // Height set dynamically by series-detail.component.ts getHeight();
+ // Height set dynamically by getHeight()
overflow-y: auto;
-}
-
-.nav-tabs.fixed {
- position: fixed;
- z-index: 100;
- background-color: var(--bs-body-bg);
- width: 100%;
+ position: relative;
+ overscroll-behavior-y: none;
}
diff --git a/UI/Web/src/app/series-detail/series-detail.component.ts b/UI/Web/src/app/series-detail/series-detail.component.ts
index 0b55c8b86..4e22c765f 100644
--- a/UI/Web/src/app/series-detail/series-detail.component.ts
+++ b/UI/Web/src/app/series-detail/series-detail.component.ts
@@ -1,9 +1,9 @@
-import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild, Renderer2, AfterViewInit, Inject } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { NgbModal, NgbNavChangeEvent, NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
-import { forkJoin, Subject } from 'rxjs';
+import { forkJoin, fromEvent, Subject, debounceTime } from 'rxjs';
import { finalize, take, takeUntil, takeWhile } from 'rxjs/operators';
import { BulkSelectionService } from '../cards/bulk-selection.service';
import { EditSeriesModalComponent } from '../cards/_modals/edit-series-modal/edit-series-modal.component';
@@ -37,7 +37,7 @@ import { RelationKind } from '../_models/series-detail/relation-kind';
import { CardDetailDrawerComponent } from '../cards/card-detail-drawer/card-detail-drawer.component';
import { FormControl, FormGroup } from '@angular/forms';
import { PageLayoutMode } from '../_models/page-layout-mode';
-import { VirtualScrollerComponent } from '@iharbeck/ngx-virtual-scroller';
+import { DOCUMENT } from '@angular/common';
interface RelatedSeris {
series: Series;
@@ -63,9 +63,10 @@ interface StoryLineItem {
templateUrl: './series-detail.component.html',
styleUrls: ['./series-detail.component.scss']
})
-export class SeriesDetailComponent implements OnInit, OnDestroy {
+export class SeriesDetailComponent implements OnInit, OnDestroy, AfterViewInit {
- @ViewChild('scrollingBlock') scrollingBlock: ElementRef
| undefined;
+ @ViewChild('scrollingBlock') scrollingBlock: ElementRef | undefined;
+ @ViewChild('companionBar') companionBar: ElementRef | undefined;
/**
* Series Id. Set at load before UI renders
@@ -220,6 +221,16 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
return PageLayoutMode;
}
+ get ScrollingBlockHeight() {
+ if (this.scrollingBlock === undefined) return 'calc(var(--vh)*100)';
+ const navbar = this.document.querySelector('.navbar') as HTMLElement;
+ if (navbar === null) return 'calc(var(--vh)*100)';
+
+ const companionHeight = this.companionBar!.nativeElement.offsetHeight;
+ const navbarHeight = navbar.offsetHeight;
+ const totalHeight = companionHeight + navbarHeight + 21; //21px to account for padding
+ return 'calc(var(--vh)*100 - ' + totalHeight + 'px)';
+ }
constructor(private route: ActivatedRoute, private seriesService: SeriesService,
private router: Router, public bulkSelectionService: BulkSelectionService,
@@ -231,7 +242,8 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
private downloadService: DownloadService, private actionService: ActionService,
public imageSerivce: ImageService, private messageHub: MessageHubService,
private readingListService: ReadingListService, public navService: NavService,
- private offcanvasService: NgbOffcanvas
+ private offcanvasService: NgbOffcanvas, private renderer: Renderer2,
+ @Inject(DOCUMENT) private document: Document
) {
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
@@ -244,30 +256,6 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
});
}
- onScroll(): void {
- const tabs = document.querySelector('.nav-tabs') as HTMLElement | null;
- const main = document.querySelector('.main-container') as HTMLElement | null;
- const content = document.querySelector('.tab-content') as HTMLElement | null;
- let mainOffset = main!.offsetTop;
- let tabOffset = tabs!.offsetTop;
- let contentOffset = content!.offsetTop;
- let mainScrollPos = main!.scrollTop;
-
- if (!document.querySelector('.nav-tabs.fixed') && (tabOffset - mainOffset) <= mainScrollPos) {
- tabs!.classList.add("fixed");
- tabs!.style.top = mainOffset+'px';
- } else if (document.querySelector('.nav-tabs.fixed') && mainScrollPos <= (contentOffset - mainOffset)) {
- tabs!.classList.remove("fixed");
- }
- }
-
-
-
- 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');
@@ -307,6 +295,17 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
this.onDestroy.complete();
}
+ ngAfterViewInit(): void {
+ this.initScroll();
+ }
+
+ initScroll() {
+ if (this.scrollingBlock === undefined || this.scrollingBlock.nativeElement === undefined) {
+ setTimeout(() => {this.initScroll()}, 10);
+ return;
+ }
+ }
+
@HostListener('document:keydown.shift', ['$event'])
handleKeypress(event: KeyboardEvent) {
if (event.key === KEY_CODES.SHIFT) {
@@ -435,7 +434,6 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
series: this.seriesService.getSeries(seriesId)
}).subscribe(results => {
this.libraryType = results.libType;
- console.log('library type: ', this.libraryType);
this.series = results.series;
this.createHTML();
diff --git a/UI/Web/src/app/shared/_services/utility.service.ts b/UI/Web/src/app/shared/_services/utility.service.ts
index 20d096b0b..8f49d3335 100644
--- a/UI/Web/src/app/shared/_services/utility.service.ts
+++ b/UI/Web/src/app/shared/_services/utility.service.ts
@@ -1,12 +1,10 @@
import { HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot } from '@angular/router';
import { Chapter } from 'src/app/_models/chapter';
import { LibraryType } from 'src/app/_models/library';
import { MangaFormat } from 'src/app/_models/manga-format';
import { PaginatedResult } from 'src/app/_models/pagination';
import { Series } from 'src/app/_models/series';
-import { SeriesFilter, SortField } from 'src/app/_models/series-filter';
import { Volume } from 'src/app/_models/volume';
export enum KEY_CODES {