feat: implement screendesign

2025-12-06 15:02:33 +01:00
parent b206c3990b
commit bfb1a04ea0
84 changed files with 2807 additions and 2603 deletions
@@ -1,23 +1,54 @@
-{% extends 'layout.html.twig' %}
+{% extends 'layout_booking.html.twig' %}

 {% block content %}
-    {% include '_partials/_flashes.html.twig' %}
-    <h1>Neue Buchung</h1>
-
-    <div class="grid grid-cols-3 gap-8">
-        {# Main content area - participant form #}
-        <div id="main-content" class="col-span-2">
-            {% include 'booking/_participant_form.html.twig' %}
+    {{ form_start(form, {
+        'attr': {
+            'class': 'flex-1 flex flex-col min-h-0',
+            'novalidate': 'novalidate',
+            'hx-post': path(submitRouteName, submitRouteParams|default({index: participantIndex})),
+            'hx-target': '#main-content',
+            'hx-swap': 'innerHTML scroll:top'
+        }
+    }) }}
+        {# Pagination - mobile only (above form) #}
+        <div class="lg:hidden">
+            {% include 'booking/_pagination.html.twig' with { 'current_step': 2 } %}
        </div>
+        <div class="flex-1 flex flex-col lg:grid lg:grid-cols-5 min-h-0 relative">
+            {# Summary - hidden on mobile, visible on desktop #}
+            <div id="booking-summary"
+                 class="hidden lg:block lg:order-2 lg:flex-1 lg:min-h-0 lg:col-span-2">
+                {% include 'booking/_summary.html.twig' with {
+                    'bookingCreateDto': bookingDto,
+                    'summaryData': summaryData
+                } %}
+            </div>

-        {# Sidebar summary #}
-        <div id="booking-summary">
-            {% include 'booking/_summary.html.twig' with {
-                'bookingCreateDto': bookingDto,
-                'summaryData': summaryData
-            } %}
+            {# Form area - full width mobile, 3 cols desktop #}
+            <div class="flex-1 order-1 lg:col-span-3 bg-white flex flex-col min-h-0">
+                {# Pagination - desktop only (fixed above scrollable content) #}
+                <div class="hidden lg:block shrink-0">
+                    {% include 'booking/_pagination.html.twig' with { 'current_step': 2 } %}
+                </div>
+                <div id="main-content" class="flex-1 overflow-y-auto px-4 lg:px-8 py-8">
+                    {# Flash messages - must be inside main-content for HTMX swap to display them #}
+                    {% include '_partials/_flashes.html.twig' %}
+                    {% include 'booking/_participant_form.html.twig' %}
+                </div>
+            </div>
        </div>
-    </div>
-
-    {% include 'booking/_cancel_link.html.twig' %}
+        <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
+            <div class="flex justify-between">
+                <a href="{{ path('app_booking_create_step_2') }}"
+                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10"
+                   {{ stimulus_action('loading', 'toggle') }}>
+                    <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
+                </a>
+                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }} {{ stimulus_action('loading', 'toggle') }}>
+                    Speichern
+                </button>
+            </div>
+        </div>
+        {{ form_rest(form) }}
+    {{ form_end(form) }}
 {% endblock %}