UI improvements

* Replace registration table with cards on smaller devices
  * Use number inputs for registrations

new-registration-app/templates/event.html

@@ -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 mb-2 w-100" target="_blank">
-                <a href="{{ event.recipe_link }}" class="btn btn-outline-primary" target="_blank">
                 <i class="bi bi-book"></i> Original Rezept ansehen
             </a>
-            </div>
             {% endif %}
         </div>
         <div class="col-md-4">
@@ -95,6 +93,8 @@
         </div>
     </div>
 
+    <!-- Desktop table view -->
+    <div class="d-none d-md-block">
         <table class="table">
             <thead>
             <tr>
@@ -118,6 +118,37 @@
             </tbody>
         </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"
      aria-labelledby="staticBackdropLabel" aria-hidden="true">
@@ -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"
+                            <input name="numAdults" id="InputAdults" type="number" class="form-control"
-                                   aria-label="Anzahl Erwachsene">
+                                   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"
+                            <input name="numKids" id="InputKids" type="number" class="form-control"
-                                   aria-label="Anzahl Kinder >7">
+                                   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"
+                            <input name="numSmallKids" id="InputSmallKids" type="number" class="form-control"
-                                   aria-label="Anzahl Kinder <7">
+                                   aria-label="Anzahl Kinder <7" min="0" step="1" inputmode="numeric">
                         </div>
 
                     </div>