Last batch of bugfixes (#1262)

* Refactored code to show action bar instead of drawer in immersive mode

* Card grid

* adding margin for pagination gap

* Fixed a rare routing case that wouldn't redirect

* Fixed a bug where series detail would show blank filtering

* Fixing image scaling and library card spacing

* Refactored some methods to be static

* Adding card grid to series detail

* Fixed a bug with webtoon going to non-webtoon mode, resulting in black screen.

* Ensure emails are trimmed when trying to invite.

* Don't show More In if there is only 1 item in there on library recommended tab

* Fixed some bugs around locking metadata fields where the correct param wasn't being sent to backend.

* Added some UI error messaging when the email doesn't match the confirm-email (or rather any email in the system).

* Fixed some pages where actions weren't working (library detail) and removed some actionable buttons where they didn't make sense

* Refactored the series detail to use Robbie's new grid system.

* some styling fixes

* Styling fixes

- Removing select border gap
- fixing switches on lite theme
- fixing search result text-light

* better css var naming

* changing search lite text color override

* fixing as per feedback

* Removing boolean from being visible in bookreader

* Fixed some bugs in bulk operations not being visible on light/eink screens. Added --bulk-selection-highlight-text-color and --bulk-selection-text-color.

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

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

@@ -54,7 +54,7 @@
                                     (fullscreen)="toggleFullscreen()"
                                     (layoutModeUpdate)="updateLayoutMode($event)"
                                     (readingDirection)="updateReadingDirection($event)"
-                                    (immersiveMode)="immersiveMode = $event"
+                                    (immersiveMode)="updateImmersiveMode($event)"
                                 ></app-reader-settings>
                             </ng-template>
                           </li>
@@ -96,7 +96,7 @@
     </div>
 
     <ng-template #actionBar>
-        <div class="action-bar row g-0 justify-content-between" *ngIf="!immersiveMode || drawerOpen">
+        <div class="action-bar row g-0 justify-content-between" *ngIf="!immersiveMode || drawerOpen || actionBarVisible">
             <button class="btn btn-outline-secondary btn-icon col-2 col-xs-1" (click)="movePage(readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.BACKWARDS : PAGING_DIRECTION.FORWARD)"
                 [disabled]="readingDirection === ReadingDirection.LeftToRight ? IsPrevDisabled : IsNextDisabled"
                 title="{{readingDirection === ReadingDirection.LeftToRight ? 'Previous' : 'Next'}} Page">

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

@@ -124,6 +124,10 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
    * Belongs to drawer component
    */
   drawerOpen = false;
+  /**
+   * If the action bar is visible
+   */
+  actionBarVisible = true;
   /**
    * Book reader setting that hides the menuing system
    */
@@ -1105,6 +1109,10 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
 
   toggleDrawer() {
     this.drawerOpen = !this.drawerOpen;
+
+    if (this.immersiveMode) {
+      this.actionBarVisible = false;
+    }
   }
 
   scrollTo(partSelector: string) {
@@ -1197,6 +1205,10 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     this.updateImagesWithHeight();
 
     // Calulate if bottom actionbar is needed. On a timeout to get accurate heights
+    if (this.readingHtml == null) {
+      setTimeout(() => this.updateLayoutMode(this.layoutMode), 10);
+      return;
+    }
     setTimeout(() => {this.scrollbarNeeded = this.readingHtml.nativeElement.clientHeight > this.reader.nativeElement.clientHeight;});
   }
 
@@ -1204,6 +1216,13 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
     this.readingDirection = readingDirection;
   }
 
+  updateImmersiveMode(immersiveMode: boolean) {
+    this.immersiveMode = immersiveMode;
+    if (this.immersiveMode && !this.drawerOpen) {
+      this.actionBarVisible = false;
+    }
+  }
+
   // Table of Contents
   cleanIdSelector(id: string) {
     const tokens = id.split('/');
@@ -1299,7 +1318,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
       Math.abs(this.mousePosition.x - event.screenX) <= mouseOffset &&
       Math.abs(this.mousePosition.y - event.screenY) <= mouseOffset
     ) {
-      this.drawerOpen = true;
+      this.actionBarVisible = !this.actionBarVisible;
     }
 
   }

UI/Web/src/app/book-reader/reader-settings/reader-settings.component.ts

@@ -216,6 +216,7 @@ export class ReaderSettingsComponent implements OnInit, OnDestroy {
         this.readingDirection.emit(this.readingDirectionModel);
         this.clickToPaginateChanged.emit(this.user.preferences.bookReaderTapToPaginate); 
         this.layoutModeUpdate.emit(this.user.preferences.bookReaderLayoutMode);
+        this.immersiveMode.emit(this.user.preferences.bookReaderImmersiveMode);
 
         this.resetSettings();
       } else {