feat: adopt main website styles

2024-12-04 09:33:09 +01:00
parent 273db3bdb7
commit 2454cfa682
17 changed files with 274 additions and 159 deletions
@@ -10,7 +10,7 @@
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </head>
-    <body class="bg-white text-gray-700 font-sans antialiased text-sm">
+    <body class="bg-white text-gray-700 font-sans antialiased">
        {% block body %}{% endblock %}
    </body>
 </html>
@@ -232,10 +232,11 @@
    </div>
    <div class="flex justify-between">
        <a href="{{ path('app_bookings') }}"
-           class="btn">
+           class="button bg-button">
            zurück
        </a>
-        <button type="submit" class="btn btn--secondary">
+        <button type="submit"
+                class="button bg-button bg-button--secondary">
            Aktualisieren
        </button>
    </div>
@@ -49,17 +49,17 @@
                    <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="btn btn--small btn--secondary">
+                               class="button bg-button bg-button--secondary button--small">
                                bearbeiten
                            </a>
                        {% endif %}
                        <a href="{{ path('app_booking_confirmation', { 'id': booking.id }) }}"
-                           class="btn btn--small"
+                           class="button bg-button button--small"
                           target="_blank">
                            Bestätigung
                        </a>
                        <a href="{{ path('app_booking_documents', { 'id': booking.id }) }}"
-                           class="btn btn--small"
+                           class="button bg-button button--small"
                           target="_blank">
                            Reisedokumente
                        </a>
@@ -1,6 +1,7 @@
 {% use 'form_div_layout.html.twig' %}

 {%- block form_row -%}
+    {%- set row_attr = row_attr|merge({ 'class': (row_attr.class|default('') ~ ' mb-1')|trim }) -%}
    {%- set widget_attr = {} -%}
    {%- if help is not empty -%}
        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
@@ -14,7 +15,7 @@
 {%- endblock form_row -%}

 {%- block form_label -%}
-    {% set class = 'block font-semibold pb-2' %}
+    {% set class = '' %}
    {% if errors|length %}
        {% set class = class ~ ' text-red-500' %}
    {% endif %}
@@ -35,11 +36,9 @@
 {%- block form_widget_simple -%}
    {%- set type = type|default('text') -%}
    {%- if type != 'hidden' -%}
-        {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
+        {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
        {%- if errors|length -%}
-            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%}
-        {% else %}
-            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-gray-400 focus:ring-primary' }) -%}
+            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
        {%- endif -%}
        {%- if disabled is defined and disabled == true -%}
            {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
@@ -52,11 +51,9 @@
 {%- endblock form_widget_simple -%}

 {%- block textarea_widget -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
    {%- if errors|length -%}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%}
-    {% else %}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-gray-400 focus:ring-primary' }) -%}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
    {%- endif -%}
    {%- if disabled is defined and disabled == true -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
@@ -68,11 +65,9 @@
 {%- endblock textarea_widget -%}

 {%- block checkbox_widget -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' h-4 w-4 rounded text-primary')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-checkbox')|trim }) -%}
    {%- if errors|length -%}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-red-500 text-red-500 ring-red-500 focus:ring-red-500' }) -%}
-    {% else %}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-gray-300 focus:ring-primary' }) -%}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-checkbox--has-error' }) -%}
    {%- endif -%}
    {%- if attr.disabled is defined and attr.disabled == true -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
@@ -81,11 +76,9 @@
 {%- endblock checkbox_widget -%}

 {%- block radio_widget -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' h-4 w-4 rounded-full text-primary')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-radio')|trim }) -%}
    {%- if errors|length -%}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-red-500 text-red-500 ring-red-500 focus:ring-red-500' }) -%}
-    {% else %}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-gray-300 focus:ring-primary' }) -%}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-radio--has-error' }) -%}
    {%- endif -%}
    {%- if attr.disabled is defined and attr.disabled == true -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
@@ -108,11 +101,9 @@
 {% endblock %}

 {%- block choice_widget_collapsed -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' form-field')|trim }) -%}
    {%- if errors|length -%}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%}
-    {% else %}
-        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' placeholder:text-gray-400 focus:ring-primary' }) -%}
+        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' form-field--has-error' }) -%}
    {%- endif -%}
    {%- if disabled is defined and disabled == true -%}
        {%- set attr = attr|merge({'class': attr.class|default('') ~ ' cursor-not-allowed' }) -%}
@@ -1,15 +1,17 @@
-<div class="container py-8"
-     id="app"
+<div class="container mb-16"
+     id="myep"
     hx-boost="true"
     hx-indicator="#loading-indicator">
    <div class="relative z-20 flex items-center justify-between pb-4">
-        <div class="text-3xl font-medium">
-            MyE&amp;P
-        </div>
        {% if is_granted('ROLE_USER') %}
