Misc Cleanup (#1242)

* Updated the wording for Read in incognito, as 'in' was redundant

* Added icons to the middle tabs for a mobile compaitible view

* Fixed up the code for side nav to make the display much cleaner

* Added icons to tabs

* Styling polishing

- Making pagination spacing uniform
- Fixing onresize event
- Making cards center justification on mobile only
- fixing vertical alignment for companion bar icons
- Fixing Issue where drawer buttons would sometimes not be visible.
- Fixed vertical alignment issue with filter button

* Fixing orientation change event

* added fixed position to drawer

- fixes styling issues

* added total pages to series modal

* Downgraded ExCSS package to a version that doesn't die on @page query selectors.

* Cleaned up some code and wrote some bug markers in typeahead

* Removed some padding top on companion bar

* Aligned the top margin for card detail layout and series detail

* Use a temp close button on book reader until new code is ready.

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>

API/API.csproj

@@ -39,7 +39,7 @@
   <ItemGroup>
     <PackageReference Include="AutoMapper.Extensions.Microsoft.DependencyInjection" Version="11.0.0" />
     <PackageReference Include="Docnet.Core" Version="2.4.0-alpha.2" />
-    <PackageReference Include="ExCSS" Version="4.1.3" />
+    <PackageReference Include="ExCSS" Version="4.1.0" />
     <PackageReference Include="Flurl" Version="3.0.5" />
     <PackageReference Include="Flurl.Http" Version="3.2.3" />
     <PackageReference Include="Hangfire" Version="1.7.28" />

UI/Web/src/app/_services/action-factory.service.ts

@@ -250,7 +250,7 @@ export class ActionFactoryService {
       },
       {
         action: Action.IncognitoRead,
-        title: 'Read in Incognito',
+        title: 'Read Incognito',
         callback: this.dummyCallback,
         requiresAdmin: false
       },
@@ -277,7 +277,7 @@ export class ActionFactoryService {
       },
       {
         action: Action.IncognitoRead,
-        title: 'Read in Incognito',
+        title: 'Read Incognito',
         callback: this.dummyCallback,
         requiresAdmin: false
       },

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

@@ -3,7 +3,7 @@
     <a id="content"></a>
     <app-side-nav *ngIf="navService.sideNavVisibility$ | async"></app-side-nav>
     <div class="container-fluid">
-        <div style="padding-top: 10px; padding-bottom: 65px;" *ngIf="navService.sideNavVisibility$ | async else noSideNav">
+        <div style="padding: 20px 0;" *ngIf="navService.sideNavVisibility$ | async else noSideNav">
             <div class="companion-bar" [ngClass]="{'companion-bar-content': !(navService?.sideNavCollapsed$ | async)}">
                 <router-outlet></router-outlet>
             </div>

UI/Web/src/app/app.component.ts

@@ -35,12 +35,12 @@ export class AppComponent implements OnInit {
       });
   }
 
