feat: several improvements in layout

assets/styles/_components.css

@@ -3,4 +3,5 @@
 @import "components/button.css";
 @import "components/menu.css";
 @import "components/toast.css";
-@import "components/tooltip.css";
+@import "components/tooltip.css";
+@import "components/table-responsive.css";

assets/styles/components/menu.css

@@ -1,9 +1,9 @@
 .menu--main {
-    @apply lg:flex lg:items-center m-0;
+    @apply flex items-center m-0;
 }
 
 .menu--main a {
-    @apply block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800;
+    @apply block p-2 md:p-4 text-black hover:bg-zinc-400 hover:text-zinc-800 text-sm md:text-base;
 }
 
 .menu--main .current a {

assets/styles/components/table-responsive.css

@@ -0,0 +1,20 @@
+.responsive {
+    @apply text-sm md:text-base;
+}
+
+.responsive thead {
+    @apply hidden md:table-header-group;
+}
+
+.responsive tbody tr {
+    @apply block mb-2 md:table-row;
+}
+
+.responsive td {
+    @apply grid grid-cols-2 gap-x-2 last:col-span-2 md:table-cell;
+}
+
+.responsive td:before {
+    content: attr(data-label);
+    @apply block font-bold last:hidden md:hidden;
+}

src/Twig/AppExtension.php

@@ -14,6 +14,7 @@ class AppExtension extends AbstractExtension
             new TwigFilter('file_size', [AppRuntime::class, 'formatBytes']),
             new TwigFilter('file_icon', [AppRuntime::class, 'fileIconFilter'], ['is_safe' => ['html']]),
             new TwigFilter('format_money', [AppRuntime::class, 'formatMoney']),
+            new TwigFilter('map_status', [AppRuntime::class, 'mapStatus']),
         ];
     }
 

src/Twig/AppRuntime.php

@@ -47,4 +47,15 @@ class AppRuntime implements RuntimeExtensionInterface
             'class' => $classes,
         ]);
     }
+
+    public function mapStatus(string $status): string
+    {
+        return match ($status) {
+            'F', 'F/S' => 'Festbuchung',
+            'S' => 'Stornierung',
+            'O' => 'Option',
+            'U' => 'Umbuchung',
+            default => '',
+        };
+    }
 }

templates/booking/index.html.twig

@@ -4,49 +4,64 @@
     <h2 class="text-2xl font-semibold pb-4">
         Meine Buchungen
     </h2>
-    <div class="space-y-8">
+    <table class="w-full mb-4 responsive">
+        <thead>
+        <tr class="bg-zinc-200">
+            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
+                Reise
+            </th>
+            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
+                Buchungsdatum
+            </th>
+            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
+                Buchungsnummer
+            </th>
+            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
+                Reisepreis
+            </th>
+            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
+                offen
+            </th>
+            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
+                Status
+            </th>
+            <th>
+            </th>
+        </tr>
+        </thead>
+        <tbody>
         {% for booking in bookings %}
