New event: space out the stacked cards, rework the kind picker to 4 tiles

- The kind-tile grid, title/date/location card, Who card, and Answers-close
  card were direct children of the form with no gap between them at all --
  the wrapping flex/gap-4 on coach-sheet's own content div only ever applied
  between the header bar and the form, not what's inside it. The form itself
  is now flex flex-col gap-4.
- The picker offered Practice/Game/Other, none of which actually changed
  which fields render. Reworked to Practice/Game/Tournament/Meeting (2x2) --
  the four kinds worth adding from the app; social/other stay desktop-only.
  Also narrowed the form's own kind choices to match server-side, not just
  cosmetically in the template.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-23 14:23:19 +02:00
parent fbaf5a8799
commit 5d54f1cdcc
3 changed files with 52 additions and 4 deletions

View File

@@ -24,10 +24,10 @@
</div>
{% endif %}
<form id="coach-event-form" method="post" action="{% url "mobile:coach_create_event" %}" hx-boost="false">
<form id="coach-event-form" class="flex flex-col gap-4" method="post" action="{% url "mobile:coach_create_event" %}" hx-boost="false">
{% csrf_token %}
<div class="grid grid-cols-3 gap-2">
<div class="grid grid-cols-2 gap-2">
<label class="flex h-12 items-center justify-center rounded-lg border border-line bg-white font-display text-xs font-extrabold tracking-wide text-muted uppercase has-checked:border-ink has-checked:bg-ink has-checked:text-white">
<input class="sr-only" type="radio" name="kind" value="training" checked>
{% trans "Practice" %}
@@ -37,10 +37,15 @@
{% trans "Game" %}
</label>
<label class="flex h-12 items-center justify-center rounded-lg border border-line bg-white font-display text-xs font-extrabold tracking-wide text-muted uppercase has-checked:border-ink has-checked:bg-ink has-checked:text-white">
<input class="sr-only" type="radio" name="kind" value="other">
{% trans "Other" %}
<input class="sr-only" type="radio" name="kind" value="tournament">
{% trans "Tournament" %}
</label>
<label class="flex h-12 items-center justify-center rounded-lg border border-line bg-white font-display text-xs font-extrabold tracking-wide text-muted uppercase has-checked:border-ink has-checked:bg-ink has-checked:text-white">
<input class="sr-only" type="radio" name="kind" value="meeting">
{% trans "Meeting" %}
</label>
</div>
{% for error in form.kind.errors %}<p class="text-xs text-club-dark">{{ error }}</p>{% endfor %}
<div class="m-card flex flex-col p-4">
<div>