bernard/RosterChief
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stretch the calendar row's kind-marker bar to the full content height

Browse Source 
Fixed at h-9.5 it matched the old two-line layout, but fell short next
to a three-line row (title + meta + location). self-stretch keeps it
matching whatever the content column actually renders.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
This commit is contained in:
Bernard Siebens
2026-08-21 20:44:27 +02:00
parent a35535de7c
commit 9c16141d06
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
mobile/templates/mobile/_calendar_row.html
View File

@@ -5,14 +5,16 @@
to the date marks the event kind: club-red for games, info-blue for to the date marks the event kind: club-red for games, info-blue for
training, warn-amber for everything else -- one consistent marker training, warn-amber for everything else -- one consistent marker
position for every kind, rather than games getting a different position for every kind, rather than games getting a different
treatment (a left border on the whole row) from the rest. treatment (a left border on the whole row) from the rest. The bar uses
self-stretch rather than a fixed height so it matches the content
column's height even when the location line adds a third row of text.
{% endcomment %} {% endcomment %}
<a class="flex items-center gap-3 bg-white px-4 py-3" href="{% url "mobile:event_detail" row.event.pk %}"> <a class="flex items-center gap-3 bg-white px-4 py-3" href="{% url "mobile:event_detail" row.event.pk %}">
<div class="w-9.5 shrink-0 text-center"> <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-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 class="font-display text-2xl leading-none font-extrabold text-ink">{{ row.event.start|date:"d" }}</div>
</div> </div>
<div class="h-9.5 w-[3px] shrink-0 rounded-full {% if row.event.kind == "game" %}bg-club{% elif row.event.kind == "training" %}bg-info{% else %}bg-warn{% endif %}"></div> <div class="w-[3px] shrink-0 self-stretch rounded-full {% if row.event.kind == "game" %}bg-club{% elif row.event.kind == "training" %}bg-info{% else %}bg-warn{% endif %}"></div>
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<div class="text-sm font-semibold text-ink">{{ row.event.title }}</div> <div class="text-sm font-semibold text-ink">{{ row.event.title }}</div>
<div class="truncate text-xs text-muted"> <div class="truncate text-xs text-muted">

2
static/css/mobile.css
View File

File diff suppressed because one or more lines are too long