Added scrolling to the comic covers view [#667]

comixed · Jun 29, 2021 · b7fa953 · b7fa953
1 parent 5fb3679
commit b7fa953
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/comixed-web/src/app/library/components/comic-covers/comic-covers.component.html b/comixed-web/src/app/library/components/comic-covers/comic-covers.component.html
@@ -1,10 +1,13 @@
-<div class="cx-width-100 cx-height-100">
+<div class="cx-width-100 cx-height-100 cx-top-0">
   <cx-library-toolbar
     [comics]="comics"
     [selected]="selected"
     [pagination]="pagination"
   ></cx-library-toolbar>
-  <div id="cx-all-comics" class="cx-comic-detail-card-container">
+  <div
+    id="cx-all-comics"
+    class="cx-comic-detail-card-container cx-height-100 cx-vertical-scrolling"
+  >
     <cx-comic-detail-card
       *ngFor="let comic of comics"
       [comic]="comic"

diff --git a/comixed-web/src/styles.scss b/comixed-web/src/styles.scss
@@ -67,6 +67,10 @@ $cx-selected-comic-color: #ffffff;
   height: 100%;
 }
 
+.cx-top-0 {
+  top: 0px;
+}
+
 .cx-overflow-y-scroll {
   overflow-y: scroll;
 }
@@ -227,6 +231,10 @@ $cx-column-large: 325px;
   flex-direction: row;
 }
 
+.cx-vertical-scrolling {
+  overflow-y: scroll;
+}
+
 // flexible containers
 
 .cx-horizontal-container {