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

feat: improved button sizes in mobile view

Browse Source
This commit is contained in:
Björn Fromme
2026-04-03 14:57:41 +02:00
parent 8d666baf28
commit ca873a99f4
9 changed files with 21 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/styles/components/button.css
+2 -2
View File
@@ -1,6 +1,6 @@
.button { .button {
@apply inline-flex items-center justify-center space-x-2 h-10 leading-10 px-4 md:px-8 cursor-pointer; @apply inline-flex items-center justify-center space-x-2 h-8 leading-8 md:h-10 md:leading-10 px-4 md:px-8 cursor-pointer;
@apply uppercase leading-none text-center; @apply uppercase leading-none text-center text-sm md:text-base;
@apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-dark; @apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-dark;
@apply rounded-md; @apply rounded-md;
} }
templates/_partials/_cancel_button.html.twig
+7
View File
@@ -0,0 +1,7 @@
<button type="button"
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-8 h-8 md:w-10 md:h-10">
<svg class="w-6 h-6 md:w-8 md: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>
templates/booking/create/modal_cancel.html.twig
+4 -4
View File
@@ -4,19 +4,19 @@
{% block content %} {% block content %}
<div class="pb-8"> <div class="pb-8">
Willst du den Buchungsvorgang wirklich abbrechen? Möchtest du den Buchungsvorgang wirklich abbrechen?
</div> </div>
<div class="flex justify-between"> <div class="flex flex-col space-y-4 md:flex-row md:space-y-0 justify-between">
<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--primary"> class="button button--primary">
Abbrechen Ja, Buchung abbrechen
</button> </button>
<button type="button" <button type="button"
{{ stimulus_action('modal', 'close') }} {{ stimulus_action('modal', 'close') }}
class="button button--secondary"> class="button button--secondary">
Weiter Nein, Buchung abschließen
</button> </button>
</div> </div>
{% endblock %} {% endblock %}
templates/booking/create/step_1.html.twig
+1 -7
View File
@@ -87,13 +87,7 @@
</div> </div>
<div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20"> <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="*"> <div class="flex justify-between" hx-disinherit="*">
<button type="button" {% include '_partials/_cancel_button.html.twig' %}
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">
<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>
<button type="submit" class="button button--primary" {{ qa_attribute('btn-submit')}}> <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit')}}>
Weiter zu Schritt 2 Weiter zu Schritt 2
</button> </button>
templates/booking/create/step_2.html.twig
+1 -8
View File
@@ -61,14 +61,7 @@
</div> </div>
<div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20"> <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="*"> <div class="flex justify-between" hx-disinherit="*">
<button type="button" {% include '_partials/_cancel_button.html.twig' %}
title="Buchung abbrechen"
hx-get="{{ path('app_booking_cancel') }}"
hx-target="body"
hx-swap="beforeend"
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"> <div class="flex items-center gap-2">
<a href="{{ path('app_booking_create_step_1') }}" <a href="{{ path('app_booking_create_step_1') }}"
class="button button--secondary" class="button button--secondary"
templates/booking/create/step_3.html.twig
+1 -8
View File
@@ -71,14 +71,7 @@
</div> </div>
<div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20"> <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="*"> <div class="flex justify-between" hx-disinherit="*">
<button type="button" {% include '_partials/_cancel_button.html.twig' %}
title="Buchung abbrechen"
hx-get="{{ path('app_booking_cancel') }}"
hx-target="body"
hx-swap="beforeend"
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"> <div class="flex items-center gap-2">
<a href="{{ path('app_booking_create_step_2') }}" <a href="{{ path('app_booking_create_step_2') }}"
class="button button--secondary" class="button button--secondary"
templates/booking/create/step_4.html.twig
+1 -8
View File
@@ -564,14 +564,7 @@
</div> </div>
<div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20"> <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="*"> <div class="flex justify-between" hx-disinherit="*">
<button type="button" {% include '_partials/_cancel_button.html.twig' %}
title="Buchung abbrechen"
hx-get="{{ path('app_booking_cancel') }}"
hx-target="body"
hx-swap="beforeend"
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"> <div class="flex items-center gap-2">
<a href="{{ path('app_booking_create_step_3') }}" <a href="{{ path('app_booking_create_step_3') }}"
class="button button--secondary" class="button button--secondary"
templates/booking/edit/index.html.twig
+2 -2
View File
@@ -86,8 +86,8 @@
<div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20"> <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="*"> <div class="flex justify-between" hx-disinherit="*">
<a href="{{ isDirty ? path('app_booking_edit_cancel', {id: bookingData.id}) : path('app_bookings') }}" <a href="{{ isDirty ? path('app_booking_edit_cancel', {id: bookingData.id}) : path('app_bookings') }}"
class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10"> class="inline-flex items-center justify-center bg-gray-200 rounded-md w-8 h-8 md:w-10 md: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> <svg class="w-6 h-6 md:w-8 md: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>
</a> </a>
{% if isDirty %} {% if isDirty %}
<button type="submit" <button type="submit"
templates/booking/edit/participant.html.twig
+2 -2
View File
@@ -34,9 +34,9 @@
<div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20"> <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
<div class="flex justify-between"> <div class="flex justify-between">
<a href="{{ path('app_booking_edit', {id: bookingDto.booking.id}) }}" <a href="{{ path('app_booking_edit', {id: bookingDto.booking.id}) }}"
class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10" class="inline-flex items-center justify-center bg-gray-200 rounded-md w-8 h-8 md:w-10 md:h-10"
{{ qa_attribute('btn-cancel') }}> {{ qa_attribute('btn-cancel') }}>
<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> <svg class="w-6 h-6 md:w-8 md: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>
</a> </a>
<button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}> <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
Speichern Speichern