-            <div class="p-4 border border-gray-300 rounded-md overflow-hidden" {{ stimulus_controller('toggle', { 'open': false }, { 'closed': 'hidden' }) }}>
+            <tr class="odd:bg-zinc-50 hover:bg-zinc-100 odd:hover:bg-zinc-100">
-                <div role="button" class="flex items-center justify-between py-2" {{ stimulus_action('toggle', 'toggle', 'click') }}>
+                <td class="border-r border-zinc-200 px-2 py-1 md:p-2"
-                    <div class="text-lg md:text-xl font-semibold">
+                    data-label="Reise">
-                        {% if booking.travelData %}
+                    {% if booking.travelData %}
-                            {{ booking.travel }}, {{ booking.travelData.dateFrom | date('d.m.Y') }} - {{ booking.travelData.dateTo | date('d.m.Y') }}
+                        {{ booking.travel }}, {{ booking.travelData.dateFrom | date('d.m.Y') }} - {{ booking.travelData.dateTo | date('d.m.Y') }}
-                        {% else %}
+                    {% else %}
-                            {{ booking.travel }}, {{ booking.travelDate | date('d.m.Y') }}
+                        {{ booking.travel }}, {{ booking.travelDate | date('d.m.Y') }}
-                        {% endif %}
+                    {% endif %}
-                    </div>
+                </td>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" {{ stimulus_target('toggle', 'icon') }}>
+                <td class="border-r border-zinc-200 px-2 py-1 md:p-2"
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                    data-label="Buchungsdatum">
-                    </svg>
+                    {{ booking.bookingDate | date('d.m.Y') }}
-                </div>
+                </td>
-                <div class="flex flex-col space-y-4 sm:flex-row sm:items-start sm:space-x-2" {{ stimulus_target('toggle', 'toggle') }}>
+                <td class="border-r border-zinc-200 px-2 py-1 md:p-2"
-                    <div class="flex-1 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+                    data-label="Buchungsnummer">
-                        <div>
+                    {{ booking.bookingNumber }}
-                            <div class="font-semibold pb-2">
+                </td>
-                                Buchungsdatum
+                <td class="border-r border-zinc-200 px-2 py-1 md:p-2"
-                            </div>
+                    data-label="Reisepreis">
-                            {{ booking.bookingDate | date('d.m.Y') }}
+                    {{ booking.price|format_currency('EUR') }}
-                        </div>
+                </td>
-                        <div>
+                <td class="border-r border-zinc-200 px-2 py-1 md:p-2"
-                            <div class="font-semibold pb-2">
+                    data-label="offen">
-                                Buchungsnummer
+                    {{ booking.balance ? booking.balance|format_currency('EUR') : '-' }}
-                            </div>
+                </td>
-                            {{ booking.bookingNumber }}
+                <td class="border-r border-zinc-200 px-2 py-1 md:p-2"
-                        </div>
+                    data-label="Status">
-                        <div>
+                    {{ booking.status|map_status }}
-                            <div class="font-semibold pb-2">
+                </td>
-                                Reisepreis
+                <td class="px-2 py-1 md:p-2">
-                            </div>
+                    <div class="flex md:flex-col space-x-2 md:space-x-0 md:space-y-1">
-                            {{ booking.price|format_currency('EUR') }}/<br>{{ booking.balance ? booking.balance|format_currency('EUR') : '-' }}
-                        </div>
-                        <div>
-                            <div class="font-semibold pb-2">
-                                Status
-                            </div>
-                            {{ booking.status }}
-                        </div>
-                    </div>
-                    <div class="flex sm:flex-col space-x-2 sm:space-x-0 sm:space-y-1">
                         {% if booking.editable %}
                             <a href="{{ path('app_booking_edit', { 'id': booking.id }) }}"
                                class="button bg-button bg-button--secondary button--small">
@@ -64,12 +79,9 @@
                             Reisedokumente
                         </a>
                     </div>
-                </div>
+                </td>
-            </div>
+            </tr>
-        {% else %}
-            <div>
-                Keine Daten
-            </div>
         {% endfor %}
-    </div>
+        </tbody>
+    </table>
 {% endblock %}

templates/layout.html.twig

@@ -1,15 +1,13 @@
-<div class="mb-16"
+<div class="my-16"
      id="myep"
      hx-boost="true"
      hx-indicator="#loading-indicator">
-    <div class="relative z-20 flex items-center justify-between pb-4">
+    <div class="fixed inset-x-0 top-0 z-20 flex items-center justify-between pb-4">
         {% if is_granted('ROLE_USER') %}
-            <nav class="w-full bg-zinc-100 flex items-center mb-8 relative">
+            <nav class="w-full bg-zinc-200 flex items-center mb-8 relative">
                 <div class="flex-1 block text-2xl px-4">My E&amp;P</div>
-                <div class="bg-zinc-50 shadow w-full lg:w-auto absolute lg:relative z-10 lg:z-auto top-full lg:top-auto left-0 lg:shadow-none lg:flex lg:space-x-4">
+                <div class="bg-zinc-200">
-                    <div class="lg:flex lg:items-center m-0">
+                    {{ knp_menu_render(knp_menu_get('main')) }}
-                        {{ knp_menu_render(knp_menu_get('main')) }}
-                    </div>
                 </div>
             </nav>
         {% endif %}