Polish 2 (#3555)
Co-authored-by: Robbie Davis <robbie@therobbiedavis.com> Co-authored-by: Fesaa <77553571+Fesaa@users.noreply.github.com>
This commit is contained in:
Joe Milazzo
GitHub
parent
b858729c9e
commit
9565fe7360
57 changed files with 777 additions and 314 deletions
|
|
@ -32,7 +32,7 @@
|
|||
<div class="mb-3" style="width: 100%">
|
||||
<app-setting-switch [title]="t('dont-match-label')" [subtitle]="t('dont-match-tooltip')">
|
||||
<ng-template #switch>
|
||||
<div class="form-check form-switch float-end">
|
||||
<div class="form-check form-switch">
|
||||
<input id="dont-match" type="checkbox" class="form-check-input" formControlName="dontMatch" role="switch">
|
||||
</div>
|
||||
</ng-template>
|
||||
|
|
@ -50,8 +50,7 @@
|
|||
@if (!formGroup.get('dontMatch')?.value) {
|
||||
<app-loading [loading]="isLoading"></app-loading>
|
||||
@for(item of matches; track item.series.name) {
|
||||
<app-match-series-result-item [item]="item" (selected)="selectMatch($event)"></app-match-series-result-item>
|
||||
<div class="setting-section-break"></div>
|
||||
<app-match-series-result-item [item]="item" [isDarkMode]="(themeService.isDarkMode$ | async)!" (selected)="selectMatch($event)"></app-match-series-result-item>
|
||||
} @empty {
|
||||
@if (!isLoading) {
|
||||
{{t('no-results')}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.setting-section-break {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
|
@ -10,11 +10,14 @@ import {ExternalSeriesMatch} from "../../_models/series-detail/external-series-m
|
|||
import {ToastrService} from "ngx-toastr";
|
||||
import {SettingItemComponent} from "../../settings/_components/setting-item/setting-item.component";
|
||||
import {SettingSwitchComponent} from "../../settings/_components/setting-switch/setting-switch.component";
|
||||
import { ThemeService } from 'src/app/_services/theme.service';
|
||||
import { AsyncPipe } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-match-series-modal',
|
||||
standalone: true,
|
||||
imports: [
|
||||
AsyncPipe,
|
||||
TranslocoDirective,
|
||||
MatchSeriesResultItemComponent,
|
||||
LoadingComponent,
|
||||
|
|
@ -31,6 +34,7 @@ export class MatchSeriesModalComponent implements OnInit {
|
|||
private readonly seriesService = inject(SeriesService);
|
||||
private readonly modalService = inject(NgbActiveModal);
|
||||
private readonly toastr = inject(ToastrService);
|
||||
protected readonly themeService = inject(ThemeService);
|
||||
|
||||
@Input({required: true}) series!: Series;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<ng-container *transloco="let t; read:'match-series-result-item'">
|
||||
|
||||
<div class="d-flex p-1 clickable" (click)="selectItem()">
|
||||
<div style="width: 32px" class="me-1">
|
||||
<div class="match-item-container p-3 mt-3 {{isDarkMode ? 'dark' : 'light'}}">
|
||||
<div class="d-flex clickable match-item" (click)="selectItem()">
|
||||
<div class="me-1">
|
||||
@if (item.series.coverUrl) {
|
||||
<app-image class="me-3 search-result" width="32px" [imageUrl]="item.series.coverUrl"></app-image>
|
||||
<app-image class="me-3 search-result" width="100px" [imageUrl]="item.series.coverUrl"></app-image>
|
||||
}
|
||||
</div>
|
||||
<div class="ms-1">
|
||||
<div>{{item.series.name}}</div>
|
||||
<div><span class="title">{{item.series.name}}</span> <span class="me-1 float-end">({{item.matchRating | translocoPercent}})</span></div>
|
||||
<div class="text-muted">
|
||||
@for(synm of item.series.synonyms; track synm; let last = $last) {
|
||||
{{synm}}
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
@if (item.series.summary) {
|
||||
<div>
|
||||
<app-read-more [text]="item.series.summary" [showToggle]="false"></app-read-more>
|
||||
<span class="me-1"><a (click)="$event.stopPropagation()" [href]="item.series.siteUrl" rel="noreferrer noopener" target="_blank">{{t('details')}}</a></span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -30,8 +31,7 @@
|
|||
<span class="ms-2">{{t('updating-metadata-status')}}</span>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="d-flex p-1 justify-content-between">
|
||||
<span class="me-1"><a (click)="$event.stopPropagation()" [href]="item.series.siteUrl" rel="noreferrer noopener" target="_blank">{{t('details')}}</a></span>
|
||||
<div class="d-flex pt-3 justify-content-between">
|
||||
@if ((item.series.volumes || 0) > 0 || (item.series.chapters || 0) > 0) {
|
||||
<span class="me-1">{{t('volume-count', {num: item.series.volumes})}}</span>
|
||||
<span class="me-1">{{t('chapter-count', {num: item.series.chapters})}}</span>
|
||||
|
|
@ -40,11 +40,8 @@
|
|||
}
|
||||
|
||||
<span class="me-1">{{item.series.plusMediaFormat | plusMediaFormat}}</span>
|
||||
<span class="me-1">({{item.matchRating | translocoPercent}})</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
.search-result {
|
||||
img {
|
||||
max-width: 100px;
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.match-item-container {
|
||||
&.dark {
|
||||
background-color: var(--elevation-layer6-dark);
|
||||
}
|
||||
|
||||
&.light {
|
||||
background-color: var(--elevation-layer6);
|
||||
}
|
||||
border-radius: 15px;
|
||||
|
||||
&:hover {
|
||||
&.dark {
|
||||
background-color: var(--elevation-layer11-dark);
|
||||
}
|
||||
|
||||
&.light {
|
||||
background-color: var(--elevation-layer11);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -37,6 +37,7 @@ export class MatchSeriesResultItemComponent {
|
|||
private readonly cdRef = inject(ChangeDetectorRef);
|
||||
|
||||
@Input({required: true}) item!: ExternalSeriesMatch;
|
||||
@Input({required: true}) isDarkMode = true;
|
||||
@Output() selected: EventEmitter<ExternalSeriesMatch> = new EventEmitter();
|
||||
|
||||
isSelected = false;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue