Co-authored-by: Andre Smith <Hobogrammer@users.noreply.github.com>
This commit is contained in:
Joe Milazzo 2023-11-28 16:00:04 -06:00 committed by GitHub
parent 565a93f2d2
commit 915bf13a7c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 606 additions and 342 deletions

View file

@ -3,11 +3,12 @@
<app-image borderRadius=".25rem .25rem 0 0" height="230px" width="158px" classes="extreme-blur" [imageUrl]="imageUrl"></app-image>
<div class="card-overlay"></div>
<ng-container *ngIf="overlayInformation | safeHtml as info">
<div class="overlay-information overlay-information--centered" *ngIf="info !== '' || info !== undefined">
<ng-container *ngIf="entity.title | safeHtml as info">
<div class="overlay-information overlay-information--centered" *ngIf="info !== ''">
<div class="position-relative">
<span class="card-title library mx-auto" style="width: auto;">
<i class="fa-regular fa-clock mb-2" style="font-size: 26px" aria-hidden="true"></i>
<div class="upcoming-header">Upcoming</div>
<span [innerHTML]="info"></span>
</span>
</div>

View file

@ -6,6 +6,10 @@
background-color: transparent;
}
.upcoming-header {
font-size: 16px;
}
.card-title {
width: 146px;
}

View file

@ -1,4 +1,4 @@
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input} from '@angular/core';
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input, OnInit} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ImageComponent} from "../../shared/image/image.component";
import {NextExpectedChapter} from "../../_models/series-detail/next-expected-chapter";
@ -14,7 +14,7 @@ import {translate} from "@ngneat/transloco";
styleUrl: './next-expected-card.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class NextExpectedCardComponent {
export class NextExpectedCardComponent implements OnInit {
private readonly cdRef = inject(ChangeDetectorRef);
/**
@ -25,19 +25,9 @@ export class NextExpectedCardComponent {
* This is the entity we are representing. It will be returned if an action is executed.
*/
@Input({required: true}) entity!: NextExpectedChapter;
/**
* Additional information to show on the overlay area. Will always render.
*/
@Input() overlayInformation: string = '';
title: string = '';
ngOnInit(): void {
const tokens = this.entity.title.split(':');
this.overlayInformation = `<div>${tokens[0]}</div><div>${tokens[1]}</div>`;
if (this.entity.expectedDate) {
const utcPipe = new UtcToLocalTimePipe();
this.title = translate('next-expected-card.title', {date: utcPipe.transform(this.entity.expectedDate, 'shortDate')});