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

fixed indentation / updated to match develop

Browse source
This commit is contained in:
Christopher 2025-05-15 22:32:47 -06:00
parent 14df0139c9
commit 2739e1848e
1 changed files with 216 additions and 181 deletions
Download patch file Download diff file Expand all files Collapse all files

105
UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
View file

@ -8,7 +8,8 @@
<div class="info-grid-container"> <div class="info-grid-container">
<div [ngClass]="mobileSeriesImgBackground === 'true' ? 'mobile-background' : ''" <div [ngClass]="mobileSeriesImgBackground === 'true' ? 'mobile-background' : ''"
class="image-container series position-relative"> class="image-container series position-relative">
<app-cover-image [entity]="series" [coverImage]="imageService.getSeriesCoverImage(series.id)" [continueTitle]="ContinuePointTitle" (read)="read()"></app-cover-image> <app-cover-image [entity]="series" [coverImage]="imageService.getSeriesCoverImage(series.id)"
[continueTitle]="ContinuePointTitle" (read)="read()"></app-cover-image>
</div> </div>
<div class="metadata-details-upper"> <div class="metadata-details-upper">
@ -60,8 +61,10 @@
<span class="read-btn--text">&nbsp;{{ (hasReadingProgress) ? t('continue') : t('read') }}</span> <span class="read-btn--text">&nbsp;{{ (hasReadingProgress) ? t('continue') : t('read') }}</span>
</span> </span>
</button> </button>
<div class="btn-group" ngbDropdown role="group" display="dynamic" [attr.aria-label]="t('read-options-alt')"> <div class="btn-group" ngbDropdown role="group" display="dynamic"
<button type="button" class="btn btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button> [attr.aria-label]="t('read-options-alt')">
<button type="button" class="btn btn-outline-primary dropdown-toggle-split"
ngbDropdownToggle></button>
<div class="dropdown-menu" ngbDropdownMenu> <div class="dropdown-menu" ngbDropdownMenu>
<button ngbDropdownItem (click)="read(true)"> <button ngbDropdownItem (click)="read(true)">
<span> <span>
@ -76,7 +79,8 @@
<div class="actions-row"> <div class="actions-row">
<div class="col-auto ms-2"> <div class="col-auto ms-2">
<button class="btn btn-actions" (click)="toggleWantToRead()" ngbTooltip="{{isWantToRead ? t('remove-from-want-to-read') : t('add-to-want-to-read')}}"> <button class="btn btn-actions" (click)="toggleWantToRead()"
ngbTooltip="{{isWantToRead ? t('remove-from-want-to-read') : t('add-to-want-to-read')}}">
<span> <span>
<i class="{{isWantToRead ? 'fa-solid' : 'fa-regular'}} fa-star" aria-hidden="true"></i> <i class="{{isWantToRead ? 'fa-solid' : 'fa-regular'}} fa-star" aria-hidden="true"></i>
</span> </span>
@ -85,7 +89,8 @@
@if (isAdmin) { @if (isAdmin) {
<div class="col-auto ms-2"> <div class="col-auto ms-2">
<button class="btn btn-actions" id="edit-btn--komf" (click)="openEditSeriesModal()" [ngbTooltip]="t('edit-series-alt')"> <button class="btn btn-actions" id="edit-btn--komf" (click)="openEditSeriesModal()"
[ngbTooltip]="t('edit-series-alt')">
<span><i class="fa fa-pen" aria-hidden="true"></i></span> <span><i class="fa fa-pen" aria-hidden="true"></i></span>
</button> </button>
</div> </div>
@ -93,26 +98,31 @@
@if ((licenseService.hasValidLicense$ | async) && libraryAllowsScrobbling) { @if ((licenseService.hasValidLicense$ | async) && libraryAllowsScrobbling) {
<div class="col-auto ms-2"> <div class="col-auto ms-2">
<button class="btn btn-actions" (click)="toggleScrobbling($event)" [ngbTooltip]="t('scrobbling-tooltip', {value: isScrobbling ? t('on') : t('off')})"> <button class="btn btn-actions" (click)="toggleScrobbling($event)"
<i class="fa-solid fa-tower-{{(isScrobbling) ? 'broadcast' : 'observation'}}" aria-hidden="true"></i> [ngbTooltip]="t('scrobbling-tooltip', {value: isScrobbling ? t('on') : t('off')})">
<i class="fa-solid fa-tower-{{(isScrobbling) ? 'broadcast' : 'observation'}}"
aria-hidden="true"></i>
</button> </button>
</div> </div>
} }
<div class="col-auto ms-2"> <div class="col-auto ms-2">
<div class="card-actions btn-actions" [ngbTooltip]="t('more-alt')"> <div class="card-actions btn-actions" [ngbTooltip]="t('more-alt')">
<app-card-actionables (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-h" btnClass="btn"></app-card-actionables> <app-card-actionables [entity]="series" [inputActions]="seriesActions" [labelBy]="series.name"
iconClass="fa-ellipsis-h" btnClass="btn"></app-card-actionables>
</div> </div>
</div> </div>
<div class="col-auto ms-2 d-none d-md-block btn-actions download"> <div class="col-auto ms-2 d-none d-md-block btn-actions download">
<app-download-button [download$]="download$" [entity]="series" entityType="series"></app-download-button> <app-download-button [download$]="download$" [entity]="series"
entityType="series"></app-download-button>
</div> </div>
</div> </div>
</div> </div>
<div class="mt-2 mb-3"> <div class="mt-2 mb-3">
<app-read-more [text]="seriesMetadata.summary || ''" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 170 : 200"></app-read-more> <app-read-more [text]="seriesMetadata.summary || ''"
[maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
</div> </div>
<div class="mt-2 upper-details"> <div class="mt-2 upper-details">
@ -125,7 +135,8 @@
[allowToggle]="false" [allowToggle]="false"
(toggle)="switchTabsToDetail()"> (toggle)="switchTabsToDetail()">
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last"> <ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
<a routerLink="/person/{{encodeURIComponent(item.name)}}/" class="dark-exempt btn-icon">{{item.name}}</a> <a routerLink="/person/{{encodeURIComponent(item.name)}}/"
class="dark-exempt btn-icon">{{ item.name }}</a>
</ng-template> </ng-template>
</app-badge-expander> </app-badge-expander>
</div> </div>
@ -134,7 +145,8 @@
<span class="fw-bold">{{ t('publication-status-title') }}</span> <span class="fw-bold">{{ t('publication-status-title') }}</span>
<div> <div>
@if (seriesMetadata.publicationStatus | publicationStatus; as pubStatus) { @if (seriesMetadata.publicationStatus | publicationStatus; as pubStatus) {
<a class="dark-exempt btn-icon" (click)="openFilter(FilterField.PublicationStatus, seriesMetadata.publicationStatus)" <a class="dark-exempt btn-icon font-size"
(click)="openFilter(FilterField.PublicationStatus, seriesMetadata!.publicationStatus)"
href="javascript:void(0);" href="javascript:void(0);"
[ngbTooltip]="t('publication-status-tooltip') + (seriesMetadata.totalCount === 0 ? '' : ' (' + seriesMetadata.maxCount + ' / ' + seriesMetadata.totalCount + ')')"> [ngbTooltip]="t('publication-status-tooltip') + (seriesMetadata.totalCount === 0 ? '' : ' (' + seriesMetadata.maxCount + ' / ' + seriesMetadata.totalCount + ')')">
{{ pubStatus }} {{ pubStatus }}
@ -155,7 +167,8 @@
[allowToggle]="false" [allowToggle]="false"
(toggle)="switchTabsToDetail()"> (toggle)="switchTabsToDetail()">
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last"> <ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
<a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openFilter(FilterField.Genres, item.id)">{{item.title}}</a> <a href="javascript:void(0)" class="dark-exempt btn-icon"
(click)="openFilter(FilterField.Genres, item.id)">{{ item.title }}</a>
</ng-template> </ng-template>
</app-badge-expander> </app-badge-expander>
</div> </div>
@ -169,7 +182,8 @@
[allowToggle]="false" [allowToggle]="false"
(toggle)="switchTabsToDetail()"> (toggle)="switchTabsToDetail()">
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last"> <ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
<a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openFilter(FilterField.Tags, item.id)">{{item.title}}</a> <a href="javascript:void(0)" class="dark-exempt btn-icon"
(click)="openFilter(FilterField.Tags, item.id)">{{ item.title }}</a>
</ng-template> </ng-template>
</app-badge-expander> </app-badge-expander>
</div> </div>
@ -181,25 +195,30 @@
</div> </div>
<div class="carousel-tabs-container mb-2"> <div class="carousel-tabs-container mb-2">
<ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav nav-tabs" [destroyOnHide]="false" (navChange)="onNavChange($event)"> <ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav nav-tabs" [destroyOnHide]="false"
(navChange)="onNavChange($event)">
@if (showStorylineTab) { @if (showStorylineTab) {
<li [ngbNavItem]="TabID.Storyline"> <li [ngbNavItem]="TabID.Storyline">
<a ngbNavLink>{{ t(TabID.Storyline) }}</a> <a ngbNavLink>{{ t(TabID.Storyline) }}</a>
<ng-template ngbNavContent> <ng-template ngbNavContent>
@defer (when activeTabId === TabID.Storyline; prefetch on idle) { @defer (when activeTabId === TabID.Storyline; prefetch on idle) {
<virtual-scroller #scroll [items]="storylineItems" [bufferAmount]="1" [parentScroll]="scrollingBlock" [childHeight]="1"> <virtual-scroller #scroll [items]="storylineItems" [bufferAmount]="1" [parentScroll]="scrollingBlock"
[childHeight]="1">
<div class="card-container row g-0" #container> <div class="card-container row g-0" #container>
@for (item of scroll.viewPortItems; let idx = $index; track item) { @for (item of scroll.viewPortItems; let idx = $index; track item) {
@if (item.isChapter) { @if (item.isChapter) {
<ng-container [ngTemplateOutlet]="nonSpecialChapterCard" [ngTemplateOutletContext]="{$implicit: item.chapter, scroll: scroll, idx: idx, chaptersLength: storyChapters.length}"></ng-container> <ng-container [ngTemplateOutlet]="nonSpecialChapterCard"
[ngTemplateOutletContext]="{$implicit: item.chapter, scroll: scroll, idx: idx, chaptersLength: storyChapters.length}"></ng-container>
} @else { } @else {
<ng-container [ngTemplateOutlet]="nonChapterVolumeCard" [ngTemplateOutletContext]="{$implicit: item.volume, scroll: scroll, idx: idx, volumesLength: volumes.length}"></ng-container> <ng-container [ngTemplateOutlet]="nonChapterVolumeCard"
[ngTemplateOutletContext]="{$implicit: item.volume, scroll: scroll, idx: idx, volumesLength: volumes.length}"></ng-container>
} }
} }
<ng-container [ngTemplateOutlet]="estimatedNextCard" [ngTemplateOutletContext]="{tabId: TabID.Storyline}"></ng-container> <ng-container [ngTemplateOutlet]="estimatedNextCard"
[ngTemplateOutletContext]="{tabId: TabID.Storyline}"></ng-container>
</div> </div>
</virtual-scroller> </virtual-scroller>
} }
@ -218,10 +237,13 @@
@defer (when activeTabId === TabID.Volumes; prefetch on idle) { @defer (when activeTabId === TabID.Volumes; prefetch on idle) {
<virtual-scroller #scroll [items]="volumes" [parentScroll]="scrollingBlock" [childHeight]="1"> <virtual-scroller #scroll [items]="volumes" [parentScroll]="scrollingBlock" [childHeight]="1">
<div class="card-container row g-0" #container> <div class="card-container row g-0" #container>
@for (item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead + + '_volumes') { @for (item of scroll.viewPortItems; let
<ng-container [ngTemplateOutlet]="nonChapterVolumeCard" [ngTemplateOutletContext]="{$implicit: item, scroll: scroll, idx: idx, totalLength: volumes.length}"></ng-container> idx = $index; track item.id + '_' + item.pagesRead + +'_volumes') {
<ng-container [ngTemplateOutlet]="nonChapterVolumeCard"
[ngTemplateOutletContext]="{$implicit: item, scroll: scroll, idx: idx, totalLength: volumes.length}"></ng-container>
} }
<ng-container [ngTemplateOutlet]="estimatedNextCard" [ngTemplateOutletContext]="{tabId: TabID.Volumes}"></ng-container> <ng-container [ngTemplateOutlet]="estimatedNextCard"
[ngTemplateOutletContext]="{tabId: TabID.Volumes}"></ng-container>
</div> </div>
</virtual-scroller> </virtual-scroller>
} }
@ -239,10 +261,13 @@
@defer (when activeTabId === TabID.Chapters; prefetch on idle) { @defer (when activeTabId === TabID.Chapters; prefetch on idle) {
<virtual-scroller #scroll [items]="chapters" [parentScroll]="scrollingBlock" [childHeight]="1"> <virtual-scroller #scroll [items]="chapters" [parentScroll]="scrollingBlock" [childHeight]="1">
<div class="card-container row g-0" #container> <div class="card-container row g-0" #container>
@for (item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead + '_chapters') { @for (item of scroll.viewPortItems; let
<ng-container [ngTemplateOutlet]="nonSpecialChapterCard" [ngTemplateOutletContext]="{$implicit: item, scroll: scroll, idx: idx, totalLength: chapters.length}"></ng-container> idx = $index; track item.id + '_' + item.pagesRead + '_chapters') {
<ng-container [ngTemplateOutlet]="nonSpecialChapterCard"
[ngTemplateOutletContext]="{$implicit: item, scroll: scroll, idx: idx, totalLength: chapters.length}"></ng-container>
} }
<ng-container [ngTemplateOutlet]="estimatedNextCard" [ngTemplateOutletContext]="{tabId: TabID.Chapters}"></ng-container> <ng-container [ngTemplateOutlet]="estimatedNextCard"
[ngTemplateOutletContext]="{tabId: TabID.Chapters}"></ng-container>
</div> </div>
</virtual-scroller> </virtual-scroller>
} }
@ -260,8 +285,10 @@
@defer (when activeTabId === TabID.Specials; prefetch on idle) { @defer (when activeTabId === TabID.Specials; prefetch on idle) {
<virtual-scroller #scroll [items]="specials" [parentScroll]="scrollingBlock" [childHeight]="1"> <virtual-scroller #scroll [items]="specials" [parentScroll]="scrollingBlock" [childHeight]="1">
<div class="card-container row g-0" #container> <div class="card-container row g-0" #container>
@for(item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead + '_specials') { @for (item of scroll.viewPortItems; let
<ng-container [ngTemplateOutlet]="specialChapterCard" [ngTemplateOutletContext]="{$implicit: item, scroll: scroll, idx: idx, chaptersLength: chapters.length}"></ng-container> idx = $index; track item.id + '_' + item.pagesRead + '_specials') {
<ng-container [ngTemplateOutlet]="specialChapterCard"
[ngTemplateOutletContext]="{$implicit: item, scroll: scroll, idx: idx, chaptersLength: chapters.length}"></ng-container>
} }
</div> </div>
</virtual-scroller> </virtual-scroller>
@ -300,9 +327,11 @@
<div class="card-container row g-0" #container> <div class="card-container row g-0" #container>
@for (item of scroll.viewPortItems; let idx = $index; track idx) { @for (item of scroll.viewPortItems; let idx = $index; track idx) {
@if (!item.hasOwnProperty('coverUrl')) { @if (!item.hasOwnProperty('coverUrl')) {
<app-series-card class="col-auto mt-2 mb-2" [series]="item" [previewOnClick]="true" [libraryId]="item.libraryId"></app-series-card> <app-series-card class="col-auto mt-2 mb-2" [series]="item" [previewOnClick]="true"
[libraryId]="item.libraryId"></app-series-card>
} @else { } @else {
<app-external-series-card class="col-auto mt-2 mb-2" [previewOnClick]="true" [data]="item"></app-external-series-card> <app-external-series-card class="col-auto mt-2 mb-2" [previewOnClick]="true"
[data]="item"></app-external-series-card>
} }
} }
</div> </div>
@ -359,10 +388,12 @@
} }
} }
@case (TabID.Chapters) { @case (TabID.Chapters) {
<app-next-expected-card class="col-auto mt-2 mb-2" [entity]="nextExpectedChapter" [imageUrl]="imageService.getSeriesCoverImage(series.id)"></app-next-expected-card> <app-next-expected-card class="col-auto mt-2 mb-2" [entity]="nextExpectedChapter"
[imageUrl]="imageService.getSeriesCoverImage(series.id)"></app-next-expected-card>
} }
@case (TabID.Storyline) { @case (TabID.Storyline) {
<app-next-expected-card class="col-auto mt-2 mb-2" [entity]="nextExpectedChapter" [imageUrl]="imageService.getSeriesCoverImage(series.id)"></app-next-expected-card> <app-next-expected-card class="col-auto mt-2 mb-2" [entity]="nextExpectedChapter"
[imageUrl]="imageService.getSeriesCoverImage(series.id)"></app-next-expected-card>
} }
} }
} }
@ -378,15 +409,18 @@
[actions]="chapterActions" [actions]="chapterActions"
[libraryType]="libraryType" [libraryType]="libraryType"
(selection)="bulkSelectionService.handleCardSelection('chapter', scroll.viewPortInfo.startIndexWithBuffer + idx, totalLength, $event)" (selection)="bulkSelectionService.handleCardSelection('chapter', scroll.viewPortInfo.startIndexWithBuffer + idx, totalLength, $event)"
[selected]="bulkSelectionService.isCardSelected('chapter', scroll.viewPortInfo.startIndexWithBuffer + idx)" [allowSelection]="true"> [selected]="bulkSelectionService.isCardSelected('chapter', scroll.viewPortInfo.startIndexWithBuffer + idx)"
[allowSelection]="true">
</app-chapter-card> </app-chapter-card>
</ng-template> </ng-template>
<ng-template #nonChapterVolumeCard let-item let-scroll="scroll" let-idx="idx" let-totalLength="totalLength"> <ng-template #nonChapterVolumeCard let-item let-scroll="scroll" let-idx="idx" let-totalLength="totalLength">
<app-volume-card class="col-auto mt-2 mb-2" [volume]="item" [seriesId]="seriesId" [libraryId]="libraryId" [libraryType]="libraryType" <app-volume-card class="col-auto mt-2 mb-2" [volume]="item" [seriesId]="seriesId" [libraryId]="libraryId"
[libraryType]="libraryType"
[actions]="volumeActions" [actions]="volumeActions"
(selection)="bulkSelectionService.handleCardSelection('volume', scroll.viewPortInfo.startIndexWithBuffer + idx, totalLength, $event)" (selection)="bulkSelectionService.handleCardSelection('volume', scroll.viewPortInfo.startIndexWithBuffer + idx, totalLength, $event)"
[selected]="bulkSelectionService.isCardSelected('volume', scroll.viewPortInfo.startIndexWithBuffer + idx)" [allowSelection]="true"> [selected]="bulkSelectionService.isCardSelected('volume', scroll.viewPortInfo.startIndexWithBuffer + idx)"
[allowSelection]="true">
</app-volume-card> </app-volume-card>
</ng-template> </ng-template>
@ -396,6 +430,7 @@
[actions]="chapterActions" [actions]="chapterActions"
[libraryType]="libraryType" [libraryType]="libraryType"
(selection)="bulkSelectionService.handleCardSelection('special', scroll.viewPortInfo.startIndexWithBuffer + idx, totalLength, $event)" (selection)="bulkSelectionService.handleCardSelection('special', scroll.viewPortInfo.startIndexWithBuffer + idx, totalLength, $event)"
[selected]="bulkSelectionService.isCardSelected('special', scroll.viewPortInfo.startIndexWithBuffer + idx)" [allowSelection]="true"> [selected]="bulkSelectionService.isCardSelected('special', scroll.viewPortInfo.startIndexWithBuffer + idx)"
[allowSelection]="true">
</app-chapter-card> </app-chapter-card>
</ng-template> </ng-template>