themes-lcars/templates/overrides/lcars/event-list.ninjatpl
Alex Dunmow 885dd372e7 feat(lcars): Wave A theme rebuild — sci-fi podcast persona (WO-TF-020)
Full LCARS library-computer interface for a sci-fi podcast/media outfit.
Codeless .bnp. Re-skins every mandatory builtin inside LCARS framing and
ships the full Wave A surface.

- 49 mandatory template overrides (chrome, marketing, primitives, commerce,
  blog family, auth, page-suggestions), field-faithful re-skins of the frozen
  builtin defaults; identity carried by the lcars-* class system.
- 8 page templates (default+sidebar rail, full-width, full-display, landing,
  article, blog-index, contact, auth) with elbow-frame chrome.
- 4 persona blocks: episode_console, crew_roster, stardate_log,
  transmission_status. Legacy lcars_header/sidebar/panel removed (now overrides
  + page chrome).
- 5 dual-mode presets (canonical black + daylight-ops cream), all 19 tokens.
- Bundled Antonio + Share Tech Mono (OFL); email-safe LCARS wrapper.
- Seed "Subspace Signal": home, about, 3 episodes+articles, contact
  (hail_signals table + row_inserted email-admins workflow), login.
- GO BIG motion: dependency-free canvas panel-sweep on the hero (lazy-init,
  reduced-motion static frame, no-JS fallback).

Build + check-safety green. Visual UNVERIFIED until Wave B. Known frozen-cms
limits (contract §11 auth/404 non-dispatch, §12 provider-backed empty lists)
authored faithfully.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-05 12:22:22 +08:00

32 lines
3.6 KiB
Plaintext

{# event-list override — dates shown VERBATIM in each event's own timezone (never converted); list rows or card grid. #}
<section class="lcars-section {{ class }}"><div class="lcars-content-well">
{% if heading %}<h2 class="lcars-heading" style="font-size:clamp(1.75rem, 3vw, 2.25rem);margin:0 0 0.75rem 0;"><span class="lcars-heading-h2-accent">{{ heading }}</span></h2>{% endif %}
{% if intro %}<p class="lcars-lede" style="max-width:60ch;margin:0 0 2.5rem 0;color:hsl(var(--muted-foreground));">{{ intro }}</p>{% endif %}
{% if layout == "cards" %}
<div class="lcars-grid lcars-grid-3" style="margin-top:2.5rem;display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:1.5rem;">
{% for event in events %}{% if not (hidePast and event.past) %}<article class="lcars-card" style="display:flex;flex-direction:column;padding:0;overflow:hidden;{% if event.past %}opacity:0.6;{% endif %}">
{% if event.media %}<div class="lcars-media-frame" style="aspect-ratio:16 / 9;overflow:hidden;border-bottom:1px solid hsl(var(--border));">{% img event.media alt=event.title|default:"" class="lcars-event-media" %}</div>{% endif %}
<div style="display:flex;flex-direction:column;gap:0.5rem;padding:1.25rem;flex:1;">
<div class="lcars-mono numeric-tabular" style="font-size:0.8125rem;color:hsl(var(--accent));"><time{% if event.datetime %} datetime="{{ event.datetime }}"{% endif %}>{{ event.start }}{% if event.end %} &ndash; {{ event.end }}{% endif %}</time>{% if event.timezone %} <span style="color:hsl(var(--muted-foreground));">{{ event.timezone }}</span>{% endif %}</div>
<h3 class="lcars-feature-title" style="font-size:1.125rem;margin:0;">{{ event.title }}</h3>
{% if event.venue %}<p style="margin:0;font-size:0.875rem;color:hsl(var(--muted-foreground));">{{ event.venue }}</p>{% endif %}
{% if event.description %}<p style="margin:0;font-size:0.875rem;color:hsl(var(--muted-foreground));">{{ event.description }}</p>{% endif %}
{% if event.link %}<a class="lcars-btn-ghost" href="{{ event.link }}" style="margin-top:auto;display:inline-flex;align-items:center;gap:0.375rem;">{{ event.linkLabel|default:"Details" }}::lucide:arrow-right:sm::</a>{% endif %}
</div>
</article>{% endif %}{% endfor %}
</div><style>.lcars-event-media{display:block;width:100%;height:100%;object-fit:cover;}</style>
{% else %}
<ul class="lcars-hairline-top" style="list-style:none;margin:2.5rem 0 0 0;padding:0;">
{% for event in events %}{% if not (hidePast and event.past) %}<li class="lcars-hairline-bottom" style="display:flex;flex-wrap:wrap;align-items:baseline;gap:0.75rem 1.5rem;padding:1.25rem 0;{% if event.past %}opacity:0.6;{% endif %}">
<div class="lcars-mono numeric-tabular" style="flex:0 0 12rem;font-size:0.875rem;"><time{% if event.datetime %} datetime="{{ event.datetime }}"{% endif %}>{{ event.start }}</time>{% if event.end %}<div style="font-size:0.75rem;color:hsl(var(--muted-foreground));">to {{ event.end }}</div>{% endif %}{% if event.timezone %}<div style="font-size:0.75rem;color:hsl(var(--muted-foreground));">{{ event.timezone }}</div>{% endif %}</div>
<div style="min-width:0;flex:1;">
<h3 class="lcars-feature-title" style="font-size:1rem;margin:0;">{{ event.title }}</h3>
{% if event.venue %}<p style="margin:0.125rem 0 0 0;font-size:0.875rem;color:hsl(var(--muted-foreground));">{{ event.venue }}</p>{% endif %}
{% if event.description %}<p style="margin:0.25rem 0 0 0;font-size:0.875rem;color:hsl(var(--muted-foreground));">{{ event.description }}</p>{% endif %}
</div>
{% if event.link %}<a class="lcars-btn-outline lcars-btn-sm" href="{{ event.link }}" style="flex:0 0 auto;">{{ event.linkLabel|default:"Details" }}</a>{% endif %}
</li>{% endif %}{% endfor %}
</ul>
{% endif %}
</div></section>