Miscellaneous styling fixes (#1374)

* Fixing up modal and cover selector

* adding code for card image

* fixing placeholder border

* Fixing placeholder issue

* Fixing drop down z-index

* Updating reading list

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

@@ -1,4 +1,4 @@
-<div *ngIf="series !== undefined">
+<div class="modal-container" *ngIf="series !== undefined">
     <div class="modal-header">
         <h4 class="modal-title">
             {{this.series.name}} Details</h4>

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

@@ -1,5 +1,5 @@
 .scrollable-modal {
-    max-height: 90vh; // 600px
+    max-height: calc(var(--vh) * 100 - 198px); // 600px
     overflow: auto;
 }
 
@@ -8,4 +8,4 @@
         background-color: var(--primary-color);
         color: white;
     }
-}
+}

UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.ts

@@ -109,6 +109,7 @@ export class CardDetailDrawerComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    this.imageUrls = this.chapters.map(c => this.imageService.getChapterCoverImage(c.id));
     this.isChapter = this.utilityService.isChapter(this.data);
     this.chapter = this.utilityService.isChapter(this.data) ? (this.data as Chapter) : (this.data as Volume).chapters[0];
 

UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.scss

@@ -8,7 +8,6 @@ $image-width: 160px;
 }
 
 .image-card {
-    margin: 10px;
     cursor: pointer;
 }
 
@@ -18,6 +17,13 @@ $image-width: 160px;
     outline-offset: -1px;
 }
 
+.chooser {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 158px);
+    grid-gap: 0.5rem;
+    justify-content: space-around;
+}
+
 ngx-file-drop ::ng-deep > div {
     // styling for the outer drop box
     width: 100%;

UI/Web/src/app/reading-list/draggable-ordered-list/draggable-ordered-list.component.html

@@ -1,11 +1,11 @@
 <div cdkDropList class="{{items.length > 0 ? 'example-list list-group-flush' : ''}}" (cdkDropListDropped)="drop($event)">   
     <div class="example-box" *ngFor="let item of items; index as i" cdkDrag [cdkDragData]="item" cdkDragBoundary=".example-list">
-        <div class="d-flex">
+        <div class="d-flex list-container">
             <div class="me-3 align-middle">
                 <i class="fa fa-grip-vertical drag-handle" aria-hidden="true" cdkDragHandle></i>
             </div>
     
-            <ng-container  [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
+            <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
     
             <div class="align-middle" style="padding-top: 40px">
                 <label for="reorder-{{i}}" class="form-label visually-hidden">Reorder</label>

UI/Web/src/app/reading-list/draggable-ordered-list/draggable-ordered-list.component.scss

@@ -5,51 +5,57 @@
     display: block;
     border-radius: 4px;
     overflow: hidden;
-  }
+}
   
-  .example-box {
+.example-box {
-    padding: 20px 10px;
+  margin: 5px 0;
-    border-bottom: solid 1px #ccc;
+  //border-bottom: solid 1px #ccc;
-    display: flex;
+  display: flex;
-    flex-direction: row;
+  flex-direction: row;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    font-size: 14px;
+  font-size: 14px;
 
-    .drag-handle {
+  .drag-handle {
-        cursor: move;
+    cursor: move;
-        font-size: 24px;
+    font-size: 24px;
-        margin-top: 215%;
+    margin-top: 215%;
-    }
   }
+}
   
-  .cdk-drag-preview {
+.cdk-drag-preview {
-    box-sizing: border-box;
+  box-sizing: border-box;
-    border-radius: 4px;
+  border-radius: 4px;
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-                0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-                0 3px 14px 2px rgba(0, 0, 0, 0.12);
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  }
+}
   
-  .cdk-drag-placeholder {
+.cdk-drag-placeholder {
-    opacity: 0;
+  opacity: 0;
-  }
+}
   
-  .cdk-drag-animating {
+.cdk-drag-animating {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-  }
+}
   
-  .example-box:last-child {
+.example-box:last-child {
-    border: none;
+  border: none;
-  }
+}
   
-  .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-  }
+}
 
+.example-custom-placeholder {
+  background: #ccc;
+  border: dotted 3px #999;
+  min-height: 60px;
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
 
-  .example-custom-placeholder {
+.list-container {
-    background: #ccc;
+  background: var(--card-bg-color);
-    border: dotted 3px #999;
+  padding: 10px;
-    min-height: 60px;
+  border-radius: 5px;
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  width: 100%;
-  }
+}

UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.html

@@ -60,7 +60,7 @@
     <!-- TODO: This needs virtualization -->
     <app-draggable-ordered-list [items]="items" (orderUpdated)="orderUpdated($event)" (itemRemove)="itemRemoved($event)" [accessibilityMode]="accessibilityMode">
         <ng-template #draggableItem let-item let-position="idx">
-          <app-reading-list-item [item]="item" [position]="position" [libraryTypes]="libraryTypes" 
+          <app-reading-list-item class="content-container" [item]="item" [position]="position" [libraryTypes]="libraryTypes" 
             [promoted]="item.promoted" (read)="readChapter($event)"></app-reading-list-item>
         </ng-template>
     </app-draggable-ordered-list>

UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.scss

@@ -0,0 +1,3 @@
+.content-container {
+    width: 100%;
+}

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

@@ -1,3 +1,3 @@
-<img #img class="lazyload" [src]="imageService.placeholderImage" [attr.data-src]="imageUrl" 
+<img #img class="lazyload img-placeholder" src="data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" [attr.data-src]="imageUrl" 
-            (error)="imageService.updateErroredImage($event)" 
+(error)="imageService.updateErroredImage($event)" 
-            aria-hidden="true">
+aria-hidden="true">

UI/Web/src/app/shared/image/image.component.scss

@@ -2,3 +2,7 @@ img {
     width: 100%;
 }
 
+.img-placeholder {
+    background: rgb(44,47,51);
+    background: radial-gradient(circle, rgba(44,47,51,1) 0%, rgba(34,42,24,1) 37%, rgba(2,0,36,1) 100%);
+}

UI/Web/src/theme/components/_dropdown.scss

@@ -16,5 +16,5 @@
 }
 
 .dropdown {
-    //z-index: 1055 !important; // ngb v12 bug: https://github.com/ng-bootstrap/ng-bootstrap/issues/2686
+    z-index: 1055 !important; // ngb v12 bug: https://github.com/ng-bootstrap/ng-bootstrap/issues/2686
 }

UI/Web/src/theme/components/_navbar.scss

@@ -1,7 +1,7 @@
 .navbar {
     background-color: var(--navbar-bg-color);
     color: var(--navbar-text-color);
-    z-index: 1056;
+    z-index: 1055;
 }