-  @HostListener('resize')
-  onResize() {
+  @HostListener('window:resize', ['$event'])
+  onResize(){
     this.setDocHeight();
   }
 
-  @HostListener('orientationchange')
+  @HostListener('window:orientationchange', ['$event'])
   onOrientationChange() {
     this.setDocHeight();
   }

UI/Web/src/app/app.module.ts

@@ -15,10 +15,10 @@ import { NavModule } from './nav/nav.module';
 
 
 
+
 @NgModule({
   declarations: [
     AppComponent,
-
   ],
   imports: [
     HttpClientModule,

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

@@ -5,7 +5,8 @@
         <app-drawer #commentDrawer="drawer" [isOpen]="drawerOpen" [style.--drawer-width]="'300px'" [options]="{topOffset: topOffset}" [style.--drawer-background-color]="drawerBackgroundColor" (drawerClosed)="closeDrawer()">
             <div header>
                 <h2 style="margin-top: 0.5rem">Book Settings
-                    <button type="button" class="btn-close" aria-label="Close" (click)="commentDrawer.close()"></button>
+                    <!-- Temp use times rather than btn-close due to some styling issue -->
+                    <button type="button" class="btn btn-icon" style="font-size: 2rem" aria-label="Close" (click)="commentDrawer.close()">&times;</button>
                 </h2>
             </div>
             <div body class="drawer-body">

UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html

@@ -352,6 +352,8 @@
                         <div class="col-md-6">Max Items: {{metadata.maxCount}}</div>
                         <div class="col-md-6">Total Items: {{metadata.totalCount}}</div>
                         <div class="col-md-6">Publication Status: {{metadata.publicationStatus | publicationStatus}}</div>
+                        <div class="col-md-6">Total Pages: {{series.pages}}</div>
+
                     </div>
                     <h4>Volumes</h4>
                     <div class="spinner-border text-secondary" role="status" *ngIf="isLoadingVolumes">

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

@@ -35,8 +35,8 @@
 <ng-container [ngTemplateOutlet]="paginationTemplate" [ngTemplateOutletContext]="{ id: 'bottom' }"></ng-container>
 
 <ng-template #cardTemplate>
-<div class="row g-0 mt-2 mb-2">
-    <div class="col-auto ps-1 pe-1 mt-2 mb-2" *ngFor="let item of items; trackBy:trackByIdentity; index as i">
+<div class="row justify-content-evenly justify-content-sm-start g-0 mb-3">
+    <div class="col-auto ps-1 pe-1 mt-1 mb-1" *ngFor="let item of items; trackBy:trackByIdentity; index as i">
         <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
     </div>
 

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

@@ -7,7 +7,12 @@
     <div main>
         <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav nav-pills" style="flex-wrap: nowrap;">
             <li *ngFor="let tab of tabs" [ngbNavItem]="tab">
-              <a ngbNavLink>{{tab.title | sentenceCase}}</a>
+              <a ngbNavLink>
+                  <span class="d-none d-sm-flex align-items-center"><i class="fa {{tab.icon}} me-1" style="padding-right: 5px;" aria-hidden="true"></i> {{tab.title | sentenceCase}}</span>
+                  <span class="d-flex d-sm-none">
+                      <i class="fa {{tab.icon}}" aria-hidden="true"></i>
+                  </span>
+              </a>
               <ng-template ngbNavContent>
                 <ng-container *ngIf="tab.title === 'Recommended'">
                   <app-library-recommended [libraryId]="libraryId"></app-library-recommended>

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

@@ -8,4 +8,4 @@
     width: 600px;
     height: 100%;
     overflow-y: auto;
-  }
+}

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

@@ -39,9 +39,9 @@ export class LibraryDetailComponent implements OnInit, OnDestroy {
   filterActive: boolean = false;
   filterActiveCheck!: SeriesFilter;
 
-  tabs: Array<{title: string, fragment: string}> = [
-    {title: 'Library', fragment: ''},
-    {title: 'Recommended', fragment: 'recomended'},
+  tabs: Array<{title: string, fragment: string, icon: string}> = [
+    {title: 'Library', fragment: '', icon: 'fa-landmark'},
+    {title: 'Recommended', fragment: 'recomended', icon: 'fa-award'},
   ];
   active = this.tabs[0];
 

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

@@ -94,7 +94,7 @@
                         [isLoading]="isLoading"
                         [items]="volumes">
                         <ng-template #cardItem let-item let-position="idx">
-                            <app-card-item class="col-auto p-2" [entity]="item" [title]="item.name" (click)="openVolume(item)"
+                            <app-card-item class="col-auto" [entity]="item" [title]="item.name" (click)="openVolume(item)"
                                   [imageUrl]="imageService.getVolumeCoverImage(item.id) + '&offset=' + coverImageOffset"
                                   [read]="item.pagesRead" [total]="item.pages" [actions]="volumeActions" 
                                   (selection)="bulkSelectionService.handleCardSelection('volume', position, volumes.length, $event)" 
@@ -111,7 +111,7 @@
                         [isLoading]="isLoading"
                         [items]="chapters">
                         <ng-template #cardItem let-item let-position="idx">
-                            <app-card-item class="col-auto p-2" *ngIf="!item.isSpecial" [entity]="item" [title]="item.title" (click)="openChapter(item)"
+                            <app-card-item class="col-auto" *ngIf="!item.isSpecial" [entity]="item" [title]="item.title" (click)="openChapter(item)"
                             [imageUrl]="imageService.getChapterCoverImage(item.id) + '&offset=' + coverImageOffset"
                             [read]="item.pagesRead" [total]="item.pages" [actions]="chapterActions" 
                             (selection)="bulkSelectionService.handleCardSelection('chapter', position, chapters.length, $event)"
@@ -127,7 +127,7 @@
                     [isLoading]="isLoading"
                     [items]="specials">
                     <ng-template #cardItem let-item let-position="idx">
-                        <app-card-item class="col-auto p-2" [entity]="item" [title]="item.title || item.range" (click)="openChapter(item)"
+                        <app-card-item class="col-auto" [entity]="item" [title]="item.title || item.range" (click)="openChapter(item)"
                         [imageUrl]="imageService.getChapterCoverImage(item.id)"
                         [read]="item.pagesRead" [total]="item.pages" [actions]="chapterActions"
                         (selection)="bulkSelectionService.handleCardSelection('special', position, chapters.length, $event)"
@@ -141,7 +141,7 @@
                 <ng-template ngbNavContent>
                     <div class="row g-0">
                         <ng-container *ngFor="let item of relations; let idx = index; trackBy: trackByRelatedSeriesIdentiy">
-                        <app-series-card class="col-auto p-2" [data]="item.series" [libraryId]="item.series.libraryId" [relation]="item.relation"></app-series-card>
+                        <app-series-card class="col-auto" [data]="item.series" [libraryId]="item.series.libraryId" [relation]="item.relation"></app-series-card>
                         </ng-container>
                     </div>
                 </ng-template>

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

@@ -1,6 +1,6 @@
 <div
   class="drawer-container"
-  [ngStyle]="{'top': options.topOffset + 'px', 'padding-bottom': options.topOffset + 'px'}"
+  [ngStyle]="{'position': 'fixed','top': options.topOffset + 'px','height': 'calc(100% - ' + options.topOffset + 'px)'}"
   [class.is-open]="isOpen"
   [class.position-right]="position === 'right'"
   [class.position-left]="position === 'left'"

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

@@ -1,21 +1,16 @@
-<div class="mt-0">
-    <div class="row g-0">
-        <div class="col mr-auto">
+<div class="mt-0 d-flex justify-content-between align-items-center">
+    <div>
         <ng-content select="[title]"></ng-content>
         <ng-content select="[subtitle]"></ng-content>
     </div>
-        <div class="col mr-auto d-none d-sm-flex hide-if-empty">
+    <div>
         <ng-content select="[main]"></ng-content>
     </div>
-        <div class="col" *ngIf="hasFilter">
-            <div class="row justify-content-end">
-                <div class="col-auto align-self-end">
+    <div>
         <button *ngIf="hasFilter" class="btn btn-{{filterActive ? 'primary' : 'secondary'}} btn-small" (click)="toggleFilter()" [attr.aria-expanded]="filterOpen" placement="left" ngbTooltip="{{filterOpen ? 'Open' : 'Close'}} Filtering and Sorting" attr.aria-label="{{filterOpen ? 'Open' : 'Close'}} Filtering and Sorting">
             <i class="fa fa-filter" aria-hidden="true"></i>
             <span class="visually-hidden">Sort / Filter</span>
         </button>
     </div>
-            </div>
-        </div>
-    </div>
+
 </div>

UI/Web/src/app/typeahead/typeahead.component.ts

@@ -206,7 +206,6 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
       'typeahead': this.typeaheadControl
     });
 
-
     this.filteredOptions = this.typeaheadForm.get('typeahead')!.valueChanges
       .pipe(
         // Adjust input box to grow
@@ -218,7 +217,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
         }),
         map(val => val.trim()),
         auditTime(this.settings.debounce),
-        distinctUntilChanged(),
+        distinctUntilChanged(), // ?!: BUG Doesn't trigger the search to run when filtered array changes
         filter(val => {
           // If minimum filter characters not met, do not filter
           if (this.settings.minCharacters === 0) return true;
@@ -306,20 +305,11 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
           if (item.classList.contains('active')) {
             this.filteredOptions.pipe(take(1)).subscribe((opts: any[]) => {
               // This isn't giving back the filtered array, but everything
-              
-              if (this.settings.addIfNonExisting && item.classList.contains('add-item')) {
-                this.addNewItem(this.typeaheadControl.value);
-                this.resetField();
-                this.focusedIndex = 0;
               event.preventDefault();
               event.stopPropagation();
-                return;
-              }
 
               (item as HTMLElement).click();
               this.focusedIndex = 0;
-              event.preventDefault();
-              event.stopPropagation();
             });
           }
         });
@@ -388,7 +378,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
   }
 
   addNewItem(title: string) {
-    if (this.settings.addTransformFn == undefined) {
+    if (this.settings.addTransformFn == undefined || !this.settings.addIfNonExisting) {
       return;
     }
     const newItem = this.settings.addTransformFn(title);
@@ -432,6 +422,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
     if (this.inputElem) {
       // hack: To prevent multiple typeaheads from being open at once, click document then trigger the focus
       this.document.body.click();
+
       this.inputElem.nativeElement.focus();
       this.hasFocus = true;
     }

UI/Web/src/styles.scss

@@ -63,7 +63,9 @@ label, select, .clickable {
   cursor: default;
 }
 
-
+html, body {
+  height: calc(var(--vh)*100 - 56px);
+}
 
 // Needed for fullscreen
 app-root {