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>
2025-05-24 00:52:23 -04:00 · 2022-05-03 10:11:50 -05:00 · 2022-05-03 10:11:50 -05:00 · 7f456770cb
commit 7f456770cb
parent f9299a3e03
16 changed files with 79 additions and 83 deletions
--- a/API/API.csproj
+++ b/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" />
--- a/UI/Web/src/app/_services/action-factory.service.ts
+++ b/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
      },
--- a/UI/Web/src/app/app.component.html
+++ b/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>
--- a/UI/Web/src/app/app.component.ts
+++ b/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();
  }
--- a/UI/Web/src/app/app.module.ts
+++ b/UI/Web/src/app/app.module.ts
@ -15,10 +15,10 @@ import { NavModule } from './nav/nav.module';



+
@NgModule({
  declarations: [
    AppComponent,
-
  ],
  imports: [
    HttpClientModule,
--- a/UI/Web/src/app/book-reader/book-reader/book-reader.component.html
+++ b/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">
--- a/UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.html
+++ b/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">
--- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
+++ b/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>

--- a/UI/Web/src/app/library-detail/library-detail.component.html
+++ b/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>
--- a/UI/Web/src/app/library-detail/library-detail.component.scss
+++ b/UI/Web/src/app/library-detail/library-detail.component.scss
@ -8,4 +8,4 @@
    width: 600px;
    height: 100%;
    overflow-y: auto;
-  }
+}
--- a/UI/Web/src/app/library-detail/library-detail.component.ts
+++ b/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];

