EP/myep
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: adopt main website styles

Browse Source
This commit is contained in:
Björn Fromme
2024-12-04 09:33:09 +01:00
parent 273db3bdb7
commit 2454cfa682
17 changed files with 274 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/styles/_components.css
+1
View File
@@ -1,3 +1,4 @@
@import "components/typography.css";
@import "components/forms.css";
@import "components/button.css";
@import "components/menu.css";
assets/styles/components/button.css
+37 -9
View File
@@ -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;
}
assets/styles/components/forms.css
+22
View File
@@ -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;
}
assets/styles/components/menu.css
+3 -4
View File
@@ -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;
}
assets/styles/components/typography.css
+28
View File
@@ -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;
}
src/Controller/Booking/EditController.php
+1 -1
View File
@@ -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);
src/Controller/PersonalDataController.php
+1 -1
View File
@@ -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);
tailwind.config.js
+5 -5
View File
@@ -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'),
],
}
templates/base.html.twig
+1 -1
View File
@@ -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>
templates/booking/edit.html.twig
+3 -2
View File
@@ -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>
templates/booking/index.html.twig
+3 -3
View File
@@ -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>
templates/forms.html.twig
+12 -21
View File
@@ -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' }) -%}
templates/layout.html.twig
+8 -6
View File
@@ -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">
<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">
templates/personal_data/index.html.twig
+8 -4
View File
@@ -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>
templates/registration/index.html.twig
+14 -12
View File
@@ -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">
<h1 class="mb-4">
Registrierung MyE&amp;P
</h2>
</h1>
{{ form_start(form) }}
<div class="grid grid-cols-2 gap-x-8 gap-y-4 pb-4">
<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.gender) }}
{{ form_row(form.email) }}
{{ form_row(form.gender) }}
</div>
<button type="submit" class="btn">
Absenden
<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 class="pt-4">
<a href="{{ path('app_login') }}" class="underline">
zurück
</a>
</div>
{{ form_rest(form) }}
{{ form_end(form) }}
</div>
{% endblock %}
templates/reset_password/index.html.twig
+23 -22
View File
@@ -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
{{ 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>
<div class="pt-4">
<a href="{{ path('app_login') }}" class="underline">
zurück
</a>
</div>
{{ form_rest(form) }}
{{ form_end(form) }}
</div>
{% endblock %}
<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) }}
templates/security/login.html.twig
+57 -21
View File
@@ -1,7 +1,11 @@
{% extends 'layout.html.twig' %}
{% block content %}
<div class="p-8 max-w-screen-sm border border-gray-300 rounded-md mx-auto">
<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">
@@ -10,52 +14,84 @@
<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">
<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="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"
class="form-field"
required
autofocus
autocomplete="username">
</div>
<div class="mb-6">
<label for="password" class="block leading-6 text-gray-900">
<div class="mb-4">
<label for="password" class="block mb-1 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"
class="form-field"
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>
<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>
<button type="submit" class="btn w-full">
</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>
<div class="flex items-center space-x-2 pt-4">
<a href="{{ path('app_reset_password') }}" class="underline">
<button type="button"
hx-get="{{ path('app_reset_password') }}"
hx-target="#login-form"
class="button bg-button bg-button--secondary">
Passwort vergessen?
</a>
<a href="{{ path('app_registration') }}" class="underline">
Registrierung
</a>
</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 %}