style: update grid layout and improve form structure (#22)
Reviewed-on: #22 Reviewed-by: Constantin Simonis <constantin@simonis.lol> Co-authored-by: Jan-Marlon Leibl <jleibl@proton.me> Co-committed-by: Jan-Marlon Leibl <jleibl@proton.me>
This commit is contained in:
parent
2ccba65185
commit
265ba6a8f5
@ -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"
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user