More Bugfixes from Side Nav (#1162)

* Fixed a bug where the bottom of the page could be cut off * Adjusted all the headings to h2, which looks better * Refactored GetSeriesDetail to actually map the names inside the code so the UI just displays. * Put in some basic improvements to OPDS by using Series Detail type layout, but this only reduces one click. * Fixed a bug where offset from scrollbar fix causes readers to be cutoff.
2022-03-17 20:27:39 -05:00 · 2022-03-17 20:27:39 -05:00 · bff49c0e7a
commit bff49c0e7a
parent 5220d2b300
16 changed files with 114 additions and 54 deletions
--- a/UI/Web/src/app/_services/nav.service.ts
+++ b/UI/Web/src/app/_services/nav.service.ts
@ -1,4 +1,5 @@
-import { Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
 import { ReplaySubject, take } from 'rxjs';

@Injectable({
@ -25,7 +26,10 @@ export class NavService {
   */
  sideNavVisibility$ = this.sideNavVisibilitySource.asObservable();

-  constructor() {
+  private renderer: Renderer2;
+
+  constructor(@Inject(DOCUMENT) private document: Document, rendererFactory: RendererFactory2) {
+    this.renderer = rendererFactory.createRenderer(null, null);
    this.showNavBar();
    const sideNavState = (localStorage.getItem(this.localStorageSideNavKey) === 'true') || false;
    this.sideNavCollapseSource.next(sideNavState);
@ -36,6 +40,7 @@ export class NavService {
   * Shows the top nav bar. This should be visible on all pages except the reader.
   */
  showNavBar() {
+    this.renderer.setStyle(this.document.querySelector('body'), 'margin-top', '56px');
    this.navbarVisibleSource.next(true);
  }

@ -43,6 +48,7 @@ export class NavService {
   * Hides the top nav bar. 
   */
  hideNavBar() {
+    this.renderer.setStyle(this.document.querySelector('body'), 'margin-top', '0px');
    this.navbarVisibleSource.next(false);
  }

--- a/UI/Web/src/app/admin/dashboard/dashboard.component.html
+++ b/UI/Web/src/app/admin/dashboard/dashboard.component.html
@ -1,7 +1,7 @@
 <app-side-nav-companion-bar>
-  <h1 title>
+  <h2 title>
    Admin Dashboard
-  </h1>
+  </h2>
 </app-side-nav-companion-bar>
 <div class="container-fluid">
  <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav nav-tabs">
--- a/UI/Web/src/app/all-series/all-series.component.html
+++ b/UI/Web/src/app/all-series/all-series.component.html
@ -1,8 +1,8 @@
 <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)">
-    <h1 title>
+    <h2 title>
        <app-card-actionables [actions]="actions"></app-card-actionables>
        All Series
-    </h1>
+    </h2>
    <h6 subtitle style="margin-left:40px;">{{pagination?.totalItems}} Series</h6>
 </app-side-nav-companion-bar>
 <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
--- a/UI/Web/src/app/app.component.html
+++ b/UI/Web/src/app/app.component.html
@ -2,12 +2,15 @@
 <div [ngClass]="{'closed' : !(navService?.sideNavCollapsed$ | async), 'content-wrapper': navService.sideNavVisibility$ | async}">
    <a id="content"></a>
    <app-side-nav *ngIf="navService.sideNavVisibility$ | async"></app-side-nav>
-    <div class="container-fluid" style="padding-top: 10px; padding-bottom: 10px;" *ngIf="navService.sideNavVisibility$ | async else noSideNav">
-        <div class="companion-bar" [ngClass]="{'companion-bar-content': (navService?.sideNavCollapsed$ | async)}">
-            <router-outlet></router-outlet>
+    <div class="container-fluid">
+        <div style="padding-top: 10px; padding-bottom: 65px;" *ngIf="navService.sideNavVisibility$ | async else noSideNav">
+            <div class="companion-bar" [ngClass]="{'companion-bar-content': (navService?.sideNavCollapsed$ | async)}">
+                <router-outlet></router-outlet>
+            </div>
        </div>
+        <ng-template #noSideNav>
+            <router-outlet></router-outlet>
+        </ng-template>
    </div>
-    <ng-template #noSideNav>
-        <router-outlet></router-outlet>
-    </ng-template>
+    
 </div>
--- a/UI/Web/src/app/collections/all-collections/all-collections.component.html
+++ b/UI/Web/src/app/collections/all-collections/all-collections.component.html
@ -1,8 +1,8 @@
 <app-side-nav-companion-bar [hasFilter]="false" (filterOpen)="filterOpen.emit($event)">
-    <h1 title>
+    <h2 title>
        <app-card-actionables [actions]="collectionTagActions"></app-card-actionables>
        Collections
-    </h1>
+    </h2>
    <h6 subtitle style="margin-left:40px;">{{collections.length}} Items</h6>
 </app-side-nav-companion-bar>
 <app-card-detail-layout
--- a/UI/Web/src/app/library-detail/library-detail.component.html
+++ b/UI/Web/src/app/library-detail/library-detail.component.html
@ -1,8 +1,8 @@
 <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)">
-    <h1 title>
+    <h2 title>
        <app-card-actionables [actions]="actions"></app-card-actionables>
        {{libraryName}}
-    </h1>
+    </h2>
    <h6 subtitle style="margin-left:40px;">{{pagination?.totalItems}} Series</h6>
    <div main>
        <!-- TODO: Implement Tabs here for Recommended and Library view -->
--- a/UI/Web/src/app/on-deck/on-deck.component.html
+++ b/UI/Web/src/app/on-deck/on-deck.component.html
@ -1,7 +1,7 @@
 <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)">
-    <h1 title>
+    <h2 title>
        On Deck
-    </h1>
+    </h2>
 </app-side-nav-companion-bar>
 <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
 <app-card-detail-layout
--- a/UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.html
+++ b/UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.html
@ -1,11 +1,11 @@
 <app-side-nav-companion-bar [showGoBack]="true">
-  <h1 title>
+  <h2 title>
    <span *ngIf="actions.length > 0">
      <app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="readingList.title"></app-card-actionables>
    </span>
    {{readingList.title}}&nbsp;<span *ngIf="readingList?.promoted">(<i class="fa fa-angle-double-up" aria-hidden="true"></i>)</span>&nbsp;
    <span class="badge bg-primary rounded-pill" attr.aria-label="{{items.length}} total items">{{items.length}}</span>
-  </h1>
+  </h2>
 </app-side-nav-companion-bar>
 <div class="container-fluid mt-2" *ngIf="readingList">
  <div class="mb-3">
--- a/UI/Web/src/app/reading-list/reading-lists/reading-lists.component.html
+++ b/UI/Web/src/app/reading-list/reading-lists/reading-lists.component.html
@ -1,8 +1,8 @@
 <app-side-nav-companion-bar [showGoBack]="true" pageHeader="Home">
-    <h1 title>
+    <h2 title>
        <app-card-actionables [actions]="actions"></app-card-actionables>
        Reading Lists
-    </h1>
+    </h2>
    <h6 subtitle>{{pagination?.totalItems}} Items</h6>
 </app-side-nav-companion-bar>

--- a/UI/Web/src/app/recently-added/recently-added.component.html
+++ b/UI/Web/src/app/recently-added/recently-added.component.html
@ -1,7 +1,7 @@
 <app-side-nav-companion-bar [hasFilter]="true" (filterOpen)="filterOpen.emit($event)">
-    <h1 title>
+    <h2 title>
        Recently Added
-    </h1>
+    </h2>
 </app-side-nav-companion-bar>
 <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
 <app-card-detail-layout
--- a/UI/Web/src/app/series-detail/series-detail.component.html
+++ b/UI/Web/src/app/series-detail/series-detail.component.html
@ -67,7 +67,7 @@
              <ng-template ngbNavContent>
                <div class="row g-0">
                    <ng-container *ngFor="let chapter of specials; let idx = index; trackBy: trackByChapterIdentity">
-                        <app-card-item class="col-auto p-2" *ngIf="chapter.isSpecial" [entity]="chapter" [title]="chapter.title || chapter.range" (click)="openChapter(chapter)"
+                        <app-card-item class="col-auto p-2" [entity]="chapter" [title]="chapter.title || chapter.range" (click)="openChapter(chapter)"
                        [imageUrl]="imageService.getChapterCoverImage(chapter.id)"
                        [read]="chapter.pagesRead" [total]="chapter.pages" [actions]="chapterActions" (selection)="bulkSelectionService.handleCardSelection('special', idx, chapters.length, $event)" [selected]="bulkSelectionService.isCardSelected('special', idx)" [allowSelection]="true"></app-card-item>
                    </ng-container>
@ -79,12 +79,12 @@
                <ng-template ngbNavContent>
                    <div class="row g-0">
                        <ng-container *ngFor="let volume of volumes; let idx = index; trackBy: trackByVolumeIdentity">
-                            <app-card-item class="col-auto p-2" *ngIf="volume.number != 0" [entity]="volume" [title]="formatVolumeTitle(volume)" (click)="openVolume(volume)"
+                            <app-card-item class="col-auto p-2" *ngIf="volume.number != 0" [entity]="volume" [title]="volume.name" (click)="openVolume(volume)"
                            [imageUrl]="imageService.getVolumeCoverImage(volume.id) + '&offset=' + coverImageOffset"
                            [read]="volume.pagesRead" [total]="volume.pages" [actions]="volumeActions" (selection)="bulkSelectionService.handleCardSelection('volume', idx, volumes.length, $event)" [selected]="bulkSelectionService.isCardSelected('volume', idx)" [allowSelection]="true"></app-card-item>
                        </ng-container>
                          <ng-container *ngFor="let chapter of storyChapters; let idx = index; trackBy: trackByChapterIdentity">
-                              <app-card-item class="col-auto p-2" *ngIf="!chapter.isSpecial" [entity]="chapter" [title]="formatChapterTitle(chapter)" (click)="openChapter(chapter)"
+                              <app-card-item class="col-auto p-2" *ngIf="!chapter.isSpecial" [entity]="chapter" [title]="chapter.title" (click)="openChapter(chapter)"
                              [imageUrl]="imageService.getChapterCoverImage(chapter.id) + '&offset=' + coverImageOffset"
                              [read]="chapter.pagesRead" [total]="chapter.pages" [actions]="chapterActions" (selection)="bulkSelectionService.handleCardSelection('chapter', idx, storyChapters.length, $event)" [selected]="bulkSelectionService.isCardSelected('chapter', idx)" [allowSelection]="true"></app-card-item>
                          </ng-container>
@ -96,7 +96,7 @@
                <ng-template ngbNavContent>
                    <div class="row g-0">
                          <ng-container *ngFor="let volume of volumes; let idx = index; trackBy: trackByVolumeIdentity">
-                                  <app-card-item class="col-auto p-2" [entity]="volume" [title]="formatVolumeTitle(volume)" (click)="openVolume(volume)"
+                                  <app-card-item class="col-auto p-2" [entity]="volume" [title]="volume.name" (click)="openVolume(volume)"
                                  [imageUrl]="imageService.getVolumeCoverImage(volume.id) + '&offset=' + coverImageOffset"
                                  [read]="volume.pagesRead" [total]="volume.pages" [actions]="volumeActions" (selection)="bulkSelectionService.handleCardSelection('volume', idx, volumes.length, $event)" [selected]="bulkSelectionService.isCardSelected('volume', idx)" [allowSelection]="true"></app-card-item>
                          </ng-container>
@ -108,7 +108,7 @@
                <ng-template ngbNavContent>
                    <div class="row g-0">
                        <ng-container *ngFor="let chapter of chapters; let idx = index; trackBy: trackByChapterIdentity">
-                            <app-card-item class="col-auto p-2" *ngIf="!chapter.isSpecial" [entity]="chapter" [title]="formatChapterTitle(chapter)" (click)="openChapter(chapter)"
+                            <app-card-item class="col-auto p-2" *ngIf="!chapter.isSpecial" [entity]="chapter" [title]="chapter.title" (click)="openChapter(chapter)"
                            [imageUrl]="imageService.getChapterCoverImage(chapter.id) + '&offset=' + coverImageOffset"
                            [read]="chapter.pagesRead" [total]="chapter.pages" [actions]="chapterActions" (selection)="bulkSelectionService.handleCardSelection('chapter', idx, chapters.length, $event)" [selected]="bulkSelectionService.isCardSelected('chapter', idx)" [allowSelection]="true"></app-card-item>
                        </ng-container>
--- a/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html
+++ b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html
@ -1,7 +1,7 @@
 <app-side-nav-companion-bar>
-    <h1 title>
+    <h2 title>
        User Dashboard
-    </h1>
+    </h2>
 </app-side-nav-companion-bar>
 <div class="container-fluid">
    <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav nav-tabs">
--- a/UI/Web/src/theme/utilities/_global.scss
+++ b/UI/Web/src/theme/utilities/_global.scss
@ -8,7 +8,7 @@ body {
  color-scheme: var(--color-scheme);
  max-height: 100%;
  overflow-y: auto;
-  margin-top: 56px;
+  //margin-top: 56px; // Set by nav service
 }