Files
RosterChief/mobile/templates/mobile/_calendar_row.html
Bernard Siebens 29acd22b7f Build M3 Calendar for the mobile app
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
2026-08-21 10:52:59 +02:00

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 %}&middot; {{ team.name }}{% endfor %}
{% if row.event.location %}&middot; {{ row.event.location.name }}{% endif %}
</div>
</div>
<span class="pill {{ row.pill_class }} shrink-0">{{ row.pill_label }}</span>
</a>