Fixed the excessivey scrollbars in the app [comixed#823]

mcpierce · Oct 9, 2021 · a1a38e8 · a1a38e8
1 parent a6470eb
commit a1a38e8
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 83 deletions.
diff --git a/comixed-webui/src/app/app.component.html b/comixed-webui/src/app/app.component.html
@@ -1,35 +1,34 @@
-<div id="cx-navigation-bar" class="cx-width-100 cx-height-100">
-  <div *ngIf="busy" class="cx-overlay">
-    <div class="cx-centered">
-      <mat-progress-spinner
-        diameter="100"
-        mode="indeterminate"
-        color="accent"
-      ></mat-progress-spinner>
-    </div>
+<div
+  *ngIf="busy"
+  id="cx-navigation-bar"
+  class="cx-overlay cx-width-100 cx-height-100"
+>
+  <div class="cx-centered">
+    <mat-progress-spinner
+      diameter="100"
+      mode="indeterminate"
+      color="accent"
+    ></mat-progress-spinner>
   </div>
-  <cx-navigation-bar
-    [user]="user"
-    [sidebarOpened]="sidenav.opened"
-    (toggleSidebar)="sidenav.toggle($event)"
-  ></cx-navigation-bar>
-  <div class="cx-width-100 cx-height-100 cx-overflow-y-scroll">
-    <mat-sidenav-container class="cx-width-100 cx-height-100">
-      <mat-sidenav #sidenav mode="side" class="cx-primary-dark-background">
-        <cx-side-navigation
-          class="cx-vertical-scrolling cx-height-100"
-          [user]="user"
-        ></cx-side-navigation>
-      </mat-sidenav>
-      <mat-sidenav-content #sidebar>
-        <div
-          id="cx-main-content-area"
-          class="cx-width-100 cx-height-100 cx-footer-margin"
-        >
-          <router-outlet></router-outlet>
-        </div>
-      </mat-sidenav-content>
-    </mat-sidenav-container>
-  </div>
-  <cx-footer id="cx-footer" class="cx-padding-left-5" [user]="user"></cx-footer>
 </div>
+
+<mat-sidenav-container class="cx-width-100 cx-height-100 cx-navbar-margin">
+  <mat-sidenav #sidenav class="cx-primary-dark-background" mode="over">
+    <cx-side-navigation [user]="user"></cx-side-navigation>
+  </mat-sidenav>
+  <mat-sidenav-content #sidebar class="cx-width-100 cx-overflow-y-scroll">
+    <cx-navigation-bar
+      [user]="user"
+      [sidebarOpened]="sidenav.opened"
+      (toggleSidebar)="sidenav.toggle($event)"
+    ></cx-navigation-bar>
+
+    <router-outlet></router-outlet>
+
+    <cx-footer
+      id="cx-footer"
+      class="cx-padding-left-5"
+      [user]="user"
+    ></cx-footer>
+  </mat-sidenav-content>
+</mat-sidenav-container>
diff --git a/comixed-webui/src/app/app.component.scss b/comixed-webui/src/app/app.component.scss
@@ -7,9 +7,10 @@
   z-index: 100;
 }
 
-#cx-main-content-area {
-  height: 100%;
-  overflow-y: scroll;
+mat-sidenav {
+  width: 33%;
+  min-width: 225px;
+  max-width: 275px;
 }
 
 #cx-footer {

diff --git a/comixed-webui/src/app/comic-book/components/comic-scraping/comic-scraping.component.html b/comixed-webui/src/app/comic-book/components/comic-scraping/comic-scraping.component.html
@@ -2,7 +2,7 @@
   <div class="cx-grow-1">
     <mat-toolbar class="cx-primary-light-background">
       <mat-paginator
-        class="cx-primary-light-background"
+        class="cx-primary-light-background cx-height-100"
         *ngIf="!!comic"
         [pageSizeOptions]="[5, 10, 20]"
         showFirstLastButtons

diff --git a/...ui/src/app/comic-pages/pages/blocked-hash-list-page/blocked-hash-list-page.component.html b/...ui/src/app/comic-pages/pages/blocked-hash-list-page/blocked-hash-list-page.component.html
@@ -1,6 +1,8 @@
 <mat-toolbar class="cx-primary-light-background">
   <mat-toolbar-row>
-    <mat-paginator class="cx-primary-light-background"></mat-paginator>
+    <mat-paginator
+      class="cx-primary-light-background cx-height-100"
+    ></mat-paginator>
     <div class="cx-spacer"></div>
     <button
       id="set-deleted-button"

