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

feat(shows): add uploaded show images

Browse Source
This commit is contained in:
bisco
2026-04-30 00:05:23 +02:00
parent b51ca9fdbf
commit ded07346a6
14 changed files with 226 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/app/pages/show-detail-placeholder-page.component.ts
View File

@@ -45,9 +45,16 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
</mat-card>
} @else if (show()) {
<header class="page-header">
<p class="eyebrow">Show detail</p>
<h1>{{ show()!.title }}</h1>
<p class="supporting">{{ show()!.description || show()!.summary }}</p>
<div class="hero-copy">
<p class="eyebrow">Show detail</p>
<h1>{{ show()!.title }}</h1>
<p class="supporting">{{ show()!.description || show()!.summary }}</p>
</div>
@if (show()!.image_url) {
<div class="hero-image-wrap">
<img class="hero-image" [src]="show()!.image_url" [alt]="show()!.title" />
</div>
}
</header>
<section class="section">
@@ -115,9 +122,17 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
}
.page-header {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 420px);
gap: 24px;
align-items: start;
margin-bottom: 28px;
}
.hero-copy {
min-width: 0;
}
.eyebrow {
margin: 0 0 10px;
color: var(--azionelab-accent);
@@ -138,6 +153,24 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
max-width: 64ch;
}
.hero-image-wrap {
overflow: hidden;
border-radius: 12px;
border: 1px solid var(--azionelab-border);
background:
linear-gradient(135deg, rgba(207, 71, 51, 0.16), rgba(15, 22, 36, 0.08)),
#f8f1ea;
box-shadow: var(--azionelab-shadow);
aspect-ratio: 4 / 5;
}
.hero-image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.section {
display: grid;
gap: 20px;
@@ -231,6 +264,10 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
}
@media (max-width: 860px) {
.page-header {
grid-template-columns: 1fr;
}
.section-heading {
align-items: flex-start;
flex-direction: column;

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

@@ -59,6 +59,11 @@ 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) {
<div class="show-image-wrap">
<img class="show-image" [src]="show.image_url" [alt]="show.title" />
</div>
}
<mat-card-title>{{ show.title }}</mat-card-title>
<mat-card-content>
<p>{{ show.summary }}</p>
@@ -157,6 +162,22 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
box-shadow: var(--azionelab-shadow);
}
.show-image-wrap {
aspect-ratio: 16 / 10;
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;
}
.show-image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.show-card mat-card-content {
flex: 1;
}