style: update grid layout and improve form structure
All checks were successful
build / build (pull_request) Successful in 5m0s

This commit is contained in:
Hop In, I Have Puppies AND WiFi 2025-02-13 20:56:27 +01:00
parent 2ccba65185
commit fb53e61bc7
Signed by: jleibl
GPG Key ID: E7B6F77BF5EDB6F7
2 changed files with 8 additions and 11 deletions

View File

@ -1,6 +1,7 @@
<div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-100 p-5 hover:shadow-lg transition-all duration-300 group"> <div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-100 p-5 hover:shadow-lg transition-all duration-300 group">
<div class="grid grid-cols-12 gap-5"> <div class="grid grid-cols-1 md:grid-cols-12 gap-3 md:gap-5">
<div class="relative col-span-3"> <div class="md:col-span-3">
<div class="mb-1.5 text-gray-600 font-medium text-sm">Ticket-Typ</div>
<div class="relative group"> <div class="relative group">
<twig:ux:icon name="mingcute:ticket-fill" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" /> <twig:ux:icon name="mingcute:ticket-fill" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" />
<select name="ticket" <select name="ticket"
@ -19,7 +20,8 @@
</div> </div>
</div> </div>
<div class="relative col-span-3"> <div class="md:col-span-3">
<div class="mb-1.5 text-gray-600 font-medium text-sm">Ernährung</div>
<div class="relative group"> <div class="relative group">
<twig:ux:icon name="mdi:food" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" /> <twig:ux:icon name="mdi:food" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" />
<select name="food" <select name="food"
@ -37,7 +39,8 @@
</div> </div>
</div> </div>
<div class="relative col-span-5"> <div class="md:col-span-5">
<div class="mb-1.5 text-gray-600 font-medium text-sm">Anmerkungen</div>
<div class="relative group"> <div class="relative group">
<twig:ux:icon name="mdi:note" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" /> <twig:ux:icon name="mdi:note" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" />
<input type="text" <input type="text"
@ -48,7 +51,7 @@
</div> </div>
</div> </div>
<div class="flex justify-center items-end col-span-1 pb-1"> <div class="flex justify-end md:justify-center items-end md:col-span-1">
<button data-action="form#removeEntry" <button data-action="form#removeEntry"
type="button" type="button"
class="group/btn p-3 hover:bg-red-50 rounded-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-red-200" class="group/btn p-3 hover:bg-red-50 rounded-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-red-200"

View File

@ -60,12 +60,6 @@
<span>Tickets</span> <span>Tickets</span>
</h2> </h2>
<div class="ml-5 grid grid-cols-4 gap-4 mb-4 px-4 text-sm font-medium text-gray-600">
<div>Ticket</div>
<div>Ernährung</div>
<div>Anmerkungen</div>
</div>
<div class="forms space-y-4"> <div class="forms space-y-4">
{% include 'ticket/_partials/_form.html.twig' %} {% include 'ticket/_partials/_form.html.twig' %}
</div> </div>