734e299f7f
* Switched Ratings to a float system. Allow rating something as 0%. Allow half step ratings. Added new css variable: --rating-star-color. By default, N/A will show for series that have no ratings. N/A ratings are not included in overall rating calculations. * Show extended entity properties on desktop for list view cards. * Refactored the code for series metadata detail to use a re-usable component to reduce the copy/paste for the Genres tags like sections. * List Item will show extended properties about a chapter/volume, like weblinks on Desktop viewports. * Refactored even further so all of series detail uses the same component code. Tweaked the spacing on the series detail area. List items will now show Characters and Tags which are helpful for more Hentai related content. * Fixed a bug with removing something from "OnDeckRemoval" table when something was read.
121 lines
6.2 KiB
HTML
121 lines
6.2 KiB
HTML
|
|
<div class="mt-4 mb-3">
|
|
<div class="row g-0" *ngIf="chapterMetadata ">
|
|
<!-- Tags and Characters are used a lot of Hentai and Doujinshi type content, so showing in list item has value add on first glance -->
|
|
<app-metadata-detail [tags]="chapterMetadata.tags" [libraryId]="libraryId" [queryParam]="FilterQueryParam.Tags" heading="Tags">
|
|
<ng-template #titleTemplate let-item>{{item.title}}</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
<app-metadata-detail [tags]="chapterMetadata.characters" [libraryId]="libraryId" [queryParam]="FilterQueryParam.Character" heading="Characters">
|
|
<ng-template #titleTemplate let-item>{{item.title}}</ng-template>
|
|
</app-metadata-detail>
|
|
</div>
|
|
|
|
<div class="row g-0">
|
|
<ng-container *ngIf="chapter !== undefined && chapter.releaseDate && (chapter.releaseDate | date: 'shortDate') !== '1/1/01'">
|
|
<div class="col-auto mb-2">
|
|
<app-icon-and-title label="Release Date" [clickable]="false" fontClasses="fa-regular fa-calendar" title="Release">
|
|
{{chapter.releaseDate | date:'shortDate' | defaultDate}}
|
|
</app-icon-and-title>
|
|
</div>
|
|
<div class="vr d-none d-lg-block m-2"></div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="chapter.ageRating !== AgeRating.Unknown">
|
|
<div class="col-auto mb-2">
|
|
<app-icon-and-title label="Age Rating" [clickable]="false" fontClasses="fas fa-eye" title="Age Rating">
|
|
{{chapter.ageRating | ageRating | async}}
|
|
</app-icon-and-title>
|
|
</div>
|
|
<div class="vr d-none d-lg-block m-2"></div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="totalPages > 0">
|
|
<div class="col-auto mb-2">
|
|
<app-icon-and-title label="Length" [clickable]="false" fontClasses="fa-regular fa-file-lines" title="Pages">
|
|
{{totalPages | compactNumber}} Pages
|
|
</app-icon-and-title>
|
|
</div>
|
|
<div class="vr d-none d-lg-block m-2"></div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="chapter.files[0].format === MangaFormat.EPUB && totalWordCount > 0">
|
|
<div class="col-auto mb-2">
|
|
<app-icon-and-title label="Length" [clickable]="false" fontClasses="fa-solid fa-book-open">
|
|
{{totalWordCount | compactNumber}} Words
|
|
</app-icon-and-title>
|
|
</div>
|
|
<div class="vr d-none d-lg-block m-2"></div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="chapter.files[0].format === MangaFormat.EPUB && totalWordCount > 0 || chapter.files[0].format !== MangaFormat.EPUB">
|
|
<div class="col-auto mb-2">
|
|
<app-icon-and-title label="Read Time" [clickable]="false" fontClasses="fa-regular fa-clock">
|
|
<ng-container *ngIf="readingTime.maxHours === 0 || readingTime.minHours === 0; else normalReadTime"><1 Hour</ng-container>
|
|
<ng-template #normalReadTime>
|
|
{{readingTime.minHours}}{{readingTime.maxHours !== readingTime.minHours ? ('-' + readingTime.maxHours) : ''}} Hour{{readingTime.minHours > 1 ? 's' : ''}}
|
|
</ng-template>
|
|
</app-icon-and-title>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="showExtendedProperties && chapter.created && chapter.created !== '' && (chapter.created | date: 'shortDate') !== '1/1/01'">
|
|
<div class="vr d-none d-lg-block m-2"></div>
|
|
<div class="col-auto">
|
|
<app-icon-and-title label="Date Added" [clickable]="false" fontClasses="fa-solid fa-file-import" title="Date Added">
|
|
{{chapter.created | date:'short' | defaultDate}}
|
|
</app-icon-and-title>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="showExtendedProperties && size > 0">
|
|
<div class="vr d-none d-lg-block m-2"></div>
|
|
<div class="col-auto">
|
|
<app-icon-and-title label="Size" [clickable]="false" fontClasses="fa-solid fa-scale-unbalanced" title="ID">
|
|
{{size | bytes}}
|
|
</app-icon-and-title>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="showExtendedProperties">
|
|
<div class="vr d-none d-lg-block m-2"></div>
|
|
<div class="col-auto">
|
|
<app-icon-and-title label="ID" [clickable]="false" fontClasses="fa-solid fa-fingerprint" title="ID">
|
|
{{entity.id}}
|
|
</app-icon-and-title>
|
|
</div>
|
|
<ng-container *ngIf="WebLinks.length > 0">
|
|
<div class="vr d-none d-lg-block m-2"></div>
|
|
<div class="col-auto">
|
|
<app-icon-and-title label="Links" [clickable]="false" fontClasses="fa-solid fa-link" title="Links">
|
|
<a class="me-1" [href]="link | safeHtml" *ngFor="let link of WebLinks" target="_blank" rel="noopener noreferrer" [title]="link">
|
|
<img width="24" height="24" #img class="lazyload img-placeholder"
|
|
src="data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
|
[attr.data-src]="imageService.getWebLinkImage(link)"
|
|
(error)="imageService.updateErroredWebLinkImage($event)"
|
|
aria-hidden="true" alt="">
|
|
</a>
|
|
</app-icon-and-title>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="chapter.isbn.length > 0">
|
|
<div class="vr d-none d-lg-block m-2"></div>
|
|
<div class="col-auto">
|
|
<app-icon-and-title label="ISBN" [clickable]="false" fontClasses="fa-solid fa-barcode" title="ISBN">
|
|
{{chapter.isbn}}
|
|
</app-icon-and-title>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="(chapter.lastReadingProgress | date: 'shortDate') !== '1/1/01'">
|
|
<div class="vr d-none d-lg-block m-2"></div>
|
|
<div class="col-auto">
|
|
<app-icon-and-title label="Last Read" [clickable]="false" fontClasses="fa-regular fa-clock" [ngbTooltip]="chapter.lastReadingProgress | date: 'medium'">
|
|
{{chapter.lastReadingProgress | date: 'shortDate'}}
|
|
</app-icon-and-title>
|
|
</div>
|
|
</ng-container>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|