wip

assets/controllers/modal_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+    close() {
+        this.element.remove()
+    }
+}

templates/_partials/_alert.html.twig

@@ -1,4 +1,7 @@
-<div class="{{ html_classes('rounded-md p-4 mb-4', { 'bg-red-50': level == 'error', 'bg-green-50': level == 'success', 'bg-blue-50': level == 'info' }) }}">
+{% if modal is not defined %}
+    {% set modal = false %}
+{% endif %}
+<div class="{{ html_classes('rounded-md mb-4', { 'py-4': modal == true, 'p-4': modal == false, 'bg-red-50': level == 'error', 'bg-green-50': level == 'success', 'bg-blue-50': level == 'info' }) }}">
     <div class="flex">
         <div class="shrink-0">
             {% if level == 'error' %}

templates/_partials/_flashes.html.twig

@@ -1,9 +1,30 @@
 {% if app.session.flashBag.peek('error')|length > 0 %}
-    {% include '_partials/_alert.html.twig' with { level: 'error', messages: app.flashes('error') } %}
+    {% embed '_partials/_modal.html.twig' with { 'level': 'error', 'modal': true } %}
+        {% block title %}
+            Fehler
+        {% endblock %}
+        {% block content %}
+            {% include '_partials/_alert.html.twig' with { level: 'error', messages: app.flashes('error') } %}
+        {% endblock %}
+    {% endembed %}
 {% endif %}
 {% if app.session.flashBag.peek('success')|length > 0 %}
-    {% include '_partials/_alert.html.twig' with { level: 'success', messages: app.flashes('success') } %}
+    {% embed '_partials/_modal.html.twig' with { 'level': 'success', 'modal': true } %}
+        {% block title %}
+            OK
+        {% endblock %}
+        {% block content %}
+            {% include '_partials/_alert.html.twig' with { level: 'success', messages: app.flashes('success') } %}
+        {% endblock %}
+    {% endembed %}
 {% endif %}
 {% if app.session.flashBag.peek('info')|length > 0 %}
-    {% include '_partials/_alert.html.twig' with { level: 'info', messages: app.flashes('info') } %}
+    {% embed '_partials/_modal.html.twig' with { 'level': 'info', 'modal': true } %}
+        {% block title %}
+            Hinweis
+        {% endblock %}
+        {% block content %}
+            {% include '_partials/_alert.html.twig' with { level: 'info', messages: app.flashes('info') } %}
+        {% endblock %}
+    {% endembed %}
 {% endif %}

templates/_partials/_icon.html.twig

@@ -0,0 +1 @@
+<svg class="{{ class }}"><use href="{{ asset('build/images/icons.svg') }}#icon-{{ icon }}"/></svg>

templates/_partials/_modal.html.twig

