niklas.m/allmende-essen
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

UI improvements

Browse Source 
* Replace registration table with cards on smaller devices
  * Use number inputs for registrations
This commit is contained in:
Niklas Meinzer
2025-10-07 21:26:17 +02:00
parent 102e03b546
commit 847cac4bba
1 changed files with 67 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
new-registration-app/templates/event.html
View File

@@ -18,21 +18,19 @@
<hr class="hr"/>
<p class="h3">Anmeldungen</p>
<div class="container">
<div class="row">
<div class="row m-2">
<div class="col-md-4 d-flex justify-content-center align-items-center flex-column">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#registration">
<button type="button" class="btn btn-primary mb-2 w-100" data-bs-toggle="modal" data-bs-target="#registration">
Anmeldung hinzufügen
</button>
<button type="button" class="btn btn-primary mb-2 {% if event.all_teams_max() %}disabled{% endif %}" data-bs-toggle="modal" data-bs-target="#teamRegistration">
<button type="button" class="btn btn-primary mb-2 w-100" {% if event.all_teams_max() %}disabled{% endif %} data-bs-toggle="modal" data-bs-target="#teamRegistration">
Dienst übernehmen
</button>
{% if event.recipe_link %}
<div class="mb-3">
<a href="{{ event.recipe_link }}" class="btn btn-outline-primary" target="_blank">
<a href="{{ event.recipe_link }}" class="btn btn-outline-primary mb-2 w-100" target="_blank">
<i class="bi bi-book"></i> Original Rezept ansehen
</a>
</div>
{% endif %}
</div>
<div class="col-md-4">
@@ -95,7 +93,9 @@
</div>
</div>
<table class="table">
<!-- Desktop table view -->
<div class="d-none d-md-block">
<table class="table">
<thead>
<tr>
<th scope="col">Haushalt</th>
@@ -116,7 +116,38 @@
</tr>
{% endfor %}
</tbody>
</table>
</table>
</div>
<!-- Mobile card view -->
<div class="d-md-none">
{% for reg in event.registrations %}
<div class="card mb-3">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-2">
<h5 class="card-title mb-0">{{ reg.household.name }}</h5>
<a href="/event/{{event.id}}/registration/{{reg.household_id}}/delete" class="text-danger">
<i class="bi bi-trash"></i>
</a>
</div>
<div class="row mt-3">
<div class="col-4 text-center">
<div class="text-muted small">Erwachsene</div>
<div class="fw-bold">{{ reg.num_adult_meals }}</div>
</div>
<div class="col-4 text-center">
<div class="text-muted small">Kinder</div>
<div class="fw-bold">{{ reg.num_children_meals }}</div>
</div>
<div class="col-4 text-center">
<div class="text-muted small">Kleinkinder</div>
<div class="fw-bold">{{ reg.num_small_children_meals }}</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="registration" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
@@ -143,18 +174,18 @@
<div class="row">
<div class="col">
<label for="InputAdults" class="form-label">Anzahl Erwachsene</label>
<input name="numAdults" id="InputAdults" type="text" class="form-control"
aria-label="Anzahl Erwachsene">
<input name="numAdults" id="InputAdults" type="number" class="form-control"
aria-label="Anzahl Erwachsene" min="0" step="1" inputmode="numeric">
</div>
<div class="col">
<label for="InputKids" class="form-label">Anzahl Kinder >7 </label>
<input name="numKids" id="InputKids" type="text" class="form-control"
aria-label="Anzahl Kinder >7">
<input name="numKids" id="InputKids" type="number" class="form-control"
aria-label="Anzahl Kinder >7" min="0" step="1" inputmode="numeric">
</div>
<div class="col">
<label for="InputSmallKids" class="form-label">Anzahl Kinder <7 </label>
<input name="numSmallKids" id="InputSmallKids" type="text" class="form-control"
aria-label="Anzahl Kinder <7">
<input name="numSmallKids" id="InputSmallKids" type="number" class="form-control"
aria-label="Anzahl Kinder <7" min="0" step="1" inputmode="numeric">
</div>
</div>