WIP: Improve mobile layout

This commit is contained in:
Björn Fromme
2023-10-20 13:16:56 +02:00
parent fd23ea7503
commit 826b634346
8 changed files with 67 additions and 80 deletions
+1 -1
View File
@@ -2,7 +2,7 @@
{% block body %}
<div class="container lg:grid lg:grid-cols-4 gap-8 py-8">
<div class="lg:col-span-4 flex items-center justify-between">
<div class="lg:col-span-4 flex items-center justify-between pb-4 lg:pb-0">
<a href="{{ path(app.user.defaultRoute) }}">
<img class="h-8 w-auto" src="{{ asset('build/images/logo.svg') }}" alt="My E&amp;P Team">
</a>
@@ -6,7 +6,7 @@
<h1 class="text-2xl font-bold pb-8">
Bewerbung
</h1>
<div class="grid grid-cols-2 gap-8 items-start">
<div class="grid lg:grid-cols-2 gap-8 items-start">
<div class="bg-gray-100 rounded-md p-4">
{% include '_partials/_assignment_info.html.twig' %}
</div>
+1 -1
View File
@@ -6,7 +6,7 @@
<h1 class="text-2xl font-bold pb-8">
Einsatzübersicht
</h1>
<div class="grid grid-cols-2 gap-8 items-start">
<div class="grid lg:grid-cols-2 gap-8 items-start">
<div class="bg-gray-100 rounded-md p-4">
{% include '_partials/_assignment_info.html.twig' %}
</div>
+55 -66
View File
@@ -6,71 +6,60 @@
<h1 class="text-2xl font-bold pb-8">
Meine Merkliste
</h1>
<div class="data-table-wrapper">
<div class="data-table-wrapper__inner">
<table class="data-table">
<thead>
<tr>
<th>
{{ knp_pagination_sortable(pagination, 'Einsatz&shy;beginn', 'assignment.dateFrom') }}
</th>
<th>
{{ knp_pagination_sortable(pagination, 'Einsatz&shy;ende', 'assignment.dateTo') }}
</th>
<th>
{{ knp_pagination_sortable(pagination, 'Jobprofil', 'assignment.jobProfile') }}
</th>
<th>
{{ knp_pagination_sortable(pagination, 'Destination', 'destination.dateFrom') }}
</th>
<th>
{{ knp_pagination_sortable(pagination, 'Busbegleitung ab', 'assignment.pickup') }}
</th>
<th></th>
</tr>
</thead>
<tbody>
{% for assignment in pagination %}
<tr>
<td>
{% set dateFrom = assignment.dateFrom ? assignment.dateFrom : assignment.destination.dateFrom %}
{{ dateFrom|date('d.m.Y') }}
</td>
<td>
{% set dateTo = assignment.dateTo ? assignment.dateTo : assignment.destination.dateTo %}
{{ dateTo|date('d.m.Y') }}
</td>
<td>
{{ assignment.jobProfile.name }}
</td>
<td>
{{ assignment.destination.product }}
<br>
{{ assignment.destination.hotel }}
</td>
<td>
{{ assignment.pickup ? assignment.pickup|bpn_pickup_label|default('-') : '-' }}
<br>
{{ assignment.pickupDate ? assignment.pickupDate|date('d.m.Y') : '' }}
</td>
<td>
<div class="flex items-center space-x-1 justify-end">
<a href="{{ path('app_teamer_assignment', { 'uuid': assignment.uuid, 'r': return_url() }) }}">
{{ icon('info', 'w-5 h-5') }}
</a>
</div>
</td>
</tr>
{% else %}
<tr>
<td colspan="6">
Keine Daten...
</td>
</tr>
{% endfor %}
</tbody>
</table>
{{ knp_pagination_render(pagination) }}
</div>
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4 pb-2">
{% for assignment in pagination %}
<div class="flex flex-col justify-between rounded-md border border-gray-200 bg-gray-100 p-4">
<div class="flex flex-col space-y-2 pb-2">
<div class="flex items-start space-x-2">
{{ icon('flag-' ~ assignment.destination.country, 'w-5 h-5 shrink-0') }}
<span class="flex-1 font-bold">{{ assignment.destination.product }}</span>
</div>
<div class="flex items-start space-x-2">
{{ icon('calendar', 'w-5 h-5 shrink-0') }}
<span class="flex-1">{{ assignment.effectivePeriod.start|date('d.m.Y') }} - {{ assignment.effectivePeriod.end|date('d.m.Y') }}</span>
</div>
<div class="flex items-start space-x-2">
{{ icon('profile', 'w-5 h-5 shrink-0') }}
<span class="flex-1">{{ assignment.jobProfile.name }}</span>
</div>
<div class="flex items-start space-x-2">
{{ icon('house', 'w-5 h-5 shrink-0') }}
<span class="flex-1">{{ assignment.destination.hotel }}</span>
</div>
{% if assignment.pickup %}
<div class="flex items-start space-x-2">
{{ icon('bus', 'w-5 h-5 shrink-0') }}
<span>{{ assignment.pickup|bpn_pickup_label|default('-') }} {{ assignment.effectivePickupDate ? assignment.effectivePickupDate|date('d.m.Y') : '' }}</span>
</div>
{% endif %}
</div>
<div>
{% if assignment.applications|length %}
{% set icon = 'hourglass' %}
{% set class = 'bg-yellow-100 text-yellow-800 hover:bg-yellow-50' %}
{% set url = path('app_teamer_assignment', { 'uuid': assignment.uuid, 'r': return_url() }) %}
{% set label = 'in Bearbeitung' %}
{% elseif assignment.dispositions|length %}
{% set icon = 'check' %}
{% set class = 'bg-green-100 text-green-700 hover:bg-green-50' %}
{% set url = path('app_teamer_disposition_detail', { 'uuid': assignment.dispositions[0].uuid }) %}
{% set label = 'eingeteilt' %}
{% else %}
{% set icon = 'info' %}
{% set class = 'btn--info' %}
{% set url = path('app_teamer_assignment', { 'uuid': assignment.uuid, 'r': return_url() }) %}
{% set label = 'bewerben' %}
{% endif %}
<a href="{{ url }}"
class="btn btn--small flex items-center space-x-2 {{ class }}">
{{ icon(icon, 'w-4 h-4') }}
<span>{{ label }}</span>
</a>
</div>
</div>
{% else %}
... ist leer
{% endfor %}
</div>
{{ knp_pagination_render(pagination) }}
{% endblock %}
+4 -1
View File
@@ -20,7 +20,7 @@
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4 pb-2">
{% for assignment in pagination %}
<div class="flex flex-col justify-between rounded-md border border-gray-200 bg-gray-100 p-4">
<div class="relative flex flex-col justify-between rounded-md border border-gray-200 bg-gray-100 p-4">
<div class="flex flex-col space-y-2 pb-2">
<div class="flex items-start space-x-2">
{{ icon('flag-' ~ assignment.destination.country, 'w-5 h-5 shrink-0') }}
@@ -68,6 +68,9 @@
<span>{{ label }}</span>
</a>
</div>
{% if teamer.bookmarks.contains(assignment) %}
{{ icon('star', 'w-5 h-5 text-yellow-500 absolute top-0 right-0 mt-2 mr-2') }}
{% endif %}
</div>
{% endfor %}
</div>