New programming screen

This commit is contained in:
kfj001 committed 2026-06-21 21:55:55 +00:00
1 parent 96d0fef792
commit e627fe3637
24 files changed
+1297 -122

No files matched your search

+37 -21
View File
@@ -12,31 +12,47 @@
@if (schedule$ | async; as state) {
@if (state.loading) {
<div class="schedule-loading">Loading schedule&hellip;</div>
} @else if (state.dayGroups.length === 0) {
<div class="schedule-empty">No programs scheduled. Check back soon!</div>
} @else if (state.shows.length === 0) {
<div class="schedule-empty">No shows scheduled. Check back soon!</div>
} @else {
@for (group of state.dayGroups; track group.day_label) {
<div class="schedule-day-block">
<div class="schedule-day-label">{{ group.day_label }}</div>
<div class="schedule-table">
@for (program of group.programs; track program.id) {
<div class="schedule-row">
<div class="schedule-time">{{ program.time }}</div>
<div class="schedule-divider"></div>
<div class="schedule-details">
<h4 class="schedule-title">{{ program.title }}</h4>
<div class="schedule-meta">
<span class="schedule-host">
<span aria-hidden="true">&#x1F399;</span> {{ program.host }}
<div class="show-list">
@for (show of state.shows; track show.id) {
<article class="show-card">
<!-- Left: Show art badge -->
<div class="show-card-art">
@if (show.show_art_url) {
<img [src]="show.show_art_url" [alt]="show.title + ' art'" class="show-art-img" />
} @else {
<div class="show-art-placeholder">
<span aria-hidden="true">&#x1F3B5;</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(' + show.hero_image_url + ')' : ''">
<div class="show-card-overlay"></div>
<div class="show-card-info">
<h3 class="show-title">{{ show.title }}</h3>
<p class="show-description">{{ show.description }}</p>
<div class="show-meta">
<span class="show-host">
<span aria-hidden="true">&#x1F399;</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>
<span class="schedule-genre">{{ program.genre }}</span>
</div>
}
</div>
</div>
}
</div>
</div>
}
</div>
</article>
}
</div>
}
}
</div>