feat: aggiunta etichetta 'Non Validato' per i canti personalizzati della comunità

- Definita la proprietà 'nonValidato' nell'interfaccia Canto.
- Impostato il flag 'nonValidato: true' sui canti mappati in ComunitaService.
- Creato e integrato il badge grafico rosso soft '.non-validato-badge' sia in HomePage (accanto al titolo del canto) sia in PlayerPage (nell'intestazione del brano), con supporto alla modalità ad alto contrasto.
This commit is contained in:
David Frassi
2026-05-20 12:15:50 +02:00
parent 19993a0051
commit 0bcf5c5de7
7 changed files with 51 additions and 4 deletions
+4 -2
View File
@@ -266,8 +266,10 @@
<div class="content-column" (click)="goToCanto(canto.id)">
<div class="top-row">
<ion-label class="info-section">
<h2 class="outfit-font" style="font-weight: 500; color: var(--ion-color-secondary)">
<span *ngIf="getCommunitySongNumber(canto)" style="color: var(--ion-color-secondary); font-weight: 600; margin-right: 8px; opacity: 0.9;">{{ getCommunitySongNumber(canto) }}</span>{{ canto.titolo }}
<h2 class="outfit-font" style="font-weight: 500; color: var(--ion-color-secondary); display: flex; align-items: center; flex-wrap: wrap; gap: 4px;">
<span *ngIf="getCommunitySongNumber(canto)" style="color: var(--ion-color-secondary); font-weight: 600; margin-right: 8px; opacity: 0.9;">{{ getCommunitySongNumber(canto) }}</span>
<span>{{ canto.titolo }}</span>
<span *ngIf="canto.nonValidato" class="non-validato-badge">Non Validato</span>
</h2>
<p style="color: rgba(255,255,255,0.6); margin-bottom: 2px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;">
<span>{{ canto.autore || 'Autore sconosciuto' }}</span>
+21
View File
@@ -921,3 +921,24 @@ ion-title {
color: rgba(0, 0, 0, 0.5) !important;
}
}
.non-validato-badge {
font-size: 0.65rem;
background: rgba(231, 76, 60, 0.15); /* Soft premium red */
color: #e74c3c;
padding: 1px 6px;
border-radius: 6px;
border: 1px solid rgba(231, 76, 60, 0.3);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 6px;
display: inline-block;
vertical-align: middle;
}
:host-context(body.high-contrast) .non-validato-badge {
background: rgba(231, 76, 60, 0.1) !important;
color: #c0392b !important;
border-color: #c0392b !important;
}
+1
View File
@@ -18,6 +18,7 @@
{{ getCommunitySongNumber(canto()) || canto()?.id_canti }}
</span>
<span class="title-text">{{ canto()?.titolo || 'Player' }}</span>
<span *ngIf="canto()?.nonValidato" class="non-validato-badge">Non Validato</span>
</div>
</ion-title>
<ion-buttons slot="start">
+21
View File
@@ -532,3 +532,24 @@ ion-content.full-screen-content {
border: 1px solid rgba(0, 0, 0, 0.15) !important;
}
}
.non-validato-badge {
font-size: 0.6rem;
background: rgba(231, 76, 60, 0.15); /* Soft premium red */
color: #e74c3c;
padding: 1px 6px;
border-radius: 6px;
border: 1px solid rgba(231, 76, 60, 0.3);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 6px;
display: inline-block;
vertical-align: middle;
}
:host-context(body.high-contrast) .non-validato-badge {
background: rgba(231, 76, 60, 0.1) !important;
color: #c0392b !important;
border-color: #c0392b !important;
}
+1
View File
@@ -12,6 +12,7 @@ export interface Canto {
link_youtube?: string;
id_momenti?: number[];
data_update?: string;
nonValidato?: boolean;
}
export interface Indice {
+2 -1
View File
@@ -158,7 +158,8 @@ export class ComunitaService {
autore: cp.autore || '',
link_youtube: cp.link_youtube || '',
id_momenti: [],
data_update: cp.data_update || ''
data_update: cp.data_update || '',
nonValidato: true
}));
this.comunitaCode.set(trimmedCode);
+1 -1
View File
@@ -1 +1 @@
export const VERSION = '2026.05.20.1128';
export const VERSION = '2026.05.20.1211';