Bernard Siebens
a9bf98a3c9
flex-1 + min-w-0 still wasn't producing equal-width In/Out (and In/Maybe/ Out) buttons in practice -- a longer label's own content could still win a wider share. Switched every such row to CSS grid (grid-cols-2/3): each track is a content-independent minmax(0, 1fr), so equal width is guaranteed by the grid itself rather than relying on flex-basis/min-width interactions. Applied to the hero In/Out row, its Cancel/Confirm pair, event_detail's 3-way In/Maybe/Out row, and its own Cancel/Confirm pair. Also brightened the hero's face-off/meet/location meta line (was text-on-dark, a dim grey) to plain white, matching the readability pass already done on the "are you in?" subtext and the button labels. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
63 lines
4.1 KiB
HTML
63 lines
4.1 KiB
HTML
{% load i18n %}
|
|
{% comment %}
|
|
Quick 2-way RSVP (In/Out) for a hero card -- Home's own (M1) and Coach
|
|
Today's "Also yours" card share this exact markup. Picking "Out" first
|
|
asks for an optional reason (Attendance.note) before submitting -- private
|
|
by construction, not by a visibility flag: nothing anywhere renders
|
|
another member's own note, so writing it here and reading it back in
|
|
event_detail's "Your answers" (this same member/family) and Coach mode's
|
|
bench attendance (mobile/templates/mobile/coach/attendance.html) is the
|
|
entire access story, no extra permission check needed.
|
|
|
|
Expects ``hero_attendance`` in scope. ``cross_shell`` no longer changes
|
|
anything here (kept as a no-op param for call-site compatibility) -- both
|
|
forms are unconditionally hx-boost="false" regardless of shell. Boosting
|
|
a form that Alpine also owns (x-show toggling between this pair of
|
|
sibling forms) had htmx and Alpine both trying to intercept the same
|
|
submit, which was breaking both In and Out. A real navigation for a
|
|
write action is a fine, standard trade -- hx-boost's value is in link-to-
|
|
link browsing, not swallowing every POST on the page.
|
|
|
|
Neither button is colour-coded (no green "In") -- nobody has answered yet
|
|
at this point (that's the whole reason for the "are you in?" prompt), so
|
|
a green default would misleadingly read as an already-recorded answer.
|
|
Both are the same neutral steel tone with a shared border/white-text
|
|
treatment for readability against the photo backdrop.
|
|
|
|
The row is CSS grid (grid-cols-2), not flex -- flex-1 alone kept giving
|
|
"Out" a wider share than "In" in practice (a longer label's own
|
|
intrinsic content width can still influence a flex item's rendered size
|
|
even with flex-basis:0, depending on what else is set on it/its
|
|
children -- min-w-0 didn't fully neutralise it here). Two equal-width
|
|
`1fr` grid columns don't have that ambiguity: track size is fixed by the
|
|
grid regardless of content, full stop.
|
|
|
|
The Out reason step (label + textarea + Cancel/Confirm) is wrapped in one
|
|
bordered/backed panel, same border colour as the In/Out pair -- reads as
|
|
one cohesive control rather than loose floating text and buttons. Its
|
|
own Cancel/Confirm pair is grid-cols-2 for the same equal-width reason.
|
|
{% endcomment %}
|
|
<div class="mt-3" x-data="{ asking: false, reason: '{{ hero_attendance.note|default:""|escapejs }}' }">
|
|
<div class="grid grid-cols-2 gap-2" x-show="!asking">
|
|
<form method="post" action="{% url "mobile:event_detail" hero_attendance.event.pk %}" hx-boost="false">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="member_id" value="{{ hero_attendance.member.pk }}">
|
|
<input type="hidden" name="status" value="present">
|
|
<button class="btn w-full border border-white/30 bg-steel text-white" type="submit">{% trans "In" %}</button>
|
|
</form>
|
|
<button class="btn w-full border border-white/30 bg-steel text-white" type="button" @click="asking = true">{% trans "Out" %}</button>
|
|
</div>
|
|
|
|
<form x-show="asking" x-cloak class="rounded-lg border border-white/30 bg-steel/60 p-3" method="post" action="{% url "mobile:event_detail" hero_attendance.event.pk %}" hx-boost="false">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="member_id" value="{{ hero_attendance.member.pk }}">
|
|
<input type="hidden" name="status" value="absent">
|
|
<label class="mb-1 block text-xs font-semibold text-white">{% trans "Reason -- only you and the coach can see this" %}</label>
|
|
<textarea class="h-16 w-full rounded-lg border border-white/20 bg-black/20 p-2 text-sm text-white placeholder:text-on-dark" name="note" x-model="reason" required minlength="2" placeholder="{% trans "e.g. sick, family event..." %}"></textarea>
|
|
<div class="mt-2 grid grid-cols-2 gap-2">
|
|
<button class="btn border border-white/30 bg-steel text-white" type="button" @click="asking = false">{% trans "Cancel" %}</button>
|
|
<button class="btn btn-dark border border-white/30" type="submit">{% trans "Confirm" %}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|