--- a/UI/Web/src/app/series-detail/series-detail.component.html
+++ b/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>
--- a/UI/Web/src/app/shared/drawer/drawer.component.html
+++ b/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'"
--- a/UI/Web/src/app/sidenav/side-nav-companion-bar/side-nav-companion-bar.component.html
+++ b/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">
-            <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">
-            <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">
-                    <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 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>
+        <ng-content select="[main]"></ng-content>
+    </div>
+    <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>
--- a/UI/Web/src/app/typeahead/typeahead.component.ts
+++ b/UI/Web/src/app/typeahead/typeahead.component.ts
@ -7,7 +7,7 @@ import { KEY_CODES } from '../shared/_services/utility.service';
 import { SelectionCompareFn, TypeaheadSettings } from './typeahead-settings';

 /**
-   * SelectionModel<T> is used for keeping track of multiple selections. Simple interface with ability to toggle. 
+   * SelectionModel<T> is used for keeping track of multiple selections. Simple interface with ability to toggle.
   * @param selectedState Optional state to set selectedOptions to. If not passed, defaults to false.
   * @param selectedOptions Optional data elements to inform the SelectionModel of. If not passed, as toggle() occur, items are tracked.
   * @param propAccessor Optional string that points to a unique field within the T type. Used for quickly looking up.
@ -39,7 +39,7 @@ export class SelectionModel<T> {
    if (compareFn != undefined || compareFn != null) {
      lookupMethod = compareFn;
    }
-    
+
    const dataItem = this._data.filter(d => lookupMethod(d.value, data));
    if (dataItem.length > 0) {
      if (selectedState != undefined) {
@ -66,9 +66,9 @@ export class SelectionModel<T> {
    if (compareFn != undefined || compareFn != null) {
      lookupMethod = compareFn;
    }
-    
+
    dataItem = this._data.filter(d => lookupMethod(d.value, data));
-    
+
    if (dataItem.length > 0) {
      return dataItem[0].selected;
    }
@ -76,7 +76,7 @@ export class SelectionModel<T> {
  }

  /**
-   * 
+   *
   * @returns If some of the items are selected, but not all
   */
  hasSomeSelected(): boolean {
@ -85,7 +85,7 @@ export class SelectionModel<T> {
  }

  /**
-   * 
+   *
   * @returns All Selected items
   */
  selected(): Array<T> {
@ -93,7 +93,7 @@ export class SelectionModel<T> {
  }

  /**
-   * 
+   *
   * @returns All Non-Selected items
   */
   unselected(): Array<T> {
@ -101,7 +101,7 @@ export class SelectionModel<T> {
  }

  /**
-   * 
+   *
   * @returns Last element added/tracked or undefined if nothing is tracked
   */
  peek(): T | undefined {
@ -115,17 +115,17 @@ export class SelectionModel<T> {
  shallowEqual(object1: T, object2: T) {
    const keys1 = Object.keys(object1);
    const keys2 = Object.keys(object2);
-  
+
    if (keys1.length !== keys2.length) {
      return false;
    }
-  
+
    for (let key of keys1) {
      if ((object1 as any)[key] !== (object2 as any)[key]) {
        return false;
      }
    }
-  
+
    return true;
  }
 }
@ -156,7 +156,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
  @Output() newItemAdded = new EventEmitter<any[] | any>();
  @Output() onUnlock = new EventEmitter<void>();
  @Output() lockedChange = new EventEmitter<boolean>();
-  
+

  @ViewChild('input') inputElem!: ElementRef<HTMLInputElement>;
  @ContentChild('optionItem') optionTemplate!: TemplateRef<any>;
@ -171,7 +171,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
  isLoadingOptions: boolean = false;
  typeaheadControl!: FormControl;
  typeaheadForm!: FormGroup;
-  
+
  private readonly onDestroy = new Subject<void>();

  constructor(private renderer2: Renderer2, @Inject(DOCUMENT) private document: Document) { }
@ -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;
@ -229,7 +228,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {

          return true;
        }),
-        
+
        switchMap(val => {
          this.isLoadingOptions = true;
          let results: Observable<any[]>;
@ -243,14 +242,14 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
          return results;
        }),
        tap((filteredOptions) => {
-          this.isLoadingOptions = false; 
-          this.focusedIndex = 0; 
+          this.isLoadingOptions = false;
+          this.focusedIndex = 0;
          setTimeout(() => {
            this.updateShowAddItem(filteredOptions);
            this.updateHighlight();
          }, 10);
          setTimeout(() => this.updateHighlight(), 20);
-          
+
        }),
        shareReplay(),
        takeUntil(this.onDestroy)
@ -259,7 +258,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {

    if (this.settings.savedData) {
      if (this.settings.multiple) {
-        this.optionSelection = new SelectionModel<any>(true, this.settings.savedData);  
+        this.optionSelection = new SelectionModel<any>(true, this.settings.savedData);
      }
       else {
         const isArray = this.settings.savedData.hasOwnProperty('length');
@ -281,7 +280,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
  }

  @HostListener('window:keydown', ['$event'])
-  handleKeyPress(event: KeyboardEvent) { 
+  handleKeyPress(event: KeyboardEvent) {
    if (!this.hasFocus) { return; }
    if (this.disabled) return;

@ -304,22 +303,13 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
      {
        this.document.querySelectorAll('.list-group-item').forEach((item, index) => {
          if (item.classList.contains('active')) {
-            this.filteredOptions.pipe(take(1)).subscribe((opts: any[]) => {  
+            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;
-              }
+              event.preventDefault();
+              event.stopPropagation();

              (item as HTMLElement).click();
              this.focusedIndex = 0;
-              event.preventDefault();
-              event.stopPropagation();
            });
          }
        });
@ -369,7 +359,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
      } else {
        this.optionSelection.selected().forEach(item => this.optionSelection.toggle(item, false));
      }
-      
+
      this.selectedData.emit(this.optionSelection.selected());
      this.resetField();
    }
@ -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);
@ -400,8 +390,8 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
  }

  /**
-   * 
-   * @param item 
+   *
+   * @param item
   * @returns True if the item is NOT selected already
   */
  filterSelected(item: any) {
@ -432,18 +422,19 @@ 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;
    }

-   
+
    this.openDropdown();
  }


  resetField() {
    if (this.inputElem && this.inputElem.nativeElement) {
-      this.renderer2.setStyle(this.inputElem.nativeElement, 'width', 4, RendererStyleFlags2.Important);  
+      this.renderer2.setStyle(this.inputElem.nativeElement, 'width', 4, RendererStyleFlags2.Important);
    }
    this.typeaheadControl.setValue('');
    this.focusedIndex = 0;
@ -463,11 +454,11 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
  }

  updateShowAddItem(options: any[]) {
-    this.showAddItem = this.settings.addIfNonExisting && this.typeaheadControl.value.trim() 
-          && this.typeaheadControl.value.trim().length >= Math.max(this.settings.minCharacters, 1) 
+    this.showAddItem = this.settings.addIfNonExisting && this.typeaheadControl.value.trim()
+          && this.typeaheadControl.value.trim().length >= Math.max(this.settings.minCharacters, 1)
          && this.typeaheadControl.dirty
          && (typeof this.settings.compareFn == 'function' && this.settings.compareFn(options, this.typeaheadControl.value.trim()).length === 0);
-    
+
    if (this.showAddItem) {
      this.hasFocus = true;
    }
--- a/UI/Web/src/styles.scss
+++ b/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 {