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.
43 lines
1.7 KiB
HTML
43 lines
1.7 KiB
HTML
<section class="events">
|
|
<div class="container">
|
|
<div class="events-header">
|
|
<img src="svg/small-flower.svg" alt="" class="events-flower" aria-hidden="true">
|
|
<h1>Upcoming <span class="text-accent">Events</span></h1>
|
|
<p class="section-intro">{{ config().events_intro }}</p>
|
|
</div>
|
|
|
|
@if (events$ | async; as state) {
|
|
@if (state.loading) {
|
|
<div class="schedule-loading">Loading events…</div>
|
|
} @else if (state.upcomingEvents.length === 0) {
|
|
<div class="schedule-empty">No upcoming events — check back later!</div>
|
|
} @else {
|
|
<div class="events-list">
|
|
<div class="event-card" *ngFor="let event of state.upcomingEvents">
|
|
<div class="event-date">
|
|
<span class="event-month">{{ event.date | date:'MMM' }}</span>
|
|
<span class="event-day">{{ event.date | date:'d' }}</span>
|
|
<span class="event-year">{{ event.date | date:'yyyy' }}</span>
|
|
</div>
|
|
<div class="event-content">
|
|
<h3>{{ event.title }}</h3>
|
|
<p>{{ event.description }}</p>
|
|
<div class="event-meta">
|
|
<span class="event-location">
|
|
<span aria-hidden="true">📍</span> {{ event.location }}
|
|
</span>
|
|
@if (event.rsvp_url) {
|
|
<a [href]="event.rsvp_url" class="event-rsvp" target="_blank" rel="noopener">RSVP →</a>
|
|
} @else {
|
|
<a href="#" class="event-rsvp">Learn More →</a>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="event-icon" aria-hidden="true">{{ event.icon }}</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
</section>
|