feat: improve layout of contacts page

This commit is contained in:
Björn Fromme
2024-04-04 10:10:42 +02:00
parent d9a205cfd1
commit 1f6ccd8974
4 changed files with 69 additions and 40 deletions
+46 -32
View File
@@ -2,37 +2,32 @@
{% block title %}Kontakt{% endblock %}
{% macro contacts(contacts, email) %}
<div class="pb-8">
<div class="flex justify-center">
<div class="flex flex-wrap items-center">
{% for contact in contacts %}
<div class="flex flex-col items-center space-y-2 px-8 py-4">
{% if contact.photo %}
<img src="{{ asset(contact.photo.filename | imagine_filter('profile')) }}"
class="w-32 h-auto border-2 border-primary rounded-full"
alt="{{ contact.name }}">
{% endif %}
<div class="font-bold">
{{ contact.name }}
</div>
{% if contact.destination %}
<div>
{{ contact.destination }}
</div>
<div>
<a href="mailto:{{ contact.email }}" class="underline">{{ contact.email }}</a>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% if email %}
<div class="text-center">
<a href="mailto:{{ email }}" class="text-lg fobt-bold underline">{{ email }}</a>
{% macro contact(contact) %}
<div class="flex flex-col items-center space-y-2 px-8 py-4 w-48 md:w-64">
{% if contact.photo %}
<div class="relative group">
<img src="{{ asset(contact.photo.filename | imagine_filter('contact')) }}"
class="w-40 md:w-48 h-auto border-2 border-primary rounded-full"
alt="{{ contact.name }}">
<div class="absolute top-0 left-0 inset-0 rounded-full flex flex-col items-center justify-center space-y-2 bg-primary/80 text-white invisible group-hover:visible">
{% if contact.email %}
<a href="mailto:{{ contact.email }}" title="E-Mail">
{{ icon('mail', 'w-8 h-8') }}
</a>
{% endif %}
{% if contact.phone %}
<a href="tel:{{ contact.phone }}" title="Telefon">
{{ icon('phone', 'w-8 h-8') }}
</a>
{% endif %}
</div>
</div>
{% endif %}
<div class="text-center">
<span class="font-bold">{{ contact.name }}</span>
{% if contact.category %}<br>{{ ('label.contact.category.' ~ contact.category) | trans }}{% endif %}
{% if contact.destination %}<br>{{ contact.destination }}{% endif %}
</div>
</div>
{% endmacro %}
@@ -48,11 +43,30 @@
<p class="pb-4">
Ansonsten melde dich gerne beim Team Personalplanung!
</p>
{{ _self.contacts(generalContacts, '[email protected]') }}
<div class="pb-8">
<div class="flex justify-center flex-wrap items-start">
{% for contact in contacts.hr %}
{{ _self.contact(contact) }}
{% endfor %}
</div>
</div>
<p class="pb-4">
Hast du Fragen zu deinem nächsten Einsatz in einer konkreten Destination? Dann melde dich gerne bei den
zuständigen Büromitarbeitenden.
zuständigen Büromitarbeitenden oder Hausleitungen.
</p>
{{ _self.contacts(destinationContacts) }}
<div class="pb-4">
<div class="flex justify-center flex-wrap items-start">
{% for contact in contacts.management %}
{{ _self.contact(contact) }}
{% endfor %}
</div>
</div>
<div class="pb-8">
<div class="flex justify-center flex-wrap items-start">
{% for contact in contacts.house_management %}
{{ _self.contact(contact) }}
{% endfor %}
</div>
</div>
</div>
{% endblock %}