-            <div class="hidden lg:block">
-                {{ knp_menu_render(knp_menu_get('main')) }}
-            </div>
+            <nav class="w-full bg-zinc-100 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="lg:flex lg:items-center m-0">
+                        {{ knp_menu_render(knp_menu_get('main')) }}
+                    </div>
+                </div>
+            </nav>
        {% endif %}
    </div>
    <div id="content">
@@ -34,7 +34,7 @@
                {{ form_row(personalDataForm.phone) }}
                {{ form_row(personalDataForm.mobile) }}
            </div>
-            <button type="submit" class="btn">
+            <button type="submit" class="button bg-button">
                Speichern
            </button>
            {{ form_rest(personalDataForm) }}
@@ -49,11 +49,15 @@
                    Du bist aktuell {% if not personalData.communication.newsletter %}<strong>nicht</strong> {% endif%} zum Newsletter
                    angemeldet.
                </p>
-                <button type="button" class="btn" hx-post="{{ path('app_personal_data_newsletter') }}" hx-target="#app" hx-swap="outerHTML">
+                <button type="button"
+                        class="button bg-button bg-button--secondary"
+                        hx-post="{{ path('app_personal_data_newsletter') }}"
+                        hx-target="#myep"
+                        hx-swap="outerHTML">
                    {% if personalData.communication.newsletter %}
-                        vom Newsletter abmelden
+                        jetzt abmelden
                    {% else %}
-                        zum Newsletter anmelden
+                        jetzt anmelden
                    {% endif %}
                </button>
            </div>
@@ -1,26 +1,28 @@
 {% extends 'layout.html.twig' %}

 {% block content %}
-    <div class="p-8 max-w-screen-sm border border-gray-300 rounded-md mx-auto">
-        <h2 class="text-2xl font-semibold pb-4">
-            Registrierung MyE&amp;P
-        </h2>
-        {{ form_start(form) }}
-        <div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
-            {{ form_row(form.firstName) }}
-            {{ form_row(form.name) }}
-            {{ form_row(form.gender) }}
-            {{ form_row(form.email) }}
-        </div>
-        <button type="submit" class="btn">
-            Absenden
-        </button>
-        <div class="pt-4">
-            <a href="{{ path('app_login') }}" class="underline">
-                zurück
-            </a>
-        </div>
-        {{ form_rest(form) }}
-        {{ form_end(form) }}
+    <h1 class="mb-4">
+        Registrierung MyE&amp;P
+    </h1>
+    {{ form_start(form) }}
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 mb-4">
+        {{ form_row(form.firstName) }}
+        {{ form_row(form.name) }}
+        {{ form_row(form.email) }}
+        {{ form_row(form.gender) }}
    </div>
+    <div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2">
+        <button type="submit" class="button bg-button">
+            registrieren
+        </button>
+        <button type="button"
+                hx-get="{{ path('app_login') }}"
+                hx-target="#myep"
+                hx-swap="outerHTML"
+                class="button bg-button bg-button--secondary">
+            zum Login
+        </button>
+    </div>
+    {{ form_rest(form) }}
+    {{ form_end(form) }}
 {% endblock %}
@@ -1,23 +1,24 @@
-{% extends 'layout.html.twig' %}
-
-{% block content %}
-    <div class="p-8 max-w-screen-sm border border-gray-300 rounded-md mx-auto">
-        <h2 class="text-2xl font-semibold pb-4">
-            Passwort zurücksetzen
-        </h2>
-        {{ form_start(form) }}
-        <div class="pb-4">
-            {{ form_row(form.email) }}
-        </div>
-        <button type="submit" class="btn">
-            Absenden
-        </button>
-        <div class="pt-4">
-            <a href="{{ path('app_login') }}" class="underline">
-                zurück
-            </a>
-        </div>
-        {{ form_rest(form) }}
-        {{ form_end(form) }}
-    </div>
-{% endblock %}
+{{ form_start(form) }}
+{{ form_row(form.email) }}
+<div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2 mt-4">
+    <button type="submit" class="button bg-button bg-button--secondary">
+        Passwort erneuern
+    </button>
+    <button type="button"
+            hx-get="{{ path('app_login') }}"
+            hx-target="#login-form"
+            hx-select="#login-form"
+            hx-swap="outerHTML"
+            class="button bg-button">
+        zum Login
+    </button>
+    <button type="button"
+            hx-get="{{ path('app_registration') }}"
+            hx-target="#myep"
+            hx-swap="outerHTML"
+            class="button bg-button">
+        registrieren
+    </button>
+</div>
+{{ form_rest(form) }}
+{{ form_end(form) }}
@@ -1,61 +1,97 @@
 {% extends 'layout.html.twig' %}

 {% block content %}