diff --git a/comixed-webui/src/app/library/components/comic-covers/comic-covers.component.html b/comixed-webui/src/app/library/components/comic-covers/comic-covers.component.html
@@ -1,40 +1,38 @@
-<div class="cx-width-100 cx-top-0">
-  <cx-library-toolbar
-    [comics]="comics"
-    [showActions]="showActions"
-    [isAdmin]="isAdmin"
-    [showConsolidate]="showConsolidate"
-    [selected]="selected"
-    [pagination]="pagination"
-    [archiveType]="archiveType"
-    (archiveTypeChanged)="onArchiveTypeChanged($event)"
-  ></cx-library-toolbar>
-  <div id="cx-all-comics" class="cx-comic-detail-card-container">
-    <div
-      *ngFor="let comic of comics"
-      fxFlex="20%"
-      fxFlex.xs="100%"
-      fxFlex.sm="25%"
-    >
-      <cx-comic-detail-card
-        class="mat-elevation-z4"
-        [comic]="comic"
-        [coverTooltip]="comic.title"
-        [title]="comic | comicTitle"
-        [subtitle]="comic.title"
-        [imageUrl]="comic | comicCoverUrl"
-        [detailLink]="['/comics', comic.id]"
-        [blurred]="!comic.fileDetails"
-        [busy]="!comic.fileDetails"
-        [selected]="isSelected(comic)"
-        [comicChanged]="isChanged(comic)"
-        [isAdmin]="isAdmin"
-        [showActions]="showActions"
-        (selectionChanged)="onSelectionChanged($event.comic, $event.selected)"
-        (showContextMenu)="onShowContextMenu($event.comic, $event.x, $event.y)"
-        (updateComicInfo)="onUpdateMetadata($event.comic)"
-      ></cx-comic-detail-card>
-    </div>
+<cx-library-toolbar
+  [comics]="comics"
+  [showActions]="showActions"
+  [isAdmin]="isAdmin"
+  [showConsolidate]="showConsolidate"
+  [selected]="selected"
+  [pagination]="pagination"
+  [archiveType]="archiveType"
+  (archiveTypeChanged)="onArchiveTypeChanged($event)"
+></cx-library-toolbar>
+<div id="cx-all-comics" class="cx-comic-detail-card-container">
+  <div
+    *ngFor="let comic of comics"
+    fxFlex="20%"
+    fxFlex.xs="100%"
+    fxFlex.sm="25%"
+  >
+    <cx-comic-detail-card
+      class="mat-elevation-z4"
+      [comic]="comic"
+      [coverTooltip]="comic.title"
+      [title]="comic | comicTitle"
+      [subtitle]="comic.title"
+      [imageUrl]="comic | comicCoverUrl"
+      [detailLink]="['/comics', comic.id]"
+      [blurred]="!comic.fileDetails"
+      [busy]="!comic.fileDetails"
+      [selected]="isSelected(comic)"
+      [comicChanged]="isChanged(comic)"
+      [isAdmin]="isAdmin"
+      [showActions]="showActions"
+      (selectionChanged)="onSelectionChanged($event.comic, $event.selected)"
+      (showContextMenu)="onShowContextMenu($event.comic, $event.x, $event.y)"
+      (updateComicInfo)="onUpdateMetadata($event.comic)"
+    ></cx-comic-detail-card>
   </div>
 </div>
 

diff --git a/comixed-webui/src/app/library/components/library-toolbar/library-toolbar.component.html b/comixed-webui/src/app/library/components/library-toolbar/library-toolbar.component.html
@@ -1,6 +1,6 @@
 <mat-toolbar class="cx-primary-light-background">
   <mat-paginator
-    class="cx-primary-light-background"
+    class="cx-primary-light-background cx-height-100"
     [pageSizeOptions]="paginationOptions"
     [showFirstLastButtons]="true"
     [pageSize]="pagination"

diff --git a/comixed-webui/src/app/library/pages/library-page/library-page.component.html b/comixed-webui/src/app/library/pages/library-page/library-page.component.html
@@ -1,4 +1,5 @@
 <cx-comic-covers
+  class="cx-overflow-y-scroll"
   [comics]="
     comics
       | archiveType: archiveTypeFilter

diff --git a/comixed-webui/src/app/lists/pages/reading-lists-page/reading-lists-page.component.html b/comixed-webui/src/app/lists/pages/reading-lists-page/reading-lists-page.component.html
@@ -1,6 +1,8 @@
 <mat-toolbar class="cx-primary-light-background">
   <mat-toolbar-row>
-    <mat-paginator class="cx-primary-light-background"></mat-paginator>
+    <mat-paginator
+      class="cx-primary-light-background cx-height-100"
+    ></mat-paginator>
     <div class="cx-spacer"></div>
     <button
       id="add-reading-list-button"

diff --git a/comixed-webui/src/styles.scss b/comixed-webui/src/styles.scss
@@ -71,7 +71,7 @@ $cx-selected-comic-color: #ffffff;
 }
 
 .cx-overflow-y-scroll {
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 // positioning
@@ -152,7 +152,7 @@ $cx-selected-comic-color: #ffffff;
   margin-right: 50px !important;
 }
 
-.cx-footer-margin {
+.cx-navbar-margin {
   margin-bottom: 75px !important;
 }
 
@@ -253,10 +253,6 @@ th {
   flex-direction: row;
 }
 
-.cx-vertical-scrolling {
-  overflow-y: scroll;
-}
-
 // flexible containers
 
 .cx-horizontal-container {