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

UX Pass 7 (#3135)

Browse source 
Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joe Milazzo 2024-08-29 08:46:17 -05:00 • committed by GitHub
parent 5bf5558212
commit 79eb98a3bb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
67 changed files with 1398 additions and 1006 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<ng-container *transloco="let t; read: 'series-detail'">
<app-bulk-operations [actionCallback]="bulkActionCallback" [topOffset]="56"></app-bulk-operations>
<app-bulk-operations [actionCallback]="bulkActionCallback" [topOffset]="55"></app-bulk-operations>
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid" #scrollingBlock>
@ -95,7 +95,7 @@
<div class="mt-2">
<div class="row g-0">
<div class="col-6">
<span>{{t('writers-title')}}</span>
<span class="fw-bold">{{t('writers-title')}}</span>
<div>
<app-badge-expander [items]="volumeCast.writers" [allowToggle]="false" (toggle)="switchTabsToDetail()">
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
@ -105,7 +105,7 @@
</div>
</div>
<div class="col-6">
<span>{{t('cover-artists-title')}}</span>
<span class="fw-bold">{{t('cover-artists-title')}}</span>
<div>
<app-badge-expander [items]="volumeCast.coverArtists" [allowToggle]="false" (toggle)="switchTabsToDetail()">
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
@ -155,7 +155,7 @@
<div class="carousel-tabs-container mb-2">
<ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav nav-tabs" (navChange)="onNavChange($event)">
<li [ngbNavItem]="TabID.Chapters">
<li [ngbNavItem]="TabID.Chapters">
<a ngbNavLink>
{{utilityService.formatChapterName(libraryType!, false, false, true)}}
<span class="badge rounded-pill text-bg-secondary">{{volume.chapters.length}}</span>
@ -180,28 +180,28 @@
</ng-template>
</li>
@if (volume.chapters.length === 1 && readingLists.length > 0) {
<li [ngbNavItem]="TabID.Related">
<a ngbNavLink>{{t('related-tab')}}</a>
<ng-template ngbNavContent>
@defer (when activeTabId === TabID.Related; prefetch on idle) {
<app-related-tab [readingLists]="readingLists"></app-related-tab>
}
</ng-template>
</li>
}
@if (volume.chapters.length === 1 && readingLists.length > 0) {
<li [ngbNavItem]="TabID.Related">
<a ngbNavLink>{{t('related-tab')}}</a>
<ng-template ngbNavContent>
@defer (when activeTabId === TabID.Related; prefetch on idle) {
<app-related-tab [readingLists]="readingLists"></app-related-tab>
}
</ng-template>
</li>
}
@if (showDetailsTab) {
<li [ngbNavItem]="TabID.Details">
<a ngbNavLink>{{t('details-tab')}}</a>
<ng-template ngbNavContent>
@defer (when activeTabId === TabID.Details; prefetch on idle) {
<app-details-tab [metadata]="volumeCast" [genres]="genres" [tags]="tags"></app-details-tab>
}
</ng-template>
</li>
}
</ul>
@if (showDetailsTab) {
<li [ngbNavItem]="TabID.Details" id="details-tab">
<a ngbNavLink>{{t('details-tab')}}</a>
<ng-template ngbNavContent>
@defer (when activeTabId === TabID.Details; prefetch on idle) {
<app-details-tab [metadata]="volumeCast" [genres]="genres" [tags]="tags"></app-details-tab>
}
</ng-template>
</li>
}
</ul>
</div>
<!-- Min height helps with scroll jerking when switching from chapter -> related/details -->
<div [ngbNavOutlet]="nav" style="min-height: 300px"></div>