benjamin/wgenerator
1
0
Fork 0
Code Actions Releases Activity

fix mobile buttons

Browse Source
This commit is contained in:
benjamin
2026-04-27 22:34:19 +02:00
parent 30115da841
commit e4bbe6e75c
9 changed files with 70 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/app/modules/shows/dialog/report-dialog/report-dialog.component.html
View File

@@ -1,5 +1,6 @@
<div mat-dialog-content>
<p>Bitte melde die in dieser Veranstaltung verwendeten CCLI-Titel. Die Meldung ist Teil der CCLI-Lizenz und sorgt dafür, dass Songwriter und Verlage korrekt vergütet werden.</p>
<p>Bitte melde die in dieser Veranstaltung verwendeten CCLI-Titel. Die Meldung ist Teil der CCLI-Lizenz und sorgt
dafür, dass Songwriter und Verlage korrekt vergütet werden.</p>
<p>
Die Meldung erfolgt über
<a [href]="reportingUrl" rel="noreferrer" target="_blank">{{ reportingUrl }}</a>.
@@ -12,29 +13,29 @@
</div>
@for (song of data.songs; track song.title + song.ccliNumber) {
<div class="list-item">
<div>{{ song.title }}</div>
<div class="number-cell">
<span>{{ song.ccliNumber }}</span>
<a
(click)="markOpened(song.ccliNumber)"
[attr.aria-label]="'CCLI-Titel melden: ' + song.title"
[href]="getSongReportingUrl(song.ccliNumber)"
rel="noreferrer"
target="_blank"
class="btn-icon report-link"
>
<fa-icon [icon]="faOpen"></fa-icon>
</a>
@if (wasOpened(song.ccliNumber)) {
<fa-icon [icon]="faCheck" class="opened-check"></fa-icon>
}
<div class="list-item">
<div>{{ song.title }}</div>
<div class="number-cell">
<span>{{ song.ccliNumber }}</span>
<a
(click)="markOpened(song.ccliNumber)"
[attr.aria-label]="'CCLI-Titel melden: ' + song.title"
[href]="getSongReportingUrl(song.ccliNumber)"
rel="noreferrer"
target="_blank"
class="btn-icon report-link"
>
<fa-icon [icon]="faOpen"></fa-icon>
</a>
@if (wasOpened(song.ccliNumber)) {
<fa-icon [icon]="faCheck" class="opened-check"></fa-icon>
}
</div>
</div>
</div>
}
</div>
</div>
<div mat-dialog-actions>
<button [mat-dialog-close]="false" mat-button>Abbrechen</button>
<button [mat-dialog-close]="true" cdkFocusInitial mat-button>Alle CCLI-Titel wurden gemeldet</button>
</div>
<app-button-row>
<app-button (click)="dialogRef.close(false)" [icon]="faClose">Abbrechen</app-button>
<app-button (click)="dialogRef.close(true)" [icon]="faReport">Alle CCLI-Titel wurden gemeldet</app-button>
</app-button-row>

4
src/app/modules/shows/dialog/report-dialog/report-dialog.component.less
View File

@@ -72,3 +72,7 @@
justify-content: flex-start;
}
}
app-button-row {
margin: 0 var(--gap-l) var(--gap-l);
}

14
src/app/modules/shows/dialog/report-dialog/report-dialog.component.ts
View File

@@ -1,8 +1,9 @@
import {Component, inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
import {MatButton} from '@angular/material/button';
import {MAT_DIALOG_DATA, MatDialogContent, MatDialogRef} from '@angular/material/dialog';
import {FaIconComponent} from '@fortawesome/angular-fontawesome';
import {faArrowUpRightFromSquare, faCheck} from '@fortawesome/free-solid-svg-icons';
import {faArrowUpRightFromSquare, faCheck, faCompactDisc, faXmark} from '@fortawesome/free-solid-svg-icons';
import {ButtonRowComponent} from '../../../../widget-modules/components/button-row/button-row.component';
import {ButtonComponent} from '../../../../widget-modules/components/button/button.component';
export interface ReportDialogSong {
title: string;
@@ -15,7 +16,7 @@ export interface ReportDialogData {
@Component({
selector: 'app-report-dialog',
imports: [MatButton, MatDialogActions, MatDialogContent, MatDialogClose, FaIconComponent],
imports: [MatDialogContent, FaIconComponent, ButtonRowComponent, ButtonComponent],
templateUrl: './report-dialog.component.html',
styleUrl: './report-dialog.component.less',
standalone: true,
@@ -25,6 +26,11 @@ export class ReportDialogComponent {
public readonly faOpen = faArrowUpRightFromSquare;
public readonly faCheck = faCheck;
public data = inject<ReportDialogData>(MAT_DIALOG_DATA);
public dialogRef = inject(MatDialogRef<ReportDialogComponent>);
public faReport = faCompactDisc;
public faClose = faXmark;
private readonly openedNumbers = new Set<string>();
public getSongReportingUrl(ccliNumber: string): string {