Side Nav Fixes (#1161)

* Fixed an issue where there was extra padding on top/bottom of readers when side nav was hidden.

* Fixed a bug where fit to screen wasn't forcing width scaling

* Added back total pages to many pages

* Fixed the padding on series detail cards

* Tweaked carousels to match series detail padding

* Fixed an issue where large amount of libraries could have 2 highlighted at once due to how highlight logic works on routes.

* Cleaned up some extra space in card detail layout due to moving title into compainion bar

* Moved some gloabls to global and moved color-scheme to body tag

* Moved scrollbar onto the body itself which helps with page jank on loading and fixes scrollbar not working with theme

UI/Web/src/app/all-series/all-series.component.html

@@ -3,6 +3,7 @@
         <app-card-actionables [actions]="actions"></app-card-actionables>
         All Series
     </h1>
+    <h6 subtitle style="margin-left:40px;">{{pagination?.totalItems}} Series</h6>
 </app-side-nav-companion-bar>
 <app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
 <app-card-detail-layout 

UI/Web/src/app/app.component.html

@@ -1,16 +1,13 @@
 <app-nav-header></app-nav-header>
-<div class="content-wrapper" [ngClass]="{'closed' : !(navService?.sideNavCollapsed$ | async)}">
+<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;">
+    <div class="container-fluid" style="padding-top: 10px; padding-bottom: 10px;" *ngIf="navService.sideNavVisibility$ | async else noSideNav">
-        <ng-container *ngIf="navService.sideNavVisibility$ | async else noSideNav">
+        <div class="companion-bar" [ngClass]="{'companion-bar-content': (navService?.sideNavCollapsed$ | async)}">
-            <div class="companion-bar" [ngClass]="{'companion-bar-content': (navService?.sideNavCollapsed$ | async)}">
-                <router-outlet></router-outlet>
-            </div>
-        </ng-container>
-        <ng-template #noSideNav>
             <router-outlet></router-outlet>
-        </ng-template>
+        </div>
-        
     </div>
+    <ng-template #noSideNav>
+        <router-outlet></router-outlet>
+    </ng-template>
 </div>

UI/Web/src/app/app.component.scss

@@ -1,5 +1,5 @@
 .content-wrapper {
-    padding: calc(56px) 10px 0;
+    padding: 0 10px 0;
     height: 100%;
 }
 
@@ -19,7 +19,7 @@
     }
 
     .content-wrapper {
-        padding: calc(56px) 10px 0;
+        padding: 0 10px 0;
         overflow: hidden;
 
         &.closed {

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html

@@ -1,5 +1,5 @@
 
-    <div class="row mt-2 g-0 pb-2">
+<div class="row mt-2 g-0 pb-2" *ngIf="header !== undefined && header.length > 0">
         <div class="col me-auto">
             <h2 style="display: inline-block">
                 <span *ngIf="actions.length > 0" class="">

UI/Web/src/app/collections/all-collections/all-collections.component.html

@@ -3,6 +3,7 @@
         <app-card-actionables [actions]="collectionTagActions"></app-card-actionables>
         Collections
     </h1>
+    <h6 subtitle style="margin-left:40px;">{{collections.length}} Items</h6>
 </app-side-nav-companion-bar>
 <app-card-detail-layout
     [isLoading]="isLoading"

UI/Web/src/app/collections/collection-detail/collection-detail.component.html

@@ -6,7 +6,6 @@
         <div class="col-md-10 col-xs-8 col-sm-6">
             <div class="row g-0">
                 <h2>
-
                     {{collectionTag.title}}
                 </h2>
             </div>

UI/Web/src/app/library-detail/library-detail.component.html

@@ -3,6 +3,7 @@
         <app-card-actionables [actions]="actions"></app-card-actionables>
         {{libraryName}}
     </h1>
+    <h6 subtitle style="margin-left:40px;">{{pagination?.totalItems}} Series</h6>
     <div main>
         <!-- TODO: Implement Tabs here for Recommended and Library view -->
     </div>

UI/Web/src/app/manga-reader/manga-reader.component.html

@@ -37,7 +37,11 @@
                     ondragstart="return false;" onselectstart="return false;">
                 </canvas>
             </div>
-            <div class="image-container" [ngClass]="{'d-none': renderWithCanvas, 'center-double': ShouldRenderDoublePage, 'fit-to-width-double-offset' : this.generalSettingsForm.get('fittingOption')?.value === FITTING_OPTION.WIDTH && ShouldRenderDoublePage, 'fit-to-height-double-offset': this.generalSettingsForm.get('fittingOption')?.value === FITTING_OPTION.HEIGHT && ShouldRenderDoublePage, 'original-double-offset' : this.generalSettingsForm.get('fittingOption')?.value === FITTING_OPTION.ORIGINAL && ShouldRenderDoublePage, 'reverse': ShouldRenderReverseDouble}">
+            <div class="image-container" [ngClass]="{'d-none': renderWithCanvas, 'center-double': ShouldRenderDoublePage, 
+                    'fit-to-width-double-offset' : this.generalSettingsForm.get('fittingOption')?.value === FITTING_OPTION.WIDTH && ShouldRenderDoublePage, 
+                    'fit-to-height-double-offset': this.generalSettingsForm.get('fittingOption')?.value === FITTING_OPTION.HEIGHT && ShouldRenderDoublePage, 
+                    'original-double-offset' : this.generalSettingsForm.get('fittingOption')?.value === FITTING_OPTION.ORIGINAL && ShouldRenderDoublePage, 
+                    'reverse': ShouldRenderReverseDouble}">
                 <img [src]="readerService.getPageUrl(this.chapterId, this.pageNum)" id="image-1"
                 class="{{getFittingOptionClass()}} {{readerMode === ReaderMode.LeftRight || readerMode === ReaderMode.UpDown ? '' : 'd-none'}} {{showClickOverlay ? 'blur' : ''}}">
 

UI/Web/src/app/manga-reader/manga-reader.component.ts

@@ -655,6 +655,11 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     }
     val =  formControl?.value;
 