@@ -0,0 +1,22 @@
+<div class="fixed inset-0 w-full h-full z-50" {{ stimulus_controller('modal') }} {{ stimulus_action('modal', 'close', 'modal-close@window') }}>
+    <div class="absolute inset-0 w-full h-full bg-black/80" {{ stimulus_action('modal', 'close', 'click') }}></div>
+    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4 w-full max-w-2xl">
+        <div class="{{ html_classes('relative py-8 rounded-md', { 'bg-red-50': level == 'error', 'bg-green-50': level == 'success', 'bg-blue-50': level == 'info' }) }}">
+            <div class="{{ html_classes('flex justify-between pb-4 px-8', { 'text-red-800': level == 'error', 'text-green-800': level == 'success', 'text-blue-800': level == 'info' }) }}">
+                <div class="text-2xl font-medium">
+                    {% block title %}{% endblock %}
+                </div>
+                <button type="button"
+                        class="inline-block"
+                        {{ stimulus_action('modal', 'close') }}>
+                    {{ icon('close', 'w-6 h-6')}}
+                </button>
+            </div>
+            <div class="max-h-96 overflow-y-scroll">
+                <div class="{{ html_classes('px-8', { 'text-red-700': level == 'error', 'text-green-700': level == 'success', 'text-blue-700': level == 'info' }) }}">
+                    {% block content %}{% endblock %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

templates/base.html.twig

@@ -10,7 +10,7 @@
             {{ encore_entry_script_tags('app') }}
         {% endblock %}
     </head>
-    <body class="bg-white text-gray-700 font-sans antialiased scroll-mt-[128px]">
+    <body class="bg-white text-gray-700 font-sans antialiased">
         {% block body %}{% endblock %}
     </body>
 </html>

templates/booking/index.html.twig

@@ -40,9 +40,9 @@
                 <td class="border-r border-zinc-200 px-2 py-1 md:p-2"
                     data-label="Buchungsdatum">
                     {% if booking.travelData %}
-                        {{ booking.travelData.dateFrom | date('d.m.Y') }} - {{ booking.travelData.dateTo | date('d.m.Y') }}
+                        {{ booking.travelData.dateFrom|date('d.m.Y') }} - {{ booking.travelData.dateTo|date('d.m.Y') }}
                     {% else %}
-                        {{ booking.travelDate | date('d.m.Y') }}
+                        {{ booking.travelDate|date('d.m.Y') }}
                     {% endif %}
                 </td>
                 <td class="border-r border-zinc-200 px-2 py-1 md:p-2"

templates/htmx_modal.html.twig

@@ -0,0 +1,26 @@
+<div id="htmx-modal" class="fixed inset-0 w-full h-full z-50" {{ stimulus_controller('modal') }} {{ stimulus_action('modal', 'close', 'modal-close@window') }}>
+    <div class="absolute inset-0 w-full h-full bg-black/80" {{ stimulus_action('modal', 'close', 'click') }}></div>
+    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4 w-full max-w-2xl">
+        <div class="relative bg-white py-8 rounded-md">
+            <div class="flex justify-between pb-4 px-8">
+                <div class="text-2xl font-bold">
+                    {% block title %}{% endblock %}
+                </div>
+                <button type="button"
+                        class="inline-block"
+                        {{ stimulus_action('modal', 'close') }}>
+                    {{ icon('close', 'w-6 h-6')}}
+                </button>
+            </div>
+            <div class="max-h-96 overflow-y-scroll">
+                <div class="px-8">
+                    {% block content %}{% endblock %}
+                </div>
+            </div>
+            <div class="htmx-indicator absolute top-0 left-0 inset-0 bg-white/90 flex items-center justify-center"
+                 id="htmx-modal-indicator">
+                {% include '_partials/_spinner.html.twig' with { 'class': 'w-8 h-8'} %}
+            </div>
+        </div>
+    </div>
+</div>

templates/layout.html.twig

@@ -1,19 +1,23 @@
 {% extends 'base.html.twig' %}
 
 {% block body %}
-    <div class="{{ html_classes('pb-8', { 'pt-16': is_granted('ROLE_USER') }) }}" {{ stimulus_controller('loading', [], { 'hidden': 'invisible' }) }}>
+    <div class="{{ html_classes('pb-8', { 'pt-24': is_granted('ROLE_USER') }) }}" {{ stimulus_controller('loading', [], { 'hidden': 'invisible' }) }}>
-        <div class="fixed inset-x-0 top-0 z-20 flex items-center justify-between pb-4">
+        <div class="fixed inset-x-0 top-0 z-20">
-            {% if is_granted('ROLE_USER') %}
+            <div class="max-w-screen-xl mx-auto flex items-center justify-between bg-zinc-200 ">
-                <nav class="w-full bg-zinc-200 flex items-center mb-8 relative">
+                {% if is_granted('ROLE_USER') %}
-                    <div class="flex-1 block text-2xl px-4">My E&amp;P</div>
+                    <nav class="w-full flex items-center relative">
-                    <div class="bg-zinc-200">
+                        <div class="flex-1 block text-2xl px-4">My E&amp;P</div>
-                        {{ knp_menu_render(knp_menu_get('main')) }}
+                        <div class="bg-zinc-200">
-                    </div>
+                            {{ knp_menu_render(knp_menu_get('main')) }}
-                </nav>
+                        </div>
-            {% endif %}
+                    </nav>
+                {% endif %}
+            </div>
+        </div>
+        <div class="max-w-screen-xl mx-auto">
+            {% block content %}{% endblock %}
+            {% include '_partials/_loading_indicator.html.twig' %}
         </div>
-        {% block content %}{% endblock %}
-        {% include '_partials/_loading_indicator.html.twig' %}
         <div data-iframe-size></div>
     </div>
 {% endblock %}