AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Misc UI fixes (#1461)

Browse source 
* 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
This commit is contained in:
Robbie Davis 2022-08-23 10:14:37 -04:00 • committed by GitHub
parent ca2137fbfe
commit ff26a45c9b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 69 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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;
}
}

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

@ -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 {

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

@ -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">

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

@ -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;

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

@ -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;
}