+    if (this.isCoverImage() && this.layoutMode == LayoutMode.Single && val !== FITTING_OPTION.WIDTH && this.shouldRenderAsFitSplit()) {
+      // Rewriting to fit to width for this cover image
+      return FITTING_OPTION.WIDTH;
+    }
+
 
     if (this.isCoverImage() && this.layoutMode !== LayoutMode.Single) {
       return val + ' cover double';

UI/Web/src/app/reading-list/reading-lists/reading-lists.component.html

@@ -3,6 +3,7 @@
         <app-card-actionables [actions]="actions"></app-card-actionables>
         Reading Lists
     </h1>
+    <h6 subtitle>{{pagination?.totalItems}} Items</h6>
 </app-side-nav-companion-bar>
 
 <app-card-detail-layout

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" *ngIf="chapter.isSpecial" [entity]="chapter" [title]="chapter.title || chapter.range" (click)="openChapter(chapter)"
+                        <app-card-item class="col-auto p-2" *ngIf="chapter.isSpecial" [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" *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]="formatVolumeTitle(volume)" (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" *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]="formatChapterTitle(chapter)" (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" [entity]="volume" [title]="formatVolumeTitle(volume)" (click)="openVolume(volume)"
+                                  <app-card-item class="col-auto p-2" [entity]="volume" [title]="formatVolumeTitle(volume)" (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" *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]="formatChapterTitle(chapter)" (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>

UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.ts

@@ -57,6 +57,10 @@ export class SideNavItemComponent implements OnInit, OnDestroy {
       return;
     }
 
+    if (!page.endsWith('/')) {
+      page = page + '/';
+    }
+
     if (this.comparisonMethod === 'equals' && page === this.link) {
       this.highlighted = true;
       return;

UI/Web/src/app/sidenav/side-nav/side-nav.component.html

@@ -8,10 +8,10 @@
         </app-side-nav-item>
 
         <div class="mt-3">
-            <app-side-nav-item icon="fa-home" title="Home" link="/library"></app-side-nav-item>
+            <app-side-nav-item icon="fa-home" title="Home" link="/library/"></app-side-nav-item>
-            <app-side-nav-item icon="fa-list" title="Collections" link="/collections"></app-side-nav-item>
+            <app-side-nav-item icon="fa-list" title="Collections" link="/collections/"></app-side-nav-item>
-            <app-side-nav-item icon="fa-list-ol" title="Reading Lists" link="/lists"></app-side-nav-item>
+            <app-side-nav-item icon="fa-list-ol" title="Reading Lists" link="/lists/"></app-side-nav-item>
-            <app-side-nav-item icon="fa-regular fa-rectangle-list" title="All Series" link="/all-series"></app-side-nav-item>
+            <app-side-nav-item icon="fa-regular fa-rectangle-list" title="All Series" link="/all-series/"></app-side-nav-item>
             <div class="mb-2 mt-3 ms-2 me-2" *ngIf="libraries.length > 10">
                 <label for="filter" class="form-label visually-hidden">Filter</label>
                 <div class="input-group">
@@ -19,7 +19,7 @@
                     <button class="btn btn-outline-secondary" type="button" id="reset-input" (click)="filterQuery = '';">Clear</button>
                 </div>
             </div>
-            <app-side-nav-item *ngFor="let library of libraries | filter: filterLibrary" [link]="'/library/' + library.id"
+            <app-side-nav-item *ngFor="let library of libraries | filter: filterLibrary" [link]="'/library/' + library.id + '/'"
             [icon]="utilityService.getLibraryTypeIcon(library.type)" [title]="library.name" [comparisonMethod]="'startsWith'">
                 <ng-container actions>
                     <app-card-actionables [actions]="actions" [labelBy]="library.name" iconClass="fa-ellipsis-v" (actionHandler)="performAction($event, library)"></app-card-actionables>

UI/Web/src/styles.scss

@@ -64,12 +64,7 @@ label, select, .clickable {
   cursor: default;
 }
 
-html, body { height: 100%; color-scheme: var(--color-scheme); }
+
-body {
-  margin: 0;
-  font-family: var(--body-font-family);
-  color: var(--body-text-color);
-}
 
 // Needed for fullscreen
 app-root {

UI/Web/src/theme/components/_carousel.scss

@@ -1,3 +1,3 @@
 .swiper-slide {
-    margin: 0 5px;
+    margin: 0 0.25rem;
 }

UI/Web/src/theme/utilities/_global.scss

@@ -1,5 +1,17 @@
 // Global styles for the site. Keep this as small as possible
 
+html, body { height: 100%; overflow: hidden; }
+body {
+  margin: 0;
+  font-family: var(--body-font-family);
+  color: var(--body-text-color);
+  color-scheme: var(--color-scheme);
+  max-height: 100%;
+  overflow-y: auto;
+  margin-top: 56px;
+}
+
+
 hr {
     background-color: var(--hr-color);
 }