From 2454cfa68201c75753370b1578ef89b8c3b0e059 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= Date: Wed, 4 Dec 2024 09:33:09 +0100 Subject: [PATCH] feat: adopt main website styles --- assets/styles/_components.css | 1 + assets/styles/components/button.css | 46 +++++-- assets/styles/components/forms.css | 22 ++++ assets/styles/components/menu.css | 7 +- assets/styles/components/typography.css | 28 ++++ src/Controller/Booking/EditController.php | 2 +- src/Controller/PersonalDataController.php | 2 +- tailwind.config.js | 10 +- templates/base.html.twig | 2 +- templates/booking/edit.html.twig | 5 +- templates/booking/index.html.twig | 6 +- templates/forms.html.twig | 33 ++--- templates/layout.html.twig | 18 +-- templates/personal_data/index.html.twig | 12 +- templates/registration/index.html.twig | 44 ++++--- templates/reset_password/index.html.twig | 47 +++---- templates/security/login.html.twig | 148 ++++++++++++++-------- 17 files changed, 274 insertions(+), 159 deletions(-) create mode 100644 assets/styles/components/typography.css diff --git a/assets/styles/_components.css b/assets/styles/_components.css index e1324f9..f35b6ba 100644 --- a/assets/styles/_components.css +++ b/assets/styles/_components.css @@ -1,3 +1,4 @@ +@import "components/typography.css"; @import "components/forms.css"; @import "components/button.css"; @import "components/menu.css"; diff --git a/assets/styles/components/button.css b/assets/styles/components/button.css index 426332a..02b8672 100644 --- a/assets/styles/components/button.css +++ b/assets/styles/components/button.css @@ -1,16 +1,44 @@ -.btn { - @apply inline-flex space-x-1 justify-center rounded-lg text-sm uppercase font-semibold py-2.5 px-4; - @apply bg-primary text-white hover:bg-primary/80 shadow-md; +.button { + @apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8 cursor-pointer; + @apply uppercase leading-none text-center; + @apply transition-colors outline-none focus:outline-none; } -.btn--small { - @apply text-xs py-1 px-2 rounded-md; +.button--small { + @apply px-2 py-1 md:px-4 text-xs sm:text-sm; } -.btn--secondary { - @apply bg-secondary text-gray-800 hover:bg-secondary/80; +.button--full { + @apply block w-full; } -.btn--active { - @apply shadow-none; +.bg-button { + @apply bg-primary-light text-white; + @apply hover:bg-secondary; +} + + +.bg-button--active, +.bg-button--secondary { + @apply bg-secondary; +} + +.bg-button--muted { + @apply bg-zinc-300 hover:bg-zinc-300; +} + +.bg-button--dark { + @apply bg-primary-dark; +} + +.bg-button--light { + @apply bg-white border-2; + @apply font-bold; + @apply border-primary-light text-primary; +} + +.bg-button--light:hover, +.bg-button--light.button--active { + @apply bg-white; + @apply border-secondary text-secondary; } diff --git a/assets/styles/components/forms.css b/assets/styles/components/forms.css index a9c95c5..9d53970 100644 --- a/assets/styles/components/forms.css +++ b/assets/styles/components/forms.css @@ -2,3 +2,25 @@ label.required:after { @apply inline-block text-sm; content: '*'; } + +.form-field { + @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 block w-full; +} + +.form-field--has-error { + @apply border-red-500; +} + +.form-checkbox, +.form-radio { + @apply border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-secondary h-4 w-4; +} + +.form-checkbox--has-error, +.form-radio--has-error { + @apply border-red-500; +} + +input[disabled] { + @apply cursor-not-allowed; +} diff --git a/assets/styles/components/menu.css b/assets/styles/components/menu.css index e6c9c53..66fe089 100644 --- a/assets/styles/components/menu.css +++ b/assets/styles/components/menu.css @@ -1,12 +1,11 @@ .menu--main { - @apply flex items-center space-x-2; + @apply lg:flex lg:items-center m-0; } .menu--main a { - @apply uppercase text-lg font-semibold pb-1 px-2 border-b-2 border-white; - @apply hover:border-primary; + @apply block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800; } .menu--main .current a { - @apply border-primary; + @apply bg-zinc-400 text-zinc-800; } \ No newline at end of file diff --git a/assets/styles/components/typography.css b/assets/styles/components/typography.css new file mode 100644 index 0000000..422e22a --- /dev/null +++ b/assets/styles/components/typography.css @@ -0,0 +1,28 @@ +h1, +.headline--primary { + @apply block text-3xl md:text-4xl font-bold mb-2; +} + +h2, +.headline--secondary { + @apply block text-2xl md:text-3xl font-bold mb-2; +} + +h3, +.headline--3 { + @apply block text-xl md:text-2xl font-bold leading-6 mb-2; +} + +h4, +.headline--4 { + @apply block md:text-lg font-bold; +} + +.headline--underlined:after { + @apply block border-b-4 border-primary-light pb-4 mb-4 -mt-2 w-20; + content: ''; +} + +.subline { + @apply block text-xs md:text-sm font-normal leading-6 opacity-60; +} diff --git a/src/Controller/Booking/EditController.php b/src/Controller/Booking/EditController.php index 2416763..dc7bd28 100644 --- a/src/Controller/Booking/EditController.php +++ b/src/Controller/Booking/EditController.php @@ -78,7 +78,7 @@ class EditController extends AbstractController $form = $this->createForm(BookingType::class, $formData, [ 'attr' => ['novalidate' => 'novalidate'], 'hx_post' => $this->generateUrl('app_booking_edit', ['id' => $id]), - 'hx_target' => '#app', + 'hx_target' => '#myep', ]); $form->handleRequest($request); diff --git a/src/Controller/PersonalDataController.php b/src/Controller/PersonalDataController.php index 40894ae..d7adc7a 100644 --- a/src/Controller/PersonalDataController.php +++ b/src/Controller/PersonalDataController.php @@ -35,7 +35,7 @@ class PersonalDataController extends AbstractController $personalDataForm = $this->createForm(PersonalDataType::class, $personalData, [ 'attr' => ['novalidate' => 'novalidate'], 'hx_post' => $this->generateUrl('app_personal_data'), - 'hx_target' => '#app', + 'hx_target' => '#myep', ]); $personalDataForm->handleRequest($request); diff --git a/tailwind.config.js b/tailwind.config.js index e5bd523..6cd4c85 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,19 +15,19 @@ module.exports = { fontFamily: { sans: ['Lato', 'sans-serif'], }, - fontWeight: { - semibold: '700', - bold: '900', - }, colors: { primary: '#3d8ccb', secondary: '#f9c700', + 'primary-bg': '#ebf3fa', + 'primary-light': '#0080ff', + 'primary-medium': '#165883', + 'primary-dark': '#18527b', + pink: '#fa1a8c', } }, }, plugins: [ require('@tailwindcss/forms'), - require('@tailwindcss/typography'), ], } diff --git a/templates/base.html.twig b/templates/base.html.twig index b9a727f..38c6a88 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -10,7 +10,7 @@ {{ encore_entry_script_tags('app') }} {% endblock %} - + {% block body %}{% endblock %} diff --git a/templates/booking/edit.html.twig b/templates/booking/edit.html.twig index 14f5522..735539a 100644 --- a/templates/booking/edit.html.twig +++ b/templates/booking/edit.html.twig @@ -232,10 +232,11 @@
+ class="button bg-button"> zurück -
diff --git a/templates/booking/index.html.twig b/templates/booking/index.html.twig index 26670b2..f8dbc39 100644 --- a/templates/booking/index.html.twig +++ b/templates/booking/index.html.twig @@ -49,17 +49,17 @@
{% if booking.editable %} + class="button bg-button bg-button--secondary button--small"> bearbeiten {% endif %} Bestätigung Reisedokumente diff --git a/templates/forms.html.twig b/templates/forms.html.twig index 5e2580e..f04a19e 100644 --- a/templates/forms.html.twig +++ b/templates/forms.html.twig @@ -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' }) -%} diff --git a/templates/layout.html.twig b/templates/layout.html.twig index f238ddb..62b6e9d 100644 --- a/templates/layout.html.twig +++ b/templates/layout.html.twig @@ -1,15 +1,17 @@ -
-
- MyE&P -
{% if is_granted('ROLE_USER') %} - + {% endif %}
diff --git a/templates/personal_data/index.html.twig b/templates/personal_data/index.html.twig index cb7b2a0..48f7880 100644 --- a/templates/personal_data/index.html.twig +++ b/templates/personal_data/index.html.twig @@ -34,7 +34,7 @@ {{ form_row(personalDataForm.phone) }} {{ form_row(personalDataForm.mobile) }}
- {{ form_rest(personalDataForm) }} @@ -49,11 +49,15 @@ Du bist aktuell {% if not personalData.communication.newsletter %}nicht {% endif%} zum Newsletter angemeldet.

-
diff --git a/templates/registration/index.html.twig b/templates/registration/index.html.twig index 6ef756c..925c63d 100644 --- a/templates/registration/index.html.twig +++ b/templates/registration/index.html.twig @@ -1,26 +1,28 @@ {% extends 'layout.html.twig' %} {% block content %} -
-

- Registrierung MyE&P -

- {{ form_start(form) }} -
- {{ form_row(form.firstName) }} - {{ form_row(form.name) }} - {{ form_row(form.gender) }} - {{ form_row(form.email) }} -
- -
- - zurück - -
- {{ form_rest(form) }} - {{ form_end(form) }} +

+ Registrierung MyE&P +

+ {{ form_start(form) }} +
+ {{ form_row(form.firstName) }} + {{ form_row(form.name) }} + {{ form_row(form.email) }} + {{ form_row(form.gender) }}
+
+ + +
+ {{ form_rest(form) }} + {{ form_end(form) }} {% endblock %} \ No newline at end of file diff --git a/templates/reset_password/index.html.twig b/templates/reset_password/index.html.twig index 46cfd44..aec8637 100644 --- a/templates/reset_password/index.html.twig +++ b/templates/reset_password/index.html.twig @@ -1,23 +1,24 @@ -{% extends 'layout.html.twig' %} - -{% block content %} -
-

- Passwort zurücksetzen -

- {{ form_start(form) }} -
- {{ form_row(form.email) }} -
- -
- - zurück - -
- {{ form_rest(form) }} - {{ form_end(form) }} -
-{% endblock %} \ No newline at end of file +{{ form_start(form) }} +{{ form_row(form.email) }} +
+ + + +
+{{ form_rest(form) }} +{{ form_end(form) }} diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig index e1d7009..2064103 100644 --- a/templates/security/login.html.twig +++ b/templates/security/login.html.twig @@ -1,61 +1,97 @@ {% extends 'layout.html.twig' %} {% block content %} -
- {% if error %} -
- - - - {{ error.messageKey|trans(error.messageData, 'security') }} -
- {% endif %} -

- Login -

-
-
- - -
-
- - -
-
- -
- -
- - Passwort vergessen? - - - Registrierung - -
- -
+

+ Login MyE&P +

+
+
+ {% if error %} +
+ + + + {{ error.messageKey|trans(error.messageData, 'security') }} +
+ {% endif %} +
+
+ + +
+
+ + +
+
+
+ +
+
+ +
+
+
+ + + +
+ +
+
+
+

+ Neu! +

+

+ 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! +

+

+ Noch keine Zugangsdaten? +

+

+ 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! +

+

+ 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 + Kontaktformular. +

+
{% endblock %} \ No newline at end of file