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

Improve hero RSVP readability: whiter text, bordered buttons, a cohesive reason panel

Browse Source 
The "are you in?" subtext and the In/Out button labels were both dim
grey (text-on-dark-dim/text-on-dark) against a photo backdrop -- bumped
to white, and gave both buttons a shared border (border-white/30) for
definition against the image, same colour on both so they read as a
matched pair.

The Out reason step (label, textarea, Cancel/Confirm) used to be loose
floating controls directly on the photo -- now wrapped in one bordered/
backed panel (same border colour as the In/Out pair) so it reads as one
cohesive control instead of scattered text and buttons.

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-22 15:03:33 +02:00
parent 366239e60b
commit dba28ffc24
4 changed files with 43 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
mobile/templates/mobile/_hero_rsvp.html
View File

@@ -21,11 +21,16 @@
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 and, via min-w-0, exactly the same
width -- flex-1 alone doesn't guarantee that once one button's label is
longer ("Out" vs "In"): flex items default to min-width:auto, so the
longer label's own intrinsic width can win a bigger share of the row
unless min-width is forced to 0 on both.
Both are the same neutral steel tone with a shared border/white-Text
treatment for readability against the photo backdrop, and via min-w-0,
exactly the same width -- flex-1 alone doesn't guarantee that once one
button's label is longer ("Out" vs "In"): flex items default to
min-width:auto, so the longer label's own intrinsic width can win a
bigger share of the row unless min-width is forced to 0 on both.
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.
{% endcomment %}
<div class="mt-3" x-data="{ asking: false, reason: '{{ hero_attendance.note|default:""|escapejs }}' }">
<div class="flex gap-2" x-show="!asking">
@@ -33,20 +38,20 @@
{% 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 bg-steel text-on-dark" type="submit">{% trans "In" %}</button>
<button class="btn w-full border border-white/30 bg-steel text-white" type="submit">{% trans "In" %}</button>
</form>
<button class="btn w-full min-w-0 flex-1 bg-steel text-on-dark" type="button" @click="asking = true">{% trans "Out" %}</button>
<button class="btn w-full min-w-0 flex-1 border border-white/30 bg-steel text-white" type="button" @click="asking = true">{% trans "Out" %}</button>
</div>
<form x-show="asking" x-cloak method="post" action="{% url "mobile:event_detail" hero_attendance.event.pk %}" hx-boost="false">
<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-on-dark-dim">{% trans "Reason -- only you and the coach can see this" %}</label>
<textarea class="h-16 w-full rounded-lg border border-steel bg-steel p-2 text-sm text-white placeholder:text-on-dark-dim" name="note" x-model="reason" required minlength="2" placeholder="{% trans "e.g. sick, family event..." %}"></textarea>
<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 flex gap-2">
<button class="btn flex-1 bg-steel text-on-dark" type="button" @click="asking = false">{% trans "Cancel" %}</button>
<button class="btn btn-dark flex-1" type="submit">{% trans "Confirm" %}</button>
<button class="btn flex-1 border border-white/30 bg-steel text-white" type="button" @click="asking = false">{% trans "Cancel" %}</button>
<button class="btn btn-dark flex-1 border border-white/30" type="submit">{% trans "Confirm" %}</button>
</div>
</form>
</div>

2
mobile/templates/mobile/home.html
View File

@@ -58,7 +58,7 @@
<p class="mt-3 font-display text-xs font-extrabold text-on-dark-dim uppercase tracking-wide">{% trans "Replies are closed for this event" %}</p>
<span class="pill pill-neutral mt-2">{{ hero_attendance.get_status_display }}</span>
{% else %}
<p class="mt-3 font-display text-xs font-extrabold text-on-dark-dim uppercase tracking-wide">{% blocktrans with name=hero_attendance.member.first_name %}{{ name }} &mdash; are you in?{% endblocktrans %}</p>
<p class="mt-3 font-display text-xs font-extrabold text-white uppercase tracking-wide">{% blocktrans with name=hero_attendance.member.first_name %}{{ name }} &mdash; are you in?{% endblocktrans %}</p>
{% include "mobile/_hero_rsvp.html" %}
{% endif %}
</div>