feat: several improvements in layout
This commit is contained in:
Björn Fromme
@@ -4,3 +4,4 @@
|
||||
@import "components/menu.css";
|
||||
@import "components/toast.css";
|
||||
@import "components/tooltip.css";
|
||||
@import "components/table-responsive.css";
|
||||
@@ -1,9 +1,9 @@
|
||||
.menu--main {
|
||||
@apply lg:flex lg:items-center m-0;
|
||||
@apply flex items-center m-0;
|
||||
}
|
||||
|
||||
.menu--main a {
|
||||
@apply block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800;
|
||||
@apply block p-2 md:p-4 text-black hover:bg-zinc-400 hover:text-zinc-800 text-sm md:text-base;
|
||||
}
|
||||
|
||||
.menu--main .current a {
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
.responsive {
|
||||
@apply text-sm md:text-base;
|
||||
}
|
||||
|
||||
.responsive thead {
|
||||
@apply hidden md:table-header-group;
|
||||
}
|
||||
|
||||
.responsive tbody tr {
|
||||
@apply block mb-2 md:table-row;
|
||||
}
|
||||
|
||||
.responsive td {
|
||||
@apply grid grid-cols-2 gap-x-2 last:col-span-2 md:table-cell;
|
||||
}
|
||||
|
||||
.responsive td:before {
|
||||
content: attr(data-label);
|
||||
@apply block font-bold last:hidden md:hidden;
|
||||
}
|
||||
@@ -14,6 +14,7 @@ class AppExtension extends AbstractExtension
|
||||
new TwigFilter('file_size', [AppRuntime::class, 'formatBytes']),
|
||||
new TwigFilter('file_icon', [AppRuntime::class, 'fileIconFilter'], ['is_safe' => ['html']]),
|
||||
new TwigFilter('format_money', [AppRuntime::class, 'formatMoney']),
|
||||
new TwigFilter('map_status', [AppRuntime::class, 'mapStatus']),
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@@ -47,4 +47,15 @@ class AppRuntime implements RuntimeExtensionInterface
|
||||
'class' => $classes,
|
||||
]);
|
||||
}
|
||||
|
||||
public function mapStatus(string $status): string
|
||||
{
|
||||
return match ($status) {
|
||||
'F', 'F/S' => 'Festbuchung',
|
||||
'S' => 'Stornierung',
|
||||
'O' => 'Option',
|
||||
'U' => 'Umbuchung',
|
||||
default => '',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,49 +4,64 @@
|
||||
<h2 class="text-2xl font-semibold pb-4">
|
||||
Meine Buchungen
|
||||
</h2>
|
||||
<div class="space-y-8">
|
||||
<table class="w-full mb-4 responsive">
|
||||
<thead>
|
||||
<tr class="bg-zinc-200">
|
||||
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
|
||||
Reise
|
||||
</th>
|
||||
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
Buchungsdatum
|
||||
</th>
|
||||
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
Buchungsnummer
|
||||
</th>
|
||||
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
Reisepreis
|
||||
</th>
|
||||
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
offen
|
||||
</th>
|
||||
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
|
||||
Status
|
||||
</th>
|
||||
<th>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for booking in bookings %}
|
||||
<div class="p-4 border border-gray-300 rounded-md overflow-hidden" {{ stimulus_controller('toggle', { 'open': false }, { 'closed': 'hidden' }) }}>
|
||||
<div role="button" class="flex items-center justify-between py-2" {{ stimulus_action('toggle', 'toggle', 'click') }}>
|
||||
<div class="text-lg md:text-xl font-semibold">
|
||||
{% if booking.travelData %}
|
||||
{{ booking.travel }}, {{ booking.travelData.dateFrom | date('d.m.Y') }} - {{ booking.travelData.dateTo | date('d.m.Y') }}
|
||||
{% else %}
|
||||
{{ booking.travel }}, {{ booking.travelDate | date('d.m.Y') }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" {{ stimulus_target('toggle', 'icon') }}>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-4 sm:flex-row sm:items-start sm:space-x-2" {{ stimulus_target('toggle', 'toggle') }}>
|
||||
<div class="flex-1 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
<div>
|
||||
<div class="font-semibold pb-2">
|
||||
Buchungsdatum
|
||||
</div>
|
||||
{{ booking.bookingDate | date('d.m.Y') }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold pb-2">
|
||||
Buchungsnummer
|
||||
</div>
|
||||
{{ booking.bookingNumber }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold pb-2">
|
||||
Reisepreis
|
||||
</div>
|
||||
{{ booking.price|format_currency('EUR') }}/<br>{{ booking.balance ? booking.balance|format_currency('EUR') : '-' }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold pb-2">
|
||||
Status
|
||||
</div>
|
||||
{{ booking.status }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex sm:flex-col space-x-2 sm:space-x-0 sm:space-y-1">
|
||||
<tr class="odd:bg-zinc-50 hover:bg-zinc-100 odd:hover:bg-zinc-100">
|
||||
<td class="border-r border-zinc-200 px-2 py-1 md:p-2"
|
||||
data-label="Reise">
|
||||
{% if booking.travelData %}
|
||||
{{ booking.travel }}, {{ booking.travelData.dateFrom | date('d.m.Y') }} - {{ booking.travelData.dateTo | date('d.m.Y') }}
|
||||
{% else %}
|
||||
{{ booking.travel }}, {{ booking.travelDate | date('d.m.Y') }}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="border-r border-zinc-200 px-2 py-1 md:p-2"
|
||||
data-label="Buchungsdatum">
|
||||
{{ booking.bookingDate | date('d.m.Y') }}
|
||||
</td>
|
||||
<td class="border-r border-zinc-200 px-2 py-1 md:p-2"
|
||||
data-label="Buchungsnummer">
|
||||
{{ booking.bookingNumber }}
|
||||
</td>
|
||||
<td class="border-r border-zinc-200 px-2 py-1 md:p-2"
|
||||
data-label="Reisepreis">
|
||||
{{ booking.price|format_currency('EUR') }}
|
||||
</td>
|
||||
<td class="border-r border-zinc-200 px-2 py-1 md:p-2"
|
||||
data-label="offen">
|
||||
{{ booking.balance ? booking.balance|format_currency('EUR') : '-' }}
|
||||
</td>
|
||||
<td class="border-r border-zinc-200 px-2 py-1 md:p-2"
|
||||
data-label="Status">
|
||||
{{ booking.status|map_status }}
|
||||
</td>
|
||||
<td class="px-2 py-1 md:p-2">
|
||||
<div class="flex md:flex-col space-x-2 md:space-x-0 md:space-y-1">
|
||||
{% if booking.editable %}
|
||||
<a href="{{ path('app_booking_edit', { 'id': booking.id }) }}"
|
||||
class="button bg-button bg-button--secondary button--small">
|
||||
@@ -64,12 +79,9 @@
|
||||
Reisedokumente
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div>
|
||||
Keine Daten
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</tbody>
|
||||
</table>
|
||||
{% endblock %}
|
||||
@@ -1,15 +1,13 @@
|
||||
<div class="mb-16"
|
||||
<div class="my-16"
|
||||
id="myep"
|
||||
hx-boost="true"
|
||||
hx-indicator="#loading-indicator">
|
||||
<div class="relative z-20 flex items-center justify-between pb-4">
|
||||
<div class="fixed inset-x-0 top-0 z-20 flex items-center justify-between pb-4">
|
||||
{% if is_granted('ROLE_USER') %}
|
||||
<nav class="w-full bg-zinc-100 flex items-center mb-8 relative">
|
||||
<nav class="w-full bg-zinc-200 flex items-center mb-8 relative">
|
||||
<div class="flex-1 block text-2xl px-4">My E&P</div>
|
||||
<div class="bg-zinc-50 shadow w-full lg:w-auto absolute lg:relative z-10 lg:z-auto top-full lg:top-auto left-0 lg:shadow-none lg:flex lg:space-x-4">
|
||||
<div class="lg:flex lg:items-center m-0">
|
||||
{{ knp_menu_render(knp_menu_get('main')) }}
|
||||
</div>
|
||||
<div class="bg-zinc-200">
|
||||
{{ knp_menu_render(knp_menu_get('main')) }}
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user