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

feat: various improvements in styles and layout

Browse Source
This commit is contained in:
Björn Fromme
2025-12-09 11:20:43 +01:00
parent 0239aee89a
commit 3527be9c29
8 changed files with 70 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/styles/_base.css
+3 -3
View File
@@ -46,13 +46,13 @@
} }
.bg-outer--1 { .bg-outer--1 {
background-image: url('../images/bg_4.jpg'), linear-gradient(131.39deg, #0070E0 10.55%, #165883 53.93%, #18527B 80.73%); background-image: url('../images/bg_4.jpg'), linear-gradient(190deg, rgba(24, 82, 123, 1) 0%, rgba(22, 88, 131, 1) 62%, rgba(0, 112, 224, 1) 100%);;
} }
.bg-outer--2 { .bg-outer--2 {
background-image: url('../images/bg_5.jpg'), linear-gradient(131.39deg, #0070E0 10.55%, #165883 53.93%, #18527B 80.73%); background-image: url('../images/bg_5.jpg'), linear-gradient(190deg, rgba(24, 82, 123, 1) 0%, rgba(22, 88, 131, 1) 62%, rgba(0, 112, 224, 1) 100%);;
} }
.bg-inner { .bg-inner {
background-image: linear-gradient(311.39deg, #0070E0cc 16.35%, #165883cc 41.93%, #18527Bcc 56.29%); background-image: linear-gradient(190deg, rgba(24, 82, 123, 0.8) 0%, rgba(22, 88, 131, 0.8) 62%, rgba(0, 112, 224, 0.8) 100%);;
} }
assets/styles/components/button.css
+3 -2
View File
@@ -14,12 +14,13 @@
} }
.button--secondary { .button--secondary {
@apply bg-none bg-primary-light text-white; @apply bg-none bg-primary-dark text-white;
@apply hover:bg-primary-light/80; @apply hover:bg-primary-light/80;
} }
.button--primary { .button--primary {
@apply bg-pink text-white; background: linear-gradient(120deg, #960167 0%, #9e036a 40%, #fa1a8c 100%);
@apply text-white;
@apply hover:bg-none hover:bg-pink/80; @apply hover:bg-none hover:bg-pink/80;
} }
src/Controller/Booking/Create/IndexController.php
+1 -1
View File
@@ -150,7 +150,7 @@ class IndexController extends AbstractController
return $this->htmxRedirect($request, $returnUrl); return $this->htmxRedirect($request, $returnUrl);
} }
return $this->render('booking/modal_cancel.html.twig'); return $this->render('booking/create/modal_cancel.html.twig');
} }
/** /**
templates/account/index.html.twig
+1 -1
View File
@@ -6,7 +6,7 @@
Mein<br>Account Mein<br>Account
</h1> </h1>
</div> </div>
<div class="p-4 ld:p-8"> <div class="p-4 lg:p-8">
<nav> <nav>
<ul class="divide-y divide-primary-bg/40"> <ul class="divide-y divide-primary-bg/40">
<li class="py-4"> <li class="py-4">
templates/account/personal_data.html.twig
+1 -1
View File
@@ -6,7 +6,7 @@
Meine<br>Daten Meine<br>Daten
</h1> </h1>
</div> </div>
<div class="p-4 ld:p-8"> <div class="p-4 lg:p-8">
<div class="divide-y divide-primary-bg/40"> <div class="divide-y divide-primary-bg/40">
<div class="grid md:grid-cols-2 gap-x-8 gap-y-4 pb-8"> <div class="grid md:grid-cols-2 gap-x-8 gap-y-4 pb-8">
<div class="text-white"> <div class="text-white">
templates/booking/create/authenticate.html.twig
+53 -51
View File
@@ -5,38 +5,33 @@
{% include '_partials/_flashes.html.twig' %} {% include '_partials/_flashes.html.twig' %}
<h1 class="text-white uppercase pb-4 mb-8 border-b border-primary-bg/40"> <h1 class="text-white uppercase pb-4 mb-4 border-b border-primary-bg/40">
Neue<br>Buchung Neue<br>Buchung
</h1> </h1>
<div class="text-white uppercase pb-4 lg:pb-8"> <div class="lg:flex lg:space-x-8 pb-8 mb-8 border-b border-primary-bg/40">
{{ travel_title }}
<br>
{{ travel_date_from | date('d.m.Y') }} - {{ travel_date_to | date('d.m.Y') }}
<br>
{% if cmsData.hotel.images is defined %} {% if cmsData.hotel.images is defined %}
<img src="{{ cmsData.hotel.images.resized.l[0].url }}" <img src="{{ cmsData.hotel.images.resized.l[0].url }}"
alt="{{ cmsData.hotel.images.resized.l[0].alt }}" alt="{{ cmsData.hotel.images.resized.l[0].alt }}"
class="block w-full max-w-64 h-auto mt-4"> class="block w-full max-w-64 h-auto mb-4">
{% endif %} {% endif %}
<div class="text-white uppercase max-w-96">
<div class="text-xl lg:text-2xl font-semibold">
{{ travel_title }}
</div>
<div class="text-lg font-semibold">
{{ travel_date_from | date('d.m.Y') }} - {{ travel_date_to | date('d.m.Y') }}
</div>
</div>
</div> </div>
<div class="space-y-8 max-w-screen-sm">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div> <div>
<a href="{{ path('app_booking_create_step_1') }}" class="button button--secondary mb-4"> <a href="{{ path('app_booking_create_step_1') }}" class="button button--primary w-full md:w-auto">
Als Gast fortfahren Als Gast fortfahren
</a> </a>
<h2 class="text-base text-white">
Noch kein Account?
</h2>
<p class="text-white">
Nach Abschluss deiner Buchung wird automatisch ein Account für dich erstellt.
Du erhältst dann Zugangsdaten per E-Mail und kannst deine Buchungen jederzeit verwalten.
</p>
</div> </div>
<div> <div>
<h2 class="text-base text-white"> <h2 class="text-white">
Mit bestehendem Account anmelden Mit bestehendem Account anmelden
</h2> </h2>
@@ -44,45 +39,52 @@
{% include '_partials/_alert.html.twig' with { 'level': 'error', messages: [ error.messageKey|trans(error.messageData, 'security') ] } %} {% include '_partials/_alert.html.twig' with { 'level': 'error', messages: [ error.messageKey|trans(error.messageData, 'security') ] } %}
{% endif %} {% endif %}
<div class="pb-4"> <form action="{{ path('app_login') }}" method="post">
<form action="{{ path('app_login') }}" method="post"> <div class="mb-4">
<div class="mb-4"> <label for="username" class="mb-1 font-semibold text-white">
<label for="username" class="mb-1 font-semibold text-white"> E-Mail:
E-Mail: </label>
</label> <input type="email"
<input type="email" id="username"
id="username" name="_username"
name="_username" value="{{ last_username }}"
value="{{ last_username }}" class="form-field"
class="form-field" required
required autocomplete="username">
autocomplete="username"> </div>
</div>
<div class="mb-4"> <div class="mb-4">
<label for="password" class="mb-1 font-semibold text-white"> <label for="password" class="mb-1 font-semibold text-white">
Passwort: Passwort:
</label> </label>
<input type="password" <input type="password"
id="password" id="password"
name="_password" name="_password"
class="form-field" class="form-field"
required required
autocomplete="current-password"> autocomplete="current-password">
</div> </div>
<button type="submit" class="button button--primary"> <button type="submit" class="button button--primary w-full md:w-auto">
Anmelden und fortfahren Anmelden und fortfahren
</button> </button>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"> <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
</form> </form>
</div>
<a href="{{ path('app_reset_password') }}" <a href="{{ path('app_reset_password') }}"
class="text-sm underline text-white"> class="inline-block text-sm underline text-white mt-2">
Passwort vergessen? Passwort vergessen?
</a> </a>
</div>
<div>
<h3 class=" text-white">
Noch kein Account?
</h3>
<div class="text-white">
Nach Abschluss deiner Buchung wird automatisch ein Account für dich erstellt.
Du erhältst dann Zugangsdaten per E-Mail und kannst deine Buchungen jederzeit verwalten.
</div>
</div> </div>
</div> </div>
templates/booking/modal_cancel.html.twig → templates/booking/create/modal_cancel.html.twig
+4 -4
View File
@@ -10,13 +10,13 @@
<button type="button" <button type="button"
hx-post="{{ path('app_booking_cancel') }}" hx-post="{{ path('app_booking_cancel') }}"
hx-target="body" hx-target="body"
class="button button--small button--primary"> class="button button--primary">
Ja Abbrechen
</button> </button>
<button type="button" <button type="button"
{{ stimulus_action('modal', 'close') }} {{ stimulus_action('modal', 'close') }}
class="button button--small button--secondary"> class="button button--secondary">
Nein Weiter
</button> </button>
</div> </div>
{% endblock %} {% endblock %}
templates/booking/edit/modal_cancel.html.twig
+4 -4
View File
@@ -10,13 +10,13 @@
<button type="button" <button type="button"
hx-post="{{ path('app_booking_edit_cancel', {id: bookingId}) }}" hx-post="{{ path('app_booking_edit_cancel', {id: bookingId}) }}"
hx-target="body" hx-target="body"
class="button button--small button--primary"> class="button button--primary">
Ja Abbrechen
</button> </button>
<button type="button" <button type="button"
{{ stimulus_action('modal', 'close') }} {{ stimulus_action('modal', 'close') }}
class="button button--small button--secondary"> class="button button--secondary">
Nein Weiter
</button> </button>
</div> </div>
{% endblock %} {% endblock %}