robot
b7e67fa244
CI Pipeline / backend-test (pull_request) Successful in 4m38s
CI Pipeline / frontend-test (pull_request) Successful in 31s
CI Pipeline / frontend-build (pull_request) Successful in 30s
CI Pipeline / backend-lint (pull_request) Successful in 9s
CI Pipeline / quality-gate (pull_request) Successful in 1s
Each public page now has exactly one <h1> element for proper semantic heading hierarchy: - About: 'About [Station Name]' (h1), with subsection h2s for History/Team - Schedule: 'Program Schedule' (h1) - Events: 'Upcoming Events' (h1) - Contact: 'Get in Touch' (h1) The home page hero component already used <h1>, as did login and admin.
58 lines
2.5 KiB
HTML
58 lines
2.5 KiB
HTML
<section class="schedule">
|
|
<div class="container">
|
|
<div class="schedule-header">
|
|
<img [src]="resolveImageUrl(config().logo_url)" alt="" class="schedule-flower" aria-hidden="true">
|
|
<h1>Program <span class="text-accent">Schedule</span></h1>
|
|
<p class="section-intro">{{ config().schedule_intro }}</p>
|
|
</div>
|
|
|
|
@if (schedule$ | async; as state) {
|
|
@if (state.loading) {
|
|
<div class="schedule-loading">Loading schedule…</div>
|
|
} @else if (state.shows.length === 0) {
|
|
<div class="schedule-empty">No shows scheduled. Check back soon!</div>
|
|
} @else {
|
|
<div class="show-list">
|
|
@for (show of state.shows; track show.id) {
|
|
<article class="show-card" [class.expanded]="expandedShowId === show.id" (click)="toggleShow(show.id)">
|
|
<!-- Left: Show art badge -->
|
|
<div class="show-card-art">
|
|
@if (show.show_art_url) {
|
|
<img [src]="resolveAsset(show.show_art_url)" [alt]="show.title + ' art'" class="show-art-img" />
|
|
} @else {
|
|
<div class="show-art-placeholder">
|
|
<span aria-hidden="true">🎵</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Right: Hero-backed info area -->
|
|
<div class="show-card-right" [class.has-hero]="show.hero_image_url" [style.background-image]="show.hero_image_url ? 'url(' + resolveAsset(show.hero_image_url) + ')' : ''">
|
|
<div class="show-card-overlay"></div>
|
|
<div class="show-card-info">
|
|
<span class="show-card-chevron" aria-hidden="true">▶</span>
|
|
<h3 class="show-title">{{ show.title }}</h3>
|
|
<p class="show-description" [class.expanded]="expandedShowId === show.id">{{ show.description }}</p>
|
|
<div class="show-meta">
|
|
<span class="show-host">
|
|
<span aria-hidden="true">🎙</span> {{ show.host }}
|
|
</span>
|
|
<span class="show-genre">{{ show.genre }}</span>
|
|
</div>
|
|
<div class="show-schedule-slots">
|
|
@for (slot of show.schedules | sortSchedules; track slot.id) {
|
|
<span class="slot-tag">
|
|
{{ slot.day_label }} {{ slot.time }}
|
|
</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
}
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
</section>
|