style: update grid layout and improve form structure #22

Merged
csimonis merged 1 commits from task/fix-mobile-form into main 2025-02-13 19:57:05 +00:00
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="grid grid-cols-12 gap-5">
<div class="relative col-span-3">
<div class="grid grid-cols-1 md:grid-cols-12 gap-3 md:gap-5">
<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">
<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"
@ -19,7 +20,8 @@
</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">
<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"
@ -37,7 +39,8 @@
</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">
<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"
@ -48,7 +51,7 @@
</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"
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"

View File

@ -60,12 +60,6 @@
<span>Tickets</span>
</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">
{% include 'ticket/_partials/_form.html.twig' %}
</div>