Misc UI fixes (#1461)

* Misc fixes

- Fixed modal being stretched when not needed.
- Fixed Logo vertical align
- Fixed drawer content scroll, and from it being squished due to overridden by bootstrap.

* series detail cover image stretch fix

- Fixes: Fixes series detail cover image being stretched on larger resolutions

* fixing empty lists scrollbar

* Fixing want to read error

* fixing unnecessary scrollbar

* Fixing recently updated tooltip

UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.scss

@@ -9,11 +9,11 @@
 .collection {
     overflow: auto;
     .modal-body {
-    height: calc(100vh - 235px);
+    max-height: calc(100vh - 235px);
     min-height: 150px;
         .list-group {
             overflow: auto;
-            height: calc(100vh - 355px);
+            max-height: calc(100vh - 355px);
             min-height: 32px;
         }
     }

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

@@ -12,7 +12,7 @@
 
 .tab-content {
   overflow: auto;
-  height: calc(40vh - 63px); // drawer height - offcanvas heading height
+  height: calc(40vh - (46px + 1rem)); // drawer height - offcanvas heading height
 }
 
 .h6 {

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html

@@ -13,13 +13,13 @@
     </div>
 </div>
 <app-metadata-filter [filterSettings]="filterSettings" [filterOpen]="filterOpen" (applyFilter)="applyMetadataFilter($event)"></app-metadata-filter>
-<div class="viewport-container">
+<div class="viewport-container" [ngClass]="{'empty': items.length === 0}">
     <div class="content-container">
         <div class="card-container mt-2 mb-2">
             <p *ngIf="items.length === 0 && !isLoading">
                 <ng-container [ngTemplateOutlet]="noDataTemplate"></ng-container>
             </p>
-            <virtual-scroller #scroll [items]="items" [bufferAmount]="1" [parentScroll]="parentScroll">
+            <virtual-scroller [ngClass]="{'empty': items.length === 0}" #scroll [items]="items" [bufferAmount]="1" [parentScroll]="parentScroll">
                 <div class="grid row g-0" #container>
                     <div class="card col-auto mt-2 mb-2" *ngFor="let item of scroll.viewPortItems; trackBy:trackByIdentity; index as i" id="jumpbar-index--{{i}}" [attr.jumpbar-index]="i">
                         <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: scroll.viewPortInfo.startIndexWithBuffer + i }"></ng-container>
@@ -29,7 +29,7 @@
         </div>
     </div>
 
-    <ng-container *ngIf="jumpBarKeysToRender.length >= 4 && scroll.viewPortInfo.maxScrollPosition > 0" [ngTemplateOutlet]="jumpBar" [ngTemplateOutletContext]="{ id: 'jumpbar' }"></ng-container>
+    <ng-container *ngIf="jumpBarKeysToRender.length >= 4 && items.length !== 0 && scroll.viewPortInfo.maxScrollPosition > 0" [ngTemplateOutlet]="jumpBar" [ngTemplateOutletContext]="{ id: 'jumpbar' }"></ng-container>
 </div>
 <ng-template #cardTemplate>
     <virtual-scroller #scroll [items]="items" [bufferAmount]="1">

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss

@@ -2,8 +2,12 @@
     display: flex;
     flex-direction: row;
     width: 100%;
-    height: calc((var(--vh) *100) - 162px);
+    height: calc((var(--vh) *100) - 173px);
     margin-bottom: 10px;
+
+    &.empty {
+        height: auto;
+    }
 }
 
 .content-container {
@@ -85,12 +89,16 @@
 .virtual-scroller, virtual-scroller {
   width: 100%;
   //height: calc(100vh - 160px); // 64 is a random number, 523 for me. 
-  height: calc(var(--vh) * 100 - 160px);
+  height: calc(var(--vh) * 100 - 173px);
   //height: calc(100vh - 160px);
   //background-color: red;
   //max-height: calc(var(--vh)*100 - 170px);
 }
 
+virtual-scroller.empty {
+    display: none;
+  }
+
 h2 {
     display: inline-block;
     word-break: break-all;

UI/Web/src/app/cards/card-item/card-item.component.ts

@@ -151,8 +151,13 @@ export class CardItemComponent implements OnInit, OnDestroy {
 
     if (this.utilityService.isChapter(this.entity)) {
       const chapterTitle = this.utilityService.asChapter(this.entity).titleName;
-      if (chapterTitle === '' || chapterTitle === null) {
+      if (chapterTitle === '' || chapterTitle === null || chapterTitle === undefined) {
-        this.tooltipTitle = (this.utilityService.asChapter(this.entity).volumeTitle + ' ' + this.title).trim();
+        const volumeTitle = this.utilityService.asChapter(this.entity).volumeTitle
+        if (volumeTitle === '' || volumeTitle === null || volumeTitle === undefined) {
+          this.tooltipTitle = (this.title).trim();
+        } else {
+          this.tooltipTitle = (this.utilityService.asChapter(this.entity).volumeTitle + ' ' + this.title).trim();
+        }
       } else {
         this.tooltipTitle = chapterTitle;
       }

UI/Web/src/app/collections/all-collections/all-collections.component.html

@@ -13,4 +13,8 @@
         <ng-template #cardItem let-item let-position="idx">
             <app-card-item [title]="item.title" [entity]="item" [actions]="collectionTagActions" [imageUrl]="imageSerivce.getCollectionCoverImage(item.id)" (clicked)="loadCollection(item)"></app-card-item>
         </ng-template>
+
+        <ng-template #noData>
+            There are no collections. Try creating <a href="https://wiki.kavitareader.com/en/guides/get-started-using-your-library/collections" target="_blank">one&nbsp;<i class="fa fa-external-link-alt" aria-hidden="true"></i></a>.
+        </ng-template>
 </app-card-detail-layout>

UI/Web/src/app/nav/nav-header/nav-header.component.html

@@ -179,7 +179,7 @@ NZ0ZV4zm4/L1dfnYNCrjTFq9G03rmj5D+Y4i0OHuL3GFPJytaM54AAAAAElFTkSuQmCC
        id="image71"
        x="34.013355"
        y="59.091763"/></g></svg>
-        <span class="d-none d-md-inline"> Kavita</span>
+        <span class="d-none d-md-inline logo"> Kavita</span>
       </a>
       <ul class="navbar-nav col me-auto">
         

UI/Web/src/app/nav/nav-header/nav-header.component.scss

@@ -55,7 +55,7 @@
 
     .logo {
         max-height: 28px;
-        vertical-align: top;
+        vertical-align: text-top;
     }
 
     .phone-hidden {

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

@@ -12,9 +12,13 @@
     [jumpBarKeys]="jumpbarKeys"
     [filteringDisabled]="true"
     >
-    <ng-template #cardItem let-item let-position="idx">
+    <ng-template #cardItem let-item let-position="idx" >
         <app-card-item [title]="item.title" [entity]="item" [actions]="getActions(item)" 
             [suppressLibraryLink]="true" [imageUrl]="imageService.getReadingListCoverImage(item.id)" 
             (clicked)="handleClick(item)"></app-card-item>
     </ng-template>
+
+    <ng-template #noData>
+        There are no reading lists. Try creating <a href="https://wiki.kavitareader.com/en/guides/get-started-using-your-library#reading-list" target="_blank">one&nbsp;<i class="fa fa-external-link-alt" aria-hidden="true"></i></a>.
+    </ng-template>
 </app-card-detail-layout>

UI/Web/src/app/series-detail/series-detail.component.html

@@ -56,8 +56,8 @@
 
 <div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid pt-2" *ngIf="series !== undefined" #scrollingBlock>
     <div class="row mb-3 info-container">
-        <div class="col-md-2 col-xs-4 col-sm-6 d-none d-sm-block">
+        <div class="image-container col-md-2 col-xs-4 col-sm-6 d-none d-sm-block">
-            <app-image maxWidth="300px" maxHeight="400px" [imageUrl]="seriesImage"></app-image>
+            <app-image height="100%" maxHeight="100%" objectFit="contain" background="none" [imageUrl]="seriesImage"></app-image>
             <!-- NOTE: We can put continue point here as Vol X Ch Y or just Ch Y or Book Z ?-->
         </div>
         <div class="col-md-10 col-xs-8 col-sm-6 mt-2">

UI/Web/src/app/series-detail/series-detail.component.scss

@@ -32,3 +32,7 @@
   word-break: break-all;
   margin-bottom: 0;
 }
+
+.image-container {
+  max-height: 400px;
+}

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

@@ -40,6 +40,14 @@ export class ImageComponent implements OnChanges, OnDestroy {
    * Border Radius of the image. If not defined, will not be applied
    */
    @Input() borderRadius: string = '';
+     /**
+   * Object fit of the image. If not defined, will not be applied
+   */
+   @Input() objectFit: string = '';
+  /**
+   * Background of the image. If not defined, will not be applied
+   */
+   @Input() background: string = '';
    /**
     * If the image component should respond to cover updates
     */
@@ -93,6 +101,14 @@ export class ImageComponent implements OnChanges, OnDestroy {
     if (this.borderRadius != '') {
       this.renderer.setStyle(this.imgElem.nativeElement, 'border-radius', this.borderRadius);
     }
+
+    if (this.objectFit != '') {
+      this.renderer.setStyle(this.imgElem.nativeElement, 'object-fit', this.objectFit);
+    }
+
+    if (this.background != '') {
+      this.renderer.setStyle(this.imgElem.nativeElement, 'background', this.background);
+    }
   }
 
   ngOnDestroy() {

UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.html

@@ -26,9 +26,18 @@
             (selection)="bulkSelectionService.handleCardSelection('series', position, series.length, $event)" [selected]="bulkSelectionService.isCardSelected('series', position)" [allowSelection]="true"
             ></app-series-card>
         </ng-template>
+    
+        <div *ngIf="!filterActive && series.length === 0">
+            <ng-template #noData>
+                There are no items. Try adding a series.
+            </ng-template>
+        </div>
+
+        <div *ngIf="filterActive && series.length === 0">
+            <ng-template #noData>
+                No items match your current filter.
+            </ng-template>
+        </div>
 
-        <ng-template #noData>
-            No Series match your filter or exist in your list.
-        </ng-template>
     </app-card-detail-layout>
 </div>

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

@@ -8,5 +8,5 @@
 }
 
 .offcanvas-bottom {
-    height: 40vh;
+    height: 40vh !important;
 }