mobile optimizing

WEBROOT/services/vergabe.php

@@ -75,7 +75,7 @@ $entries = DatabaseShow(
         <h3>Aktuelle Vergaben</h3>
         
         <?php if (!empty($entries)): ?>
-            <table class="db-table">
+            <table class="db-table mobile-responsive-table">
                 <thead>
                     <tr>
                         <th>Was</th>
@@ -88,11 +88,11 @@ $entries = DatabaseShow(
                 <tbody>
                     <?php foreach ($entries as $entry): ?>
                         <tr>
-                            <td><?= htmlspecialchars($entry['WAS'] ?? '') ?></td>
+                            <td data-label="Was"><?= htmlspecialchars($entry['WAS'] ?? '') ?></td>
-                            <td><?= htmlspecialchars($entry['WER'] ?? '') ?></td>
+                            <td data-label="Wer"><?= htmlspecialchars($entry['WER'] ?? '') ?></td>
-                            <td><?= htmlspecialchars($entry['WANN'] ?? '') ?></td>
+                            <td data-label="Wann"><?= htmlspecialchars($entry['WANN'] ?? '') ?></td>
-                            <td><?= htmlspecialchars($entry['RUECKGABE'] ?? '') ?></td>
+                            <td data-label="Rückgabe"><?= htmlspecialchars($entry['RUECKGABE'] ?? '') ?></td>
-                            <td>
+                            <td data-label="Aktion">
                                 <form method="POST" onsubmit="return confirm('Möchtest du diesen Eintrag wirklich löschen?');" style="margin: 0;">
                                     <input type="hidden" name="id" value="<?= $entry['ID'] ?? '' ?>">
                                     <button type="submit" name="delete_entry" class="btn-delete">

WEBROOT/style.css

@@ -1217,4 +1217,67 @@ body.dark-mode input[type="date"] {
         padding: 10px;
         height: auto;
     }
+}
+
+/* ===== Mobile Optimierung für die Vergabe-Tabelle ===== */
+@media (max-width: 768px) {
+
+    /* Verstecke die normale Tabellen-Überschrift */
+    .mobile-responsive-table thead {
+        display: none;
+    }
+
+    /* Mache aus der Tabelle ein Block-Layout */
+    .mobile-responsive-table,
+    .mobile-responsive-table tbody,
+    .mobile-responsive-table tr,
+    .mobile-responsive-table td {
+        display: block;
+        width: 100% !important;
+    }
+
+    /* Jede Zeile wird zu einer schicken Card */
+    .mobile-responsive-table tr {
+        background: var(--card-bg);
+        border: 1px solid var(--card-border);
+        border-radius: 8px;
+        margin-bottom: 15px;
+        padding: 10px;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+    }
+
+    /* Einzelne Zellen nebeneinander/untereinander stylen */
+    .mobile-responsive-table td {
+        text-align: right !important;
+        padding: 8px 10px !important;
+        border-bottom: 1px solid var(--card-border);
+        position: relative;
+        white-space: normal !important;
+        /* Erlaubt Textumbruch auf Handys */
+        overflow: visible !important;
+    }
+
+    .mobile-responsive-table td:last-child {
+        border-bottom: none;
+        padding-top: 12px !important;
+    }
+
+    /* Die Beschriftung (z.B. "Was:") links einblenden */
+    .mobile-responsive-table td::before {
+        content: attr(data-label);
+        position: absolute;
+        left: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        font-weight: bold;
+        font-size: 0.9rem;
+        color: var(--text);
+    }
+
+    /* Lösch-Button auf Mobile über die gesamte Breite strecken für leichtere Bedienung */
+    .mobile-responsive-table .btn-delete {
+        width: 100%;
+        padding: 10px;
+        font-size: 1rem;
+    }
 }