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

feat: back-button in booking create flow

Browse Source
This commit is contained in:
Björn Fromme
2026-04-03 14:20:19 +02:00
parent be0c9d67bb
commit 8d666baf28
5 changed files with 56 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/styles/components/button.css
+14 -9
View File
@@ -1,7 +1,7 @@
.button {
@apply inline-flex items-center justify-center space-x-2 h-10 leading-10 px-4 md:px-8 cursor-pointer;
@apply uppercase leading-none text-center;
@apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-light;
@apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-dark;
@apply rounded-md;
}
@@ -20,42 +20,47 @@
}
.button--secondary {
@apply bg-none bg-primary-dark text-white;
@apply hover:bg-primary-light/80;
@apply bg-none bg-primary-light text-white;
@apply hover:bg-primary-light/50;
}
.button--neutral {
@apply bg-none bg-gray-200;
@apply hover:bg-gray-200/50;
}
.sbw {
.button--primary {
@apply bg-none bg-sbw-secondary text-white;
@apply hover:bg-none hover:bg-sbw-primary/80;
@apply hover:bg-none hover:bg-sbw-primary/50;
}
.button--secondary {
@apply bg-none bg-sbw-primary-dark text-white;
@apply hover:bg-none hover:bg-sbw-primary/80;
@apply hover:bg-none hover:bg-sbw-primary/50;
}
}
.snz {
.button--primary {
@apply bg-none bg-snz-secondary text-white;
@apply hover:bg-none hover:bg-snz-primary/80;
@apply hover:bg-none hover:bg-snz-primary/50;
}
.button--secondary {
@apply bg-none bg-snz-primary-dark text-white;
@apply hover:bg-none hover:bg-snz-primary/80;
@apply hover:bg-none hover:bg-snz-primary/50;
}
}
.ser {
.button--primary {
@apply bg-none bg-ser-secondary text-white;
@apply hover:bg-none hover:bg-ser-primary/80;
@apply hover:bg-none hover:bg-ser-primary/50;
}
.button--secondary {
@apply bg-none bg-ser-primary text-white;
@apply hover:bg-none hover:bg-ser-primary/80;
@apply hover:bg-none hover:bg-ser-primary/50;
}
}
templates/booking/create/step_2.html.twig
+9 -1
View File
@@ -62,17 +62,25 @@
<div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
<div class="flex justify-between" hx-disinherit="*">
<button type="button"
title="Buchung abbrechen"
hx-get="{{ path('app_booking_cancel') }}"
hx-target="body"
hx-swap="beforeend"
class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
class="button button--neutral w-10 h-10 px-0">
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
</button>
<div class="flex items-center gap-2">
<a href="{{ path('app_booking_create_step_1') }}"
class="button button--secondary"
{{ qa_attribute('btn-back') }}>
Zurück
</a>
<button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
Weiter zu Schritt 3
</button>
</div>
</div>
</div>
{{ form_rest(form) }}
{{ form_end(form) }}
{% endblock %}
templates/booking/create/step_2_participant.html.twig
+2 -2
View File
@@ -37,8 +37,8 @@
<div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
<div class="flex justify-between">
<a href="{{ path('app_booking_create_step_2') }}"
class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
class="button button--secondary">
Zurück
</a>
<button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
Speichern
templates/booking/create/step_3.html.twig
+9 -1
View File
@@ -72,17 +72,25 @@
<div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
<div class="flex justify-between" hx-disinherit="*">
<button type="button"
title="Buchung abbrechen"
hx-get="{{ path('app_booking_cancel') }}"
hx-target="body"
hx-swap="beforeend"
class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
class="button button--neutral w-10 h-10 px-0">
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
</button>
<div class="flex items-center gap-2">
<a href="{{ path('app_booking_create_step_2') }}"
class="button button--secondary"
{{ qa_attribute('btn-back') }}>
Zurück
</a>
<button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
Weiter zu Schritt 4
</button>
</div>
</div>
</div>
{{ form_rest(form) }}
{{ form_end(form) }}
{% endblock %}
templates/booking/create/step_4.html.twig
+9 -1
View File
@@ -565,12 +565,19 @@
<div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
<div class="flex justify-between" hx-disinherit="*">
<button type="button"
title="Buchung abbrechen"
hx-get="{{ path('app_booking_cancel') }}"
hx-target="body"
hx-swap="beforeend"
class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
class="button button--neutral w-10 h-10 px-0">
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
</button>
<div class="flex items-center gap-2">
<a href="{{ path('app_booking_create_step_3') }}"
class="button button--secondary"
{{ qa_attribute('btn-back') }}>
Zurück
</a>
<button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
{% if bookingCreateDto.bookingStatus == 'A' %}
Anfragen
@@ -580,6 +587,7 @@
</button>
</div>
</div>
</div>
{{ form_rest(form) }}
{{ form_end(form) }}
{% endblock %}