Polish Round 2 (#2411)

UI/Web/src/app/cards/card-item/card-item.component.html

@@ -9,7 +9,7 @@
       </ng-container>
 
       <div class="progress-banner">
-        <p *ngIf="read < total && total > 0 && read !== total" ngbTooltip="{{((read / total) * 100) | number:'1.0-1'}}% Read">
+        <p *ngIf="read > 0 && read < total && total > 0 && read !== total" ngbTooltip="{{((read / total) * 100) | number:'1.0-1'}}% Read">
           <ngb-progressbar type="primary" height="5px" [value]="read" [max]="total"></ngb-progressbar>
         </p>
         <span class="download">

UI/Web/src/app/cards/card-item/card-item.component.scss

@@ -38,6 +38,7 @@ $image-width: 160px;
     display: block;
     margin-top: 2px;
     margin-bottom: 0px;
+    text-align: center;
 }
 
 .selected-highlight {

UI/Web/src/app/cards/card-item/card-item.component.ts

@@ -229,7 +229,7 @@ export class CardItemComponent implements OnInit {
 
       if (nextDate.expectedDate) {
         const utcPipe = new UtcToLocalTimePipe();
-        this.title = utcPipe.transform(nextDate.expectedDate);
+        this.title = utcPipe.transform(nextDate.expectedDate, 'shortDate');
       }
 
       this.cdRef.markForCheck();

UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.html

@@ -13,11 +13,13 @@
 
               <div class="d-flex justify-content-center">
                 <div class="d-flex justify-content-evenly">
-                  <a style="padding-right:0px" href="javascript:void(0)" (click)="changeMode('url')"><span class="phone-hidden">Enter a </span>Url</a>
+                  <a class="pe-0" href="javascript:void(0)" (click)="changeMode('url')">
+                    <span class="phone-hidden">{{t('enter-an-url-pre-title', {url: ''})}}</span>{{t('url')}}
+                  </a>
                   <span class="ps-1 pe-1">•</span>
-                  <span style="padding-right:0px" href="javascript:void(0)">{{t('drag-n-drop')}}</span>
-                  <span class="ps-1 pe-1" style="padding-right:0px">•</span>
-                  <a style="padding-right:0px" href="javascript:void(0)" (click)="openFileSelector()">{{t('upload')}}<span class="phone-hidden"> {{t('upload-continued')}}</span></a>
+                  <span class="pe-0" href="javascript:void(0)">{{t('drag-n-drop')}}</span>
+                  <span class="ps-1 pe-1">•</span>
+                  <a class="pe-0" href="javascript:void(0)" (click)="openFileSelector()">{{t('upload')}}<span class="phone-hidden"> {{t('upload-continued')}}</span></a>
                 </div>
               </div>
             </div>

UI/Web/src/app/cards/cover-image-chooser/cover-image-chooser.component.ts

@@ -1,4 +1,14 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component, DestroyRef,
+  EventEmitter,
+  inject,
+  Inject,
+  Input,
+  OnInit,
+  Output
+} from '@angular/core';
 import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {NgxFileDropEntry, FileSystemFileEntry, NgxFileDropModule} from 'ngx-file-drop';
 import { fromEvent, Subject } from 'rxjs';
@@ -25,7 +35,14 @@ import {translate, TranslocoModule} from "@ngneat/transloco";
   styleUrls: ['./cover-image-chooser.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CoverImageChooserComponent implements OnInit, OnDestroy {
+export class CoverImageChooserComponent implements OnInit {
+
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly cdRef = inject(ChangeDetectorRef);
+  public readonly imageService = inject(ImageService);
+  public readonly fb = inject(FormBuilder);
+  public readonly toastr = inject(ToastrService);
+  public readonly uploadService = inject(UploadService);
 
   /**
    * If buttons show under images to allow immediate selection of cover images.
@@ -70,10 +87,8 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
   acceptableExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.webp'].join(',');
 
   mode: 'file' | 'url' | 'all' = 'all';
-  private readonly onDestroy = new Subject<void>();
 
-  constructor(public imageService: ImageService, private fb: FormBuilder, private toastr: ToastrService, private uploadService: UploadService,
-    @Inject(DOCUMENT) private document: Document, private readonly cdRef: ChangeDetectorRef) { }
+  constructor(@Inject(DOCUMENT) private document: Document) { }
 
   ngOnInit(): void {
     this.form = this.fb.group({
@@ -83,10 +98,6 @@ export class CoverImageChooserComponent implements OnInit, OnDestroy {
     this.cdRef.markForCheck();
   }
 
-  ngOnDestroy() {
-    this.onDestroy.next();
-    this.onDestroy.complete();
-  }
 
   /**
    * Generates a base64 encoding for an Image. Used in manual file upload flow.

UI/Web/src/app/cards/series-info-cards/series-info-cards.component.ts

@@ -46,6 +46,14 @@ import {TranslocoDirective} from "@ngneat/transloco";
 })
 export class SeriesInfoCardsComponent implements OnInit, OnChanges {
 
+  private readonly destroyRef = inject(DestroyRef);
+  public readonly utilityService = inject(UtilityService);
+  private readonly readerService = inject(ReaderService);
+  private readonly cdRef = inject(ChangeDetectorRef);
+  private readonly messageHub = inject(MessageHubService);
+  public readonly accountService = inject(AccountService);
+  private readonly scrobbleService = inject(ScrobblingService);
+
   @Input({required: true}) series!: Series;
   @Input({required: true}) seriesMetadata!: SeriesMetadata;
   @Input() hasReadingProgress: boolean = false;
@@ -59,19 +67,13 @@ export class SeriesInfoCardsComponent implements OnInit, OnChanges {
   readingTime: HourEstimateRange = {avgHours: 0, maxHours: 0, minHours: 0};
   isScrobbling: boolean = true;
   libraryAllowsScrobbling: boolean = true;
-  private readonly destroyRef = inject(DestroyRef);
 
-  get MangaFormat() {
-    return MangaFormat;
-  }
 
-  get FilterField() {
-    return FilterField;
-  }
+  protected readonly MangaFormat = MangaFormat;
+  protected readonly FilterField = FilterField;
 
-  constructor(public utilityService: UtilityService, private readerService: ReaderService,
-              private readonly cdRef: ChangeDetectorRef, private messageHub: MessageHubService,
-              public accountService: AccountService, private scrobbleService: ScrobblingService) {
+
+  constructor() {
       // Listen for progress events and re-calculate getTimeLeft
       this.messageHub.messages$.pipe(filter(event => event.event === EVENTS.UserProgressUpdate),
                                     map(evt => evt.payload as UserProgressUpdateEvent),