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

UX Overhaul Part 2 (#3112)

Browse source 
Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joe Milazzo 2024-08-16 19:37:12 -05:00 • committed by GitHub
parent 0247bc5012
commit 3d8aa2ad24
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
192 changed files with 14808 additions and 1874 deletions
Download patch file Download diff file Expand all files Collapse all files

76
UI/Web/src/app/cards/volume-card/volume-card.component.html Normal file
View file

@ -0,0 +1,76 @@
<ng-container *transloco="let t; read: 'card-item'">
<div class="card-item-container card {{selected ? 'selected-highlight' : ''}}" >
<div class="overlay position-relative" (click)="handleClick($event)">
@if (volume.pages > 0 || suppressArchiveWarning) {
<app-image height="230px" width="158px" [styles]="{'border-radius': '.25rem .25rem 0 0'}" [imageUrl]="imageService.getVolumeCoverImage(volume.id)"></app-image>
} @else if (volume.pages === 0 && !suppressArchiveWarning) {
<app-image height="230px" width="158px" [styles]="{'border-radius': '.25rem .25rem 0 0'}" [imageUrl]="imageService.errorImage"></app-image>
}
<div class="progress-banner">
@if (volume.pagesRead > 0 && volume.pagesRead < volume.pages && volume.pages > 0 && volume.pagesRead !== volume.pages) {
<p ngbTooltip="{{((volume.pagesRead / volume.pages) * 100) | number:'1.0-1'}}% Read">
<ngb-progressbar type="primary" height="5px" [value]="volume.pagesRead" [max]="volume.pages"></ngb-progressbar>
</p>
}
<span class="download">
<app-download-indicator [download$]="download$"></app-download-indicator>
</span>
</div>
@if(volume.pages === 0 && !suppressArchiveWarning) {
<div class="error-banner">
{{t('cannot-read')}}
</div>
}
@if (volume.pagesRead === 0 && volume.pages > 0) {
<div class="badge-container">
<div class="not-read-badge"></div>
</div>
}
@if (allowSelection) {
<div class="bulk-mode {{bulkSelectionService.hasSelections() ? 'always-show' : ''}}" (click)="handleSelection($event)">
<input type="checkbox" class="form-check-input" attr.aria-labelledby="{{volume.id}}" [ngModel]="selected" [ngModelOptions]="{standalone: true}">
</div>
}
<div class="card-overlay"></div>
<div class="volume overlay-information" (click)="read($event)">
<div class="overlay-information--centered">
<span class="card-title library mx-auto" style="width: auto;">
<!-- Card Image -->
<div>
<i class="fa-solid fa-book" aria-hidden="true"></i>
</div>
</span>
</div>
</div>
</div>
<div class="card-body meta-title">
<div class="card-content d-flex justify-content-center align-items-center text-center" style="width:100%;min-height:58px;">
{{volume.name}}
</div>
</div>
<div class="card-title-container">
<span class="card-title" id="{{volume.id}}" tabindex="0">
<a class="dark-exempt btn-icon" routerLink="/library/{{libraryId}}/series/{{seriesId}}/chapter/{{volume.id}}">
{{volume.name}}
</a>
</span>
@if (actions && actions.length > 0) {
<span class="card-actions float-end">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="volume.name"></app-card-actionables>
</span>
}
</div>
</div>
</ng-container>