From ff26a45c9badc5f4483bd8fb08543f40e834f335 Mon Sep 17 00:00:00 2001 From: Robbie Davis Date: Tue, 23 Aug 2022 10:14:37 -0400 Subject: [PATCH] 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 --- .../bulk-add-to-collection.component.scss | 4 ++-- .../card-detail-drawer.component.scss | 2 +- .../card-detail-layout.component.html | 6 +++--- .../card-detail-layout.component.scss | 12 ++++++++++-- .../app/cards/card-item/card-item.component.ts | 9 +++++++-- .../all-collections.component.html | 4 ++++ .../app/nav/nav-header/nav-header.component.html | 2 +- .../app/nav/nav-header/nav-header.component.scss | 2 +- .../reading-lists/reading-lists.component.html | 6 +++++- .../series-detail/series-detail.component.html | 4 ++-- .../series-detail/series-detail.component.scss | 4 ++++ UI/Web/src/app/shared/image/image.component.ts | 16 ++++++++++++++++ .../want-to-read/want-to-read.component.html | 15 ++++++++++++--- UI/Web/src/theme/components/_offcanvas.scss | 2 +- 14 files changed, 69 insertions(+), 19 deletions(-) diff --git a/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.scss b/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.scss index 1cfe40c07..29342b14b 100644 --- a/UI/Web/src/app/cards/_modals/bulk-add-to-collection/bulk-add-to-collection.component.scss +++ b/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; } } diff --git a/UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.scss b/UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.scss index 8873c06ac..8296d7865 100644 --- a/UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.scss +++ b/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 { diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html index 1eb306484..4839f00e8 100644 --- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html +++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html @@ -13,13 +13,13 @@ -
+

- +
@@ -29,7 +29,7 @@
- +
diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss index 936610164..89727299c 100644 --- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss +++ b/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; diff --git a/UI/Web/src/app/cards/card-item/card-item.component.ts b/UI/Web/src/app/cards/card-item/card-item.component.ts index 585a263fe..a564fa4b4 100644 --- a/UI/Web/src/app/cards/card-item/card-item.component.ts +++ b/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) { - this.tooltipTitle = (this.utilityService.asChapter(this.entity).volumeTitle + ' ' + this.title).trim(); + if (chapterTitle === '' || chapterTitle === null || chapterTitle === undefined) { + 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; } diff --git a/UI/Web/src/app/collections/all-collections/all-collections.component.html b/UI/Web/src/app/collections/all-collections/all-collections.component.html index eb2c29a60..40f5c928e 100644 --- a/UI/Web/src/app/collections/all-collections/all-collections.component.html +++ b/UI/Web/src/app/collections/all-collections/all-collections.component.html @@ -13,4 +13,8 @@ + + + There are no collections. Try creating one . + \ No newline at end of file diff --git a/UI/Web/src/app/nav/nav-header/nav-header.component.html b/UI/Web/src/app/nav/nav-header/nav-header.component.html index c2ba5e7c8..fbc803bc3 100644 --- a/UI/Web/src/app/nav/nav-header/nav-header.component.html +++ b/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"/> - Kavita +
    diff --git a/UI/Web/src/app/nav/nav-header/nav-header.component.scss b/UI/Web/src/app/nav/nav-header/nav-header.component.scss index e2d8bd38c..87c734e98 100644 --- a/UI/Web/src/app/nav/nav-header/nav-header.component.scss +++ b/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 { diff --git a/UI/Web/src/app/reading-list/reading-lists/reading-lists.component.html b/UI/Web/src/app/reading-list/reading-lists/reading-lists.component.html index 3667da261..d559b337d 100644 --- a/UI/Web/src/app/reading-list/reading-lists/reading-lists.component.html +++ b/UI/Web/src/app/reading-list/reading-lists/reading-lists.component.html @@ -12,9 +12,13 @@ [jumpBarKeys]="jumpbarKeys" [filteringDisabled]="true" > - + + + + There are no reading lists. Try creating one . + diff --git a/UI/Web/src/app/series-detail/series-detail.component.html b/UI/Web/src/app/series-detail/series-detail.component.html index 97d7f8d18..2667b761e 100644 --- a/UI/Web/src/app/series-detail/series-detail.component.html +++ b/UI/Web/src/app/series-detail/series-detail.component.html @@ -56,8 +56,8 @@
    -
    - +
    +
    diff --git a/UI/Web/src/app/series-detail/series-detail.component.scss b/UI/Web/src/app/series-detail/series-detail.component.scss index cb19ae6fe..017bf1de5 100644 --- a/UI/Web/src/app/series-detail/series-detail.component.scss +++ b/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; +} diff --git a/UI/Web/src/app/shared/image/image.component.ts b/UI/Web/src/app/shared/image/image.component.ts index ceafe4229..5736bbc10 100644 --- a/UI/Web/src/app/shared/image/image.component.ts +++ b/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() { diff --git a/UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.html b/UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.html index 9a6a95ad4..f6ada219f 100644 --- a/UI/Web/src/app/want-to-read/want-to-read/want-to-read.component.html +++ b/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" > + +
    + + There are no items. Try adding a series. + +
    + +
    + + No items match your current filter. + +
    - - No Series match your filter or exist in your list. -
    \ No newline at end of file diff --git a/UI/Web/src/theme/components/_offcanvas.scss b/UI/Web/src/theme/components/_offcanvas.scss index ef6a2e527..8dac867ff 100644 --- a/UI/Web/src/theme/components/_offcanvas.scss +++ b/UI/Web/src/theme/components/_offcanvas.scss @@ -8,5 +8,5 @@ } .offcanvas-bottom { - height: 40vh; + height: 40vh !important; } \ No newline at end of file