-    <div class="p-8 max-w-screen-sm border border-gray-300 rounded-md mx-auto">
-        {% if error %}
-            <div class="flex items-center space-x-1 bg-red-500 text-white p-2 rounded-md mb-6">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                </svg>
-                <span class="flex-1 text-sm">{{ error.messageKey|trans(error.messageData, 'security') }}</span>
-            </div>
-        {% endif %}
-        <h2 class="text-2xl font-semibold pb-4">
-            Login
-        </h2>
-        <form action="{{ path('app_login') }}" method="post">
-            <div class="mb-6">
-                <label for="username" class="block leading-6 text-gray-900">
-                    E-Mail:
-                </label>
-                <input type="email"
-                       id="username"
-                       name="_username"
-                       value="{{ last_username }}"
-                       class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
-                       required
-                       autofocus
-                       autocomplete="username">
-            </div>
-            <div class="mb-6">
-                <label for="password" class="block leading-6 text-gray-900">
-                    Passwort:
-                </label>
-                <input type="password"
-                       id="password"
-                       name="_password"
-                       class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
-                       required
-                       autocomplete="current-password">
-            </div>
-            <div class="flex items-start mb-6">
-                <label for="rememberme" class="flex h-6 items-center">
-                    <input type="checkbox" id="rememberme" name="_remember_me" class="h-4 w-4 rounded text-primary">
-                    <span class="block ml-3 leading-6">angemeldet bleiben</span>
-                </label>
-            </div>
-            <button type="submit" class="btn w-full">
-                Login
-            </button>
-            <div class="flex items-center space-x-2 pt-4">
-                <a href="{{ path('app_reset_password') }}" class="underline">
-                    Passwort vergessen?
-                </a>
-                <a href="{{ path('app_registration') }}" class="underline">
-                    Registrierung
-                </a>
-            </div>
-            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
-        </form>
+    <h1 class="mb-4">
+        Login MyE&amp;P
+    </h1>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div id="login-form">
+            {% if error %}
+                <div class="flex items-center space-x-1 bg-red-500 text-white p-2 rounded-md mb-6">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+                    </svg>
+                    <span class="flex-1 text-sm">{{ error.messageKey|trans(error.messageData, 'security') }}</span>
+                </div>
+            {% endif %}
+            <form action="{{ path('app_login') }}" method="post">
+                <div class="mb-4">
+                    <label for="username" class="block mb-1">
+                        E-Mail:
+                    </label>
+                    <input type="email"
+                           id="username"
+                           name="_username"
+                           value="{{ last_username }}"
+                           class="form-field"
+                           required
+                           autofocus
+                           autocomplete="username">
+                </div>
+                <div class="mb-4">
+                    <label for="password" class="block mb-1 text-gray-900">
+                        Passwort:
+                    </label>
+                    <input type="password"
+                           id="password"
+                           name="_password"
+                           class="form-field"
+                           required
+                           autocomplete="current-password">
+                </div>
+                <div class="relative flex items-start">
+                    <div class="flex h-6 items-center">
+                        <input type="checkbox" id="rememberme" name="_remember_me" class="form-checkbox">
+                    </div>
+                    <div class="ml-1 leading-6">
+                        <label for="rememberme">
+                            angemeldet bleiben
+                        </label>
+                    </div>
+                </div>
+                <div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2 mt-4">
+                    <button type="submit" class="button bg-button">
+                        Login
+                    </button>
+                    <button type="button"
+                            hx-get="{{ path('app_reset_password') }}"
+                            hx-target="#login-form"
+                            class="button bg-button bg-button--secondary">
+                        Passwort vergessen?
+                    </button>
+                    <button type="button"
+                            hx-get="{{ path('app_registration') }}"
+                            hx-target="#myep"
+                            hx-swap="outerHTML"
+                            class="button bg-button bg-button--secondary">
+                        registrieren
+                    </button>
+                </div>
+                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
+            </form>
+        </div>
+        <div>
+            <h3 class="mb-2">
+                Neu!
+            </h3>
+            <p class="mb-4">
+                Melde dich jetzt bei MyEP an und du kannst jederzeit auf deine aktuellen Buchungen zugreifen und
+                diese abändern. Egal ob du einen Kurs oder eine Skipasserweiterung hinzufügen/entfernen möchtest,
+                oder das vegetarische Essen auswählen willst. Im neuen Portal ist das nun kostenlos bis 7 Tage vor
+                Reisebeginn möglich!
+            </p>
+            <h3 class="mb-2">
+                Noch keine Zugangsdaten?
+            </h3>
+            <p class="mb-2">
+                Dann gib deine E-Mail ein, mit der Du gebucht hast und klicke auf "Passwort vergessen"! Und wir
+                senden dir ein E-Mail mit einem Passwort-Link!
+            </p>
+            <p>
+                Ein LogIn ist nur möglich wenn Eure Daten schon durch eine Buchung oder Anfrage bei uns
+                angelegt wurden. Wenn Ihr auch Kunde werden möchtet, dann schickt uns Eure Interessen über unser
+                <a href="https://www.ep-reisen.de/skireisen/unternehmen/kontakt/kontaktformular/" title="Kontaktformular">Kontaktformular</a>.
+            </p>
+        </div>
    </div>
 {% endblock %}