104 lines
3.9 KiB
HTML
104 lines
3.9 KiB
HTML
<ng-container *transloco="let t; read: 'card-item'">
|
|
<div class="card-item-container card {{selected ? 'selected-highlight' : ''}}">
|
|
<div class="overlay" (click)="handleClick($event)">
|
|
@if (total > 0 || suppressArchiveWarning) {
|
|
<app-image height="232.91px" width="160px" [styles]="{'border-radius': '.25rem .25rem 0 0'}" [imageUrl]="imageUrl"></app-image>
|
|
} @else if (total === 0 && !suppressArchiveWarning) {
|
|
<app-image height="232.91px" width="160px" [styles]="{'border-radius': '.25rem .25rem 0 0'}" [imageUrl]="imageService.errorImage"></app-image>
|
|
}
|
|
|
|
<div class="progress-banner">
|
|
@if (read > 0 && read < total && total > 0 && read !== total) {
|
|
<p ngbTooltip="{{((read / total) * 100) | number:'1.0-1'}}% Read" container="body">
|
|
<ngb-progressbar type="primary" height="5px" [value]="read" [max]="total"></ngb-progressbar>
|
|
</p>
|
|
}
|
|
|
|
<span class="download">
|
|
<app-download-indicator [download$]="download$"></app-download-indicator>
|
|
</span>
|
|
</div>
|
|
|
|
@if(total === 0 && !suppressArchiveWarning) {
|
|
<div class="error-banner">
|
|
{{t('cannot-read')}}
|
|
</div>
|
|
}
|
|
|
|
@if (read === 0 && total > 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="{{title}}_{{entity.id}}" [ngModel]="selected" [ngModelOptions]="{standalone: true}">
|
|
</div>
|
|
}
|
|
|
|
@if (count > 1) {
|
|
<div class="count">
|
|
<span class="badge bg-primary">{{count | compactNumber}}</span>
|
|
</div>
|
|
}
|
|
|
|
<div class="card-overlay"></div>
|
|
|
|
@if (showReadButton && !bulkSelectionService.hasSelections()) {
|
|
<div class="series overlay-information">
|
|
<div class="overlay-information--centered">
|
|
<span class="card-title library mx-auto" style="width: auto;">
|
|
<span (click)="clickRead($event)">
|
|
<div>
|
|
<i class="fa-solid fa-book" aria-hidden="true"></i>
|
|
</div>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div class="card-body meta-title">
|
|
@if (subtitleTemplate) {
|
|
<div style="text-align: center">
|
|
<ng-container [ngTemplateOutlet]="subtitleTemplate" [ngTemplateOutletContext]="{ $implicit: entity }"></ng-container>
|
|
</div>
|
|
}
|
|
@if (!suppressLibraryLink && libraryName) {
|
|
<a class="card-title library" [routerLink]="['/library', libraryId]" routerLinkActive="router-link-active">
|
|
{{libraryName | sentenceCase}}
|
|
</a>
|
|
}
|
|
</div>
|
|
@if (title.length > 0 || actions.length > 0) {
|
|
<div class="card-title-container">
|
|
<span>
|
|
@if (showFormat) {
|
|
<span class="card-format">
|
|
<app-series-format [format]="format"></app-series-format>
|
|
</span>
|
|
}
|
|
</span>
|
|
|
|
<span class="card-title" placement="top" id="{{title}}_{{entity.id}}" [ngbTooltip]="tooltipTitle" (click)="handleClick($event)" tabindex="0">
|
|
@if (isPromoted(); as isPromoted) {
|
|
<span class="me-1"><app-promoted-icon [promoted]="isPromoted"></app-promoted-icon></span>
|
|
}
|
|
@if (linkUrl) {
|
|
<a class="dark-exempt btn-icon" [routerLink]="linkUrl">{{title}}</a>
|
|
} @else {
|
|
{{title}}
|
|
}
|
|
</span>
|
|
|
|
<span class="card-actions">
|
|
@if (actions && actions.length > 0) {
|
|
<app-card-actionables [entity]="actionEntity" (actionHandler)="performAction($event)" [inputActions]="actions" [labelBy]="title"></app-card-actionables>
|
|
}
|
|
</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
</ng-container>
|