A bounded chronological agenda (this week / next week, no month paging -- the mobile screen doesn't need the desktop week/month grid events.services.calendar was built for) scoped to the person switcher's current selection, plus an "All members" toggle for the whole club's schedule. Each row links into the still-placeholder-GET event-detail screen that M2 builds out next. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
27 lines
1.5 KiB
HTML
27 lines
1.5 KiB
HTML
{% load i18n %}
|
|
{% comment %}
|
|
One M3 agenda row -- included from calendar.html once per bucket. Expects
|
|
``row`` ({event, pill_class, pill_label}) in scope. A 4px club-red left
|
|
border marks games; other kinds get a 3px colour bar (info for training,
|
|
warn for everything else) next to the date, per the design doc's M3 row
|
|
description.
|
|
{% endcomment %}
|
|
<a class="flex items-center gap-3 bg-white p-3.5 {% if row.event.kind == "game" %}border-l-4 border-club{% endif %}" href="{% url "mobile:event_detail" row.event.pk %}">
|
|
<div class="w-9.5 shrink-0 text-center">
|
|
<div class="font-mono text-[10px] tracking-wide text-muted uppercase">{{ row.event.start|date:"D" }}</div>
|
|
<div class="font-display text-2xl leading-none font-extrabold text-ink">{{ row.event.start|date:"d" }}</div>
|
|
</div>
|
|
{% if row.event.kind != "game" %}
|
|
<div class="h-9.5 w-[3px] shrink-0 rounded-full {% if row.event.kind == "training" %}bg-info{% else %}bg-warn{% endif %}"></div>
|
|
{% endif %}
|
|
<div class="min-w-0 flex-1">
|
|
<div class="text-sm font-semibold text-ink">{{ row.event.title }}</div>
|
|
<div class="truncate text-xs text-muted">
|
|
{{ row.event.start|date:"H:i" }}
|
|
{% for team in row.event.teams.all %}· {{ team.name }}{% endfor %}
|
|
{% if row.event.location %}· {{ row.event.location.name }}{% endif %}
|
|
</div>
|
|
</div>
|
|
<span class="pill {{ row.pill_class }} shrink-0">{{ row.pill_label }}</span>
|
|
</a>
|