fixed indentation / updated to match develop
This commit is contained in:
Christopher
parent
14df0139c9
commit
2739e1848e
1 changed files with 216 additions and 181 deletions
|
|
@ -8,198 +8,217 @@
|
||||||
<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">
|
||||||
<div class="metadata-details-wrapper">
|
<div class="metadata-details-wrapper">
|
||||||
<h4 class="title mb-2">
|
<h4 class="title mb-2">
|
||||||
<span>{{series.name}}
|
<span>{{ series.name }}
|
||||||
|
|
||||||
@if(isLoadingExtra || isLoading) {
|
@if (isLoadingExtra || isLoading) {
|
||||||
<div class="spinner-border spinner-border-sm text-primary" role="status">
|
<div class="spinner-border spinner-border-sm text-primary" role="status">
|
||||||
<span class="visually-hidden">loading...</span>
|
<span class="visually-hidden">loading...</span>
|
||||||
</div>
|
</div>
|
||||||
}
|
|
||||||
</span>
|
|
||||||
</h4>
|
|
||||||
<div class="subtitle mt-2 mb-2">
|
|
||||||
@if (series.localizedName !== series.name && series.localizedName) {
|
|
||||||
<span>{{series.localizedName | defaultValue}}</span>
|
|
||||||
}
|
}
|
||||||
</div>
|
</span>
|
||||||
|
</h4>
|
||||||
|
<div class="subtitle mt-2 mb-2">
|
||||||
|
@if (series.localizedName !== series.name && series.localizedName) {
|
||||||
|
<span>{{ series.localizedName | defaultValue }}</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
<app-metadata-detail-row [entity]="seriesMetadata"
|
<app-metadata-detail-row [entity]="seriesMetadata"
|
||||||
[readingTimeLeft]="readingTimeLeft"
|
[readingTimeLeft]="readingTimeLeft"
|
||||||
[ageRating]="seriesMetadata.ageRating"
|
[ageRating]="seriesMetadata.ageRating"
|
||||||
[hasReadingProgress]="hasReadingProgress"
|
[hasReadingProgress]="hasReadingProgress"
|
||||||
[readingTimeEntity]="series"
|
[readingTimeEntity]="series"
|
||||||
[libraryType]="libraryType"
|
|
||||||
[mangaFormat]="series.format">
|
|
||||||
</app-metadata-detail-row>
|
|
||||||
|
|
||||||
<div class="mt-2 mb-2">
|
|
||||||
<app-external-rating [seriesId]="series.id"
|
|
||||||
[ratings]="ratings"
|
|
||||||
[userRating]="series.userRating"
|
|
||||||
[hasUserRated]="series.hasUserRated"
|
|
||||||
[libraryType]="libraryType"
|
[libraryType]="libraryType"
|
||||||
[webLinks]="WebLinks">
|
[mangaFormat]="series.format">
|
||||||
</app-external-rating>
|
</app-metadata-detail-row>
|
||||||
</div>
|
|
||||||
|
<div class="mt-2 mb-2">
|
||||||
|
<app-external-rating [seriesId]="series.id"
|
||||||
|
[ratings]="ratings"
|
||||||
|
[userRating]="series.userRating"
|
||||||
|
[hasUserRated]="series.hasUserRated"
|
||||||
|
[libraryType]="libraryType"
|
||||||
|
[webLinks]="WebLinks">
|
||||||
|
</app-external-rating>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="metadata-details-lower">
|
<div class="metadata-details-lower">
|
||||||
<div class="continue-container row g-0" style="align-items: center;">
|
<div class="continue-container row g-0" style="align-items: center;">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button type="button" class="btn btn-outline-primary" (click)="read()">
|
<button type="button" class="btn btn-outline-primary" (click)="read()">
|
||||||
<span>
|
<span>
|
||||||
<i class="fa {{hasReadingProgress ? 'fa-book-open' : 'fa-book'}}" aria-hidden="true"></i>
|
<i class="fa {{hasReadingProgress ? 'fa-book-open' : 'fa-book'}}" aria-hidden="true"></i>
|
||||||
<span class="read-btn--text"> {{(hasReadingProgress) ? t('continue') : t('read')}}</span>
|
<span class="read-btn--text"> {{ (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')">
|
||||||
<div class="dropdown-menu" ngbDropdownMenu>
|
<button type="button" class="btn btn-outline-primary dropdown-toggle-split"
|
||||||
<button ngbDropdownItem (click)="read(true)">
|
ngbDropdownToggle></button>
|
||||||
|
<div class="dropdown-menu" ngbDropdownMenu>
|
||||||
|
<button ngbDropdownItem (click)="read(true)">
|
||||||
<span>
|
<span>
|
||||||
<i class="fa fa-glasses" aria-hidden="true"></i>
|
<i class="fa fa-glasses" aria-hidden="true"></i>
|
||||||
<span class="read-btn--text"> {{(hasReadingProgress) ? t('continue-incognito') : t('read-incognito')}}</span>
|
<span class="read-btn--text"> {{ (hasReadingProgress) ? t('continue-incognito') : t('read-incognito') }}</span>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<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>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@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()"
|
||||||
<span><i class="fa fa-pen" aria-hidden="true"></i></span>
|
[ngbTooltip]="t('edit-series-alt')">
|
||||||
</button>
|
<span><i class="fa fa-pen" aria-hidden="true"></i></span>
|
||||||
</div>
|
</button>
|
||||||
}
|
|
||||||
|
|
||||||
@if ((licenseService.hasValidLicense$ | async) && libraryAllowsScrobbling) {
|
|
||||||
<div class="col-auto ms-2">
|
|
||||||
<button class="btn btn-actions" (click)="toggleScrobbling($event)" [ngbTooltip]="t('scrobbling-tooltip', {value: isScrobbling ? t('on') : t('off')})">
|
|
||||||
<i class="fa-solid fa-tower-{{(isScrobbling) ? 'broadcast' : 'observation'}}" aria-hidden="true"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
<div class="col-auto ms-2">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
}
|
||||||
|
|
||||||
<div class="mt-2 mb-3">
|
@if ((licenseService.hasValidLicense$ | async) && libraryAllowsScrobbling) {
|
||||||
<app-read-more [text]="seriesMetadata.summary || ''" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
|
<div class="col-auto ms-2">
|
||||||
</div>
|
<button class="btn btn-actions" (click)="toggleScrobbling($event)"
|
||||||
|
[ngbTooltip]="t('scrobbling-tooltip', {value: isScrobbling ? t('on') : t('off')})">
|
||||||
<div class="mt-2 upper-details">
|
<i class="fa-solid fa-tower-{{(isScrobbling) ? 'broadcast' : 'observation'}}"
|
||||||
<div class="row g-0">
|
aria-hidden="true"></i>
|
||||||
<div class="col-6 pe-5">
|
</button>
|
||||||
<span class="fw-bold">{{t('writers-title')}}</span>
|
|
||||||
<div>
|
|
||||||
<app-badge-expander [items]="seriesMetadata.writers"
|
|
||||||
[itemsTillExpander]="3"
|
|
||||||
[allowToggle]="false"
|
|
||||||
(toggle)="switchTabsToDetail()">
|
|
||||||
<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>
|
|
||||||
</ng-template>
|
|
||||||
</app-badge-expander>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6">
|
|
||||||
<span class="fw-bold">{{t('publication-status-title')}}</span>
|
|
||||||
<div>
|
|
||||||
@if (seriesMetadata.publicationStatus | publicationStatus; as pubStatus) {
|
|
||||||
<a class="dark-exempt btn-icon" (click)="openFilter(FilterField.PublicationStatus, seriesMetadata.publicationStatus)"
|
|
||||||
href="javascript:void(0);"
|
|
||||||
[ngbTooltip]="t('publication-status-tooltip') + (seriesMetadata.totalCount === 0 ? '' : ' (' + seriesMetadata.maxCount + ' / ' + seriesMetadata.totalCount + ')')">
|
|
||||||
{{pubStatus}}
|
|
||||||
</a>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
}
|
||||||
|
|
||||||
<div class="mt-3 mb-2 upper-details">
|
<div class="col-auto ms-2">
|
||||||
<div class="row g-0">
|
<div class="card-actions btn-actions" [ngbTooltip]="t('more-alt')">
|
||||||
<div class="col-6 pe-5">
|
<app-card-actionables [entity]="series" [inputActions]="seriesActions" [labelBy]="series.name"
|
||||||
<span class="fw-bold">{{t('genres-title')}}</span>
|
iconClass="fa-ellipsis-h" btnClass="btn"></app-card-actionables>
|
||||||
<div>
|
|
||||||
<app-badge-expander [items]="seriesMetadata.genres"
|
|
||||||
[itemsTillExpander]="3"
|
|
||||||
[allowToggle]="false"
|
|
||||||
(toggle)="switchTabsToDetail()">
|
|
||||||
<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>
|
|
||||||
</ng-template>
|
|
||||||
</app-badge-expander>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-6">
|
|
||||||
<span class="fw-bold">{{t('tags-title')}}</span>
|
|
||||||
<div>
|
|
||||||
<app-badge-expander [items]="seriesMetadata.tags"
|
|
||||||
[itemsTillExpander]="3"
|
|
||||||
[allowToggle]="false"
|
|
||||||
(toggle)="switchTabsToDetail()">
|
|
||||||
<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>
|
|
||||||
</ng-template>
|
|
||||||
</app-badge-expander>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-2 mb-3">
|
||||||
|
<app-read-more [text]="seriesMetadata.summary || ''"
|
||||||
|
[maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-2 upper-details">
|
||||||
|
<div class="row g-0">
|
||||||
|
<div class="col-6 pe-5">
|
||||||
|
<span class="fw-bold">{{ t('writers-title') }}</span>
|
||||||
|
<div>
|
||||||
|
<app-badge-expander [items]="seriesMetadata.writers"
|
||||||
|
[itemsTillExpander]="3"
|
||||||
|
[allowToggle]="false"
|
||||||
|
(toggle)="switchTabsToDetail()">
|
||||||
|
<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>
|
||||||
|
</ng-template>
|
||||||
|
</app-badge-expander>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<span class="fw-bold">{{ t('publication-status-title') }}</span>
|
||||||
|
<div>
|
||||||
|
@if (seriesMetadata.publicationStatus | publicationStatus; as pubStatus) {
|
||||||
|
<a class="dark-exempt btn-icon font-size"
|
||||||
|
(click)="openFilter(FilterField.PublicationStatus, seriesMetadata!.publicationStatus)"
|
||||||
|
href="javascript:void(0);"
|
||||||
|
[ngbTooltip]="t('publication-status-tooltip') + (seriesMetadata.totalCount === 0 ? '' : ' (' + seriesMetadata.maxCount + ' / ' + seriesMetadata.totalCount + ')')">
|
||||||
|
{{ pubStatus }}
|
||||||
|
</a>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-3 mb-2 upper-details">
|
||||||
|
<div class="row g-0">
|
||||||
|
<div class="col-6 pe-5">
|
||||||
|
<span class="fw-bold">{{ t('genres-title') }}</span>
|
||||||
|
<div>
|
||||||
|
<app-badge-expander [items]="seriesMetadata.genres"
|
||||||
|
[itemsTillExpander]="3"
|
||||||
|
[allowToggle]="false"
|
||||||
|
(toggle)="switchTabsToDetail()">
|
||||||
|
<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>
|
||||||
|
</ng-template>
|
||||||
|
</app-badge-expander>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-6">
|
||||||
|
<span class="fw-bold">{{ t('tags-title') }}</span>
|
||||||
|
<div>
|
||||||
|
<app-badge-expander [items]="seriesMetadata.tags"
|
||||||
|
[itemsTillExpander]="3"
|
||||||
|
[allowToggle]="false"
|
||||||
|
(toggle)="switchTabsToDetail()">
|
||||||
|
<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>
|
||||||
|
</ng-template>
|
||||||
|
</app-badge-expander>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
}
|
}
|
||||||
|
|
@ -211,17 +230,20 @@
|
||||||
@if (showVolumeTab) {
|
@if (showVolumeTab) {
|
||||||
<li [ngbNavItem]="TabID.Volumes">
|
<li [ngbNavItem]="TabID.Volumes">
|
||||||
<a ngbNavLink>
|
<a ngbNavLink>
|
||||||
{{UseBookLogic ? t('books-tab') : t('volumes-tab')}}
|
{{ UseBookLogic ? t('books-tab') : t('volumes-tab') }}
|
||||||
<span class="badge rounded-pill text-bg-secondary">{{volumes.length}}</span>
|
<span class="badge rounded-pill text-bg-secondary">{{ volumes.length }}</span>
|
||||||
</a>
|
</a>
|
||||||
<ng-template ngbNavContent>
|
<ng-template ngbNavContent>
|
||||||
@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>
|
||||||
}
|
}
|
||||||
|
|
@ -232,17 +254,20 @@
|
||||||
@if (showChapterTab) {
|
@if (showChapterTab) {
|
||||||
<li [ngbNavItem]="TabID.Chapters">
|
<li [ngbNavItem]="TabID.Chapters">
|
||||||
<a ngbNavLink>
|
<a ngbNavLink>
|
||||||
{{utilityService.formatChapterName(libraryType)}}
|
{{ utilityService.formatChapterName(libraryType) }}
|
||||||
<span class="badge rounded-pill text-bg-secondary">{{chapters.length}}</span>
|
<span class="badge rounded-pill text-bg-secondary">{{ chapters.length }}</span>
|
||||||
</a>
|
</a>
|
||||||
<ng-template ngbNavContent>
|
<ng-template ngbNavContent>
|
||||||
@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>
|
||||||
}
|
}
|
||||||
|
|
@ -253,15 +278,17 @@
|
||||||
@if (hasSpecials) {
|
@if (hasSpecials) {
|
||||||
<li [ngbNavItem]="TabID.Specials">
|
<li [ngbNavItem]="TabID.Specials">
|
||||||
<a ngbNavLink>
|
<a ngbNavLink>
|
||||||
{{t(TabID.Specials)}}
|
{{ t(TabID.Specials) }}
|
||||||
<span class="badge rounded-pill text-bg-secondary">{{specials.length}}</span>
|
<span class="badge rounded-pill text-bg-secondary">{{ specials.length }}</span>
|
||||||
</a>
|
</a>
|
||||||
<ng-template ngbNavContent>
|
<ng-template ngbNavContent>
|
||||||
@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>
|
||||||
|
|
@ -273,8 +300,8 @@
|
||||||
@if (hasRelations || readingLists.length > 0 || collections.length > 0 || bookmarks.length > 0) {
|
@if (hasRelations || readingLists.length > 0 || collections.length > 0 || bookmarks.length > 0) {
|
||||||
<li [ngbNavItem]="TabID.Related">
|
<li [ngbNavItem]="TabID.Related">
|
||||||
<a ngbNavLink>
|
<a ngbNavLink>
|
||||||
{{t(TabID.Related)}}
|
{{ t(TabID.Related) }}
|
||||||
<span class="badge rounded-pill text-bg-secondary">{{relations.length + readingLists.length + collections.length + (bookmarks.length > 0 ? 1 : 0)}}</span>
|
<span class="badge rounded-pill text-bg-secondary">{{ relations.length + readingLists.length + collections.length + (bookmarks.length > 0 ? 1 : 0) }}</span>
|
||||||
</a>
|
</a>
|
||||||
<ng-template ngbNavContent>
|
<ng-template ngbNavContent>
|
||||||
@defer (when activeTabId === TabID.Related; prefetch on idle) {
|
@defer (when activeTabId === TabID.Related; prefetch on idle) {
|
||||||
|
|
@ -291,18 +318,20 @@
|
||||||
@if (hasRecommendations) {
|
@if (hasRecommendations) {
|
||||||
<li [ngbNavItem]="TabID.Recommendations">
|
<li [ngbNavItem]="TabID.Recommendations">
|
||||||
<a ngbNavLink>
|
<a ngbNavLink>
|
||||||
{{t(TabID.Recommendations)}}
|
{{ t(TabID.Recommendations) }}
|
||||||
<span class="badge rounded-pill text-bg-secondary">{{combinedRecs.length}}</span>
|
<span class="badge rounded-pill text-bg-secondary">{{ combinedRecs.length }}</span>
|
||||||
</a>
|
</a>
|
||||||
<ng-template ngbNavContent>
|
<ng-template ngbNavContent>
|
||||||
@defer (when activeTabId === TabID.Recommendations; prefetch on idle) {
|
@defer (when activeTabId === TabID.Recommendations; prefetch on idle) {
|
||||||
<virtual-scroller #scroll [items]="combinedRecs" [parentScroll]="scrollingBlock" [childHeight]="1">
|
<virtual-scroller #scroll [items]="combinedRecs" [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 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>
|
||||||
|
|
@ -314,19 +343,19 @@
|
||||||
|
|
||||||
<li [ngbNavItem]="TabID.Reviews">
|
<li [ngbNavItem]="TabID.Reviews">
|
||||||
<a ngbNavLink>
|
<a ngbNavLink>
|
||||||
{{t(TabID.Reviews)}}
|
{{ t(TabID.Reviews) }}
|
||||||
<span class="badge rounded-pill text-bg-secondary">{{reviews.length + plusReviews.length}}</span>
|
<span class="badge rounded-pill text-bg-secondary">{{ reviews.length + plusReviews.length }}</span>
|
||||||
</a>
|
</a>
|
||||||
<ng-template ngbNavContent>
|
<ng-template ngbNavContent>
|
||||||
@defer (when activeTabId === TabID.Reviews; prefetch on idle) {
|
@defer (when activeTabId === TabID.Reviews; prefetch on idle) {
|
||||||
<app-reviews [userReviews]="reviews" [plusReviews]="plusReviews" [series]="series" />
|
<app-reviews [userReviews]="reviews" [plusReviews]="plusReviews" [series]="series"/>
|
||||||
}
|
}
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
@if (seriesMetadata && showDetailsTab) {
|
@if (seriesMetadata && showDetailsTab) {
|
||||||
<li [ngbNavItem]="TabID.Details" id="details-tab">
|
<li [ngbNavItem]="TabID.Details" id="details-tab">
|
||||||
<a ngbNavLink>{{t(TabID.Details)}}</a>
|
<a ngbNavLink>{{ t(TabID.Details) }}</a>
|
||||||
<ng-template ngbNavContent>
|
<ng-template ngbNavContent>
|
||||||
@defer (when activeTabId === TabID.Details; prefetch on idle) {
|
@defer (when activeTabId === TabID.Details; prefetch on idle) {
|
||||||
<app-details-tab [metadata]="seriesMetadata"
|
<app-details-tab [metadata]="seriesMetadata"
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue