132 lines
6.7 KiB
HTML
132 lines
6.7 KiB
HTML
<ng-container *transloco="let t; read: 'series-metadata-detail'">
|
|
<div class="row g-0 mt-2 mb-2">
|
|
<app-read-more [text]="seriesSummary" [maxLength]="250"></app-read-more>
|
|
</div>
|
|
|
|
|
|
<app-metadata-detail [tags]="['']" [libraryId]="series.libraryId" heading="Ratings">
|
|
<ng-template #itemTemplate let-item>
|
|
<app-external-rating [seriesId]="series.id" [userRating]="series.userRating" [hasUserRated]="series.hasUserRated" [libraryType]="libraryType"></app-external-rating>
|
|
</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
|
|
<ng-container *ngIf="WebLinks as links">
|
|
<app-metadata-detail [tags]="links" [libraryId]="series.libraryId" [heading]="t('links-title')">
|
|
<ng-template #itemTemplate let-item>
|
|
<a class="col me-1" [href]="item | safeHtml" target="_blank" rel="noopener noreferrer" [title]="item">
|
|
<app-image classes="favicon" width="24px" height="24px"
|
|
[imageUrl]="imageService.getWebLinkImage(item)"
|
|
[errorImage]="imageService.errorWebLinkImage"/>
|
|
</a>
|
|
</ng-template>
|
|
</app-metadata-detail>
|
|
</ng-container>
|
|
|
|
|
|
<app-metadata-detail [tags]="seriesMetadata.genres" [libraryId]="series.libraryId" [queryParam]="FilterField.Genres" [heading]="t('genres-title')">
|
|
<ng-template #titleTemplate let-item>{{item.title}}</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
<app-metadata-detail [tags]="seriesMetadata.tags" [libraryId]="series.libraryId" [queryParam]="FilterField.Tags" [heading]="t('tags-title')">
|
|
<ng-template #titleTemplate let-item>{{item.title}}</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
<app-metadata-detail [tags]="seriesMetadata.collectionTags" [libraryId]="series.libraryId" [heading]="t('collections-title')">
|
|
<ng-template #itemTemplate let-item>
|
|
<app-tag-badge a11y-click="13,32" class="col-auto" (click)="navigate('collections', item.id)" [selectionMode]="TagBadgeCursor.Clickable">
|
|
{{item.title}}
|
|
</app-tag-badge>
|
|
</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
|
|
<app-metadata-detail [tags]="readingLists" [libraryId]="series.libraryId" [heading]="t('reading-lists-title')">
|
|
<ng-template #itemTemplate let-item>
|
|
<app-tag-badge a11y-click="13,32" class="col-auto" (click)="navigate('lists', item.id)" [selectionMode]="TagBadgeCursor.Clickable">
|
|
<span *ngIf="item.promoted">
|
|
<i class="fa fa-angle-double-up" aria-hidden="true"></i>
|
|
<span class="visually-hidden">({{t('promoted')}})</span>
|
|
</span>
|
|
{{item.title}}
|
|
</app-tag-badge>
|
|
</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
|
|
<app-metadata-detail [tags]="seriesMetadata.writers" [libraryId]="series.libraryId" [queryParam]="FilterField.Writers" [heading]="t('writers-title')">
|
|
<ng-template #itemTemplate let-item>
|
|
<app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
|
|
</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
|
|
<div #collapse="ngbCollapse" [(ngbCollapse)]="isCollapsed" id="extended-series-metadata">
|
|
<app-metadata-detail [tags]="seriesMetadata.coverArtists" [libraryId]="series.libraryId" [queryParam]="FilterField.CoverArtist" [heading]="t('cover-artists-title')">
|
|
<ng-template #itemTemplate let-item>
|
|
<app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
|
|
</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
<app-metadata-detail [tags]="seriesMetadata.characters" [libraryId]="series.libraryId" [queryParam]="FilterField.Characters" [heading]="t('characters-title')">
|
|
<ng-template #itemTemplate let-item>
|
|
<app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
|
|
</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
<app-metadata-detail [tags]="seriesMetadata.colorists" [libraryId]="series.libraryId" [queryParam]="FilterField.Colorist" [heading]="t('colorists-title')">
|
|
<ng-template #itemTemplate let-item>
|
|
<app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
|
|
</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
<app-metadata-detail [tags]="seriesMetadata.editors" [libraryId]="series.libraryId" [queryParam]="FilterField.Editor" [heading]="t('editors-title')">
|
|
<ng-template #itemTemplate let-item>
|
|
<app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
|
|
</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
<app-metadata-detail [tags]="seriesMetadata.inkers" [libraryId]="series.libraryId" [queryParam]="FilterField.Inker" [heading]="t('inkers-title')">
|
|
<ng-template #itemTemplate let-item>
|
|
<app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
|
|
</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
<app-metadata-detail [tags]="seriesMetadata.letterers" [libraryId]="series.libraryId" [queryParam]="FilterField.Letterer" [heading]="t('letterers-title')">
|
|
<ng-template #itemTemplate let-item>
|
|
<app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
|
|
</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
<app-metadata-detail [tags]="seriesMetadata.translators" [libraryId]="series.libraryId" [queryParam]="FilterField.Translators" [heading]="t('translators-title')">
|
|
<ng-template #itemTemplate let-item>
|
|
<app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
|
|
</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
<app-metadata-detail [tags]="seriesMetadata.pencillers" [libraryId]="series.libraryId" [queryParam]="FilterField.Penciller" [heading]="t('pencillers-title')">
|
|
<ng-template #itemTemplate let-item>
|
|
<app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
|
|
</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
<app-metadata-detail [tags]="seriesMetadata.publishers" [libraryId]="series.libraryId" [queryParam]="FilterField.Publisher" [heading]="t('publishers-title')">
|
|
<ng-template #itemTemplate let-item>
|
|
<app-person-badge a11y-click="13,32" class="col-auto" [person]="item"></app-person-badge>
|
|
</ng-template>
|
|
</app-metadata-detail>
|
|
|
|
</div>
|
|
|
|
<div class="row g-0">
|
|
<hr class="col mt-3" *ngIf="hasExtendedProperties" >
|
|
<a [class.hidden]="hasExtendedProperties" *ngIf="hasExtendedProperties"
|
|
class="col col-md-auto align-self-end read-more-link" (click)="toggleView()">
|
|
<i aria-hidden="true" class="fa fa-caret-{{isCollapsed ? 'down' : 'up'}} me-1" aria-controls="extended-series-metadata"></i>
|
|
{{isCollapsed ? t('see-more') : t('see-less')}}
|
|
</a>
|
|
</div>
|
|
|
|
<app-series-info-cards [series]="series" [seriesMetadata]="seriesMetadata" (goTo)="handleGoTo($event)" [hasReadingProgress]="hasReadingProgress"></app-series-info-cards>
|
|
|
|
</ng-container>
|