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

UX Pass 4 (#3120)

Browse source 
Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joe Milazzo 2024-08-20 19:09:30 -05:00 • committed by GitHub
parent 7ca523adef
commit 38fc8e9110
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
103 changed files with 1643 additions and 1079 deletions
Download patch file Download diff file Expand all files Collapse all files

20
UI/Web/src/app/volume-detail/volume-detail.component.html
View file

@ -7,7 +7,7 @@
<div class="image-container col-5 col-sm-6 col-md-5 col-lg-5 col-xl-2 col-xxl-2 col-xxxl-2 d-none d-sm-block mb-3">
<app-image [styles]="{'object-fit': 'contain', 'background': 'none', 'max-height': '400px'}" [imageUrl]="coverImage"></app-image>
@if (volume.pagesRead < volume.pages && hasReadingProgress) {
@if (volume.pagesRead < volume.pages && volume.pagesRead > 0) {
<div class="progress-banner" ngbTooltip="{{(volume.pagesRead / volume.pages) * 100 | number:'1.0-1'}}%">
<ngb-progressbar type="primary" height="5px" [value]="volume.pagesRead" [max]="volume.pages" [showValue]="true"></ngb-progressbar>
</div>
@ -20,13 +20,13 @@
<div class="subtitle mt-2 mb-2">
<span>
{{t('volume-num')}}
<app-entity-title [libraryType]="libraryType!" [entity]="volume" [prioritizeTitleName]="true"></app-entity-title>
<app-entity-title [libraryType]="libraryType" [entity]="volume" [prioritizeTitleName]="true"></app-entity-title>
</span>
</div>
<app-metadata-detail-row [entity]="volumeCast"
[ageRating]="maxAgeRating"
[hasReadingProgress]="hasReadingProgress"
[hasReadingProgress]="volume.pagesRead > 0"
[readingTimeEntity]="volume"
[libraryType]="libraryType">
</app-metadata-detail-row>
@ -49,8 +49,8 @@
<div class="btn-group">
<button type="button" class="btn btn-primary-outline" (click)="readVolume()">
<span>
<i class="fa {{hasReadingProgress ? 'fa-book-open' : 'fa-book'}}" aria-hidden="true"></i>
<span class="read-btn--text">&nbsp;{{(hasReadingProgress) ? t('continue') : t('read')}}</span>
<i class="fa {{volume.pagesRead > 0 ? 'fa-book-open' : 'fa-book'}}" aria-hidden="true"></i>
<span class="read-btn--text">&nbsp;{{(volume.pagesRead > 0) ? t('continue') : t('read')}}</span>
</span>
</button>
<div class="btn-group" ngbDropdown role="group" display="dynamic" [attr.aria-label]="t('read-options-alt')">
@ -59,7 +59,7 @@
<button ngbDropdownItem (click)="readVolume(true)">
<span>
<i class="fa fa-glasses" aria-hidden="true"></i>
<span class="read-btn--text">&nbsp;{{(hasReadingProgress) ? t('continue-incognito') : t('read-incognito')}}</span>
<span class="read-btn--text">&nbsp;{{(volume.pagesRead > 0) ? t('continue-incognito') : t('read-incognito')}}</span>
</span>
</button>
</div>
@ -85,7 +85,7 @@
</div>
<div class="mt-2 mb-3">
<app-read-more [text]="volume.chapters[0].summary || ''"></app-read-more>
<app-read-more [text]="volume.chapters[0].summary || ''" [maxLength]="utilityService.getActiveBreakpoint() >= Breakpoint.Desktop ? 585 : 250"></app-read-more>
</div>
<div class="mt-2">
@ -96,9 +96,6 @@
<app-badge-expander [items]="volumeCast.writers">
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
<a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openPerson(FilterField.Writers, item.id)">{{item.name}}</a>
@if (!last) {
,
}
</ng-template>
</app-badge-expander>
</div>
@ -109,9 +106,6 @@
<app-badge-expander [items]="volumeCast.coverArtists">
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
<a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openPerson(FilterField.CoverArtist, item.id)">{{item.name}}</a>
@if (!last) {
,
}
</ng-template>
</app-badge-expander>
</div>