bisco/azionelab
1
0
Fork 0
generated from bisco/codex-bootstrap
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add editorial homepage and show list layout

Browse Source
This commit is contained in:
bisco
2026-05-05 16:16:46 +02:00
parent 329935dcdd
commit 0c465b53cd
2 changed files with 173 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
frontend/src/app/pages/show-list-page.component.ts
View File

@@ -16,10 +16,10 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
<header class="page-header">
<div>
<p class="eyebrow">Programmazione</p>
<h1>Spettacoli</h1>
<h1>Spettacoli in programma</h1>
</div>
<p class="supporting">
Scopri le produzioni di AzioneLab, apri la scheda di ogni spettacolo e avvicinati alla prenotazione con semplicità.
Una selezione di lavori, attraversamenti scenici e appuntamenti da leggere con calma, immagine dopo immagine, scheda dopo scheda.
</p>
</header>
@@ -59,21 +59,24 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
<div class="show-grid">
@for (show of shows(); track show.slug) {
<mat-card class="show-card">
@if (show.image_url) {
@if (getShowImage(show); as showImage) {
<div class="show-image-wrap">
<img class="show-image" [src]="show.image_url" [alt]="show.title" />
<img class="show-image" [src]="showImage" [alt]="show.title" />
</div>
}
<div class="card-topline">
<span class="card-label">Spettacolo in evidenza</span>
<div class="card-body">
<div class="card-topline">
<span class="card-label">In programma</span>
</div>
<mat-card-title>{{ show.title }}</mat-card-title>
<mat-card-content>
<p>{{ show.summary }}</p>
<p class="show-note">Apri la scheda per vedere le prossime date e i dettagli di prenotazione.</p>
</mat-card-content>
<mat-card-actions>
<a mat-button [routerLink]="['/shows', show.slug]">{{ getShowCta(show) }}</a>
</mat-card-actions>
</div>
<mat-card-title>{{ show.title }}</mat-card-title>
<mat-card-content>
<p>{{ show.summary }}</p>
</mat-card-content>
<mat-card-actions>
<a mat-button [routerLink]="['/shows', show.slug]">Apri scheda</a>
</mat-card-actions>
</mat-card>
}
</div>
@@ -83,21 +86,21 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
styles: [`
.page-header {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 410px);
gap: 24px;
grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
gap: 28px;
align-items: end;
margin-bottom: 28px;
margin-bottom: 40px;
}
.supporting {
margin: 0;
max-width: 34ch;
max-width: 36ch;
}
.show-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.status-panel,
@@ -139,21 +142,19 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
.show-card {
display: flex;
flex-direction: column;
min-height: 360px;
min-height: 520px;
overflow: hidden;
border-radius: var(--azionelab-radius-md);
border: 1px solid var(--azionelab-border);
background: linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(250, 243, 233, 0.94));
background: var(--azionelab-surface);
box-shadow: var(--azionelab-shadow);
}
.show-image-wrap {
aspect-ratio: 15 / 10;
aspect-ratio: 4 / 5;
overflow: hidden;
border-bottom: 1px solid var(--azionelab-border);
background:
linear-gradient(135deg, rgba(207, 71, 51, 0.14), rgba(15, 22, 36, 0.06)),
#f8f1ea;
background: var(--azionelab-bg-strong);
}
.show-image {
@@ -165,23 +166,29 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
}
.show-card:hover .show-image {
transform: scale(1.03);
transform: scale(1.015);
}
.card-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 22px 22px 20px;
}
.card-topline {
padding: 18px 18px 0;
padding: 0 0 12px;
}
.card-label {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 12px;
border-radius: 999px;
background: rgba(143, 51, 45, 0.08);
color: var(--azionelab-accent-strong);
font-size: 0.78rem;
min-height: 24px;
color: var(--azionelab-accent);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.show-card mat-card-content {
@@ -191,28 +198,43 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
.show-card mat-card-title,
.show-card mat-card-content,
.show-card mat-card-actions {
padding-left: 18px;
padding-right: 18px;
padding-left: 0;
padding-right: 0;
}
.show-card mat-card-title {
margin-top: 10px;
margin-top: 0;
font-family: var(--azionelab-serif);
font-size: 1.45rem;
font-weight: 700;
line-height: 1.12;
font-size: 1.85rem;
font-weight: 600;
line-height: 1.04;
}
.show-card p {
color: var(--azionelab-muted);
line-height: 1.6;
line-height: 1.74;
margin: 0;
}
.show-note {
margin-top: 18px !important;
padding-top: 18px;
border-top: 1px solid var(--azionelab-border);
font-size: 0.95rem;
}
.show-card mat-card-actions {
padding-top: 22px;
}
@media (max-width: 860px) {
.page-header {
grid-template-columns: 1fr;
}
.show-grid {
grid-template-columns: 1fr;
}
}
`],
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -233,6 +255,14 @@ export class ShowListPageComponent {
this.loadShows();
}
protected getShowImage(show: ShowListItem): string {
return show.image_url || show.poster_image || '';
}
protected getShowCta(_show: ShowListItem): string {
return 'Scopri lo spettacolo';
}
private loadShows(): void {
this.isLoading.set(true);
this.errorMessage.set('');