feat: improve layout of contacts page

config/packages/liip_imagine.yaml

@@ -23,3 +23,8 @@ liip_imagine:
             jpeg_quality: 75
             filters:
                 thumbnail: { size: [ 128, 128 ], mode: outbound }
+        contact:
+            format: jpeg
+            jpeg_quality: 75
+            filters:
+                thumbnail: { size: [ 256, 256 ], mode: outbound }

src/Controller/Teamer/ContactController.php

@@ -2,6 +2,7 @@
 
 namespace App\Controller\Teamer;
 
+use App\Entity\Contact;
 use App\Repository\ContactRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
@@ -15,19 +16,23 @@ class ContactController extends AbstractController
     #[Route('/teamer/contact', name: 'app_teamer_contact')]
     public function index(): Response
     {
-        $generalContacts = $this
+        $allContacts = $this
             ->contactRepository
-            ->getGeneralContacts()
+            ->findAll()
         ;
 
-        $destinationContacts = $this
-            ->contactRepository
-            ->getDestinationContacts()
-        ;
+        $contacts = [
+            Contact::CATEGORY_HR => [],
+            Contact::CATEGORY_MANAGEMENT => [],
+            Contact::CATEGORY_HOUSE_MANAGEMENT => [],
+        ];
+
+        foreach ($allContacts as $contact) {
+            $contacts[$contact->getCategory()][] = $contact;
+        }
 
         return $this->render('teamer/contact/index.html.twig', [
-            'generalContacts' => $generalContacts,
-            'destinationContacts' => $destinationContacts,
+            'contacts' => $contacts,
         ]);
     }
 }

templates/teamer/contact/index.html.twig

@@ -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">
+{% 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 %}
-                            <img src="{{ asset(contact.photo.filename | imagine_filter('profile')) }}"
-                                 class="w-32 h-auto border-2 border-primary rounded-full"
+            <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 %}
-                        <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>
+                    {% if contact.phone %}
+                        <a href="tel:{{ contact.phone }}" title="Telefon">
+                            {{ icon('phone', 'w-8 h-8') }}
+                        </a>
                     {% endif %}
                 </div>
-                {% endfor %}
             </div>
-        </div>
-        {% if email %}
+        {% endif %}
         <div class="text-center">
-                <a href="mailto:{{ email }}" class="text-lg fobt-bold underline">{{ email }}</a>
+            <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>
-        {% endif %}
     </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 %}

translations/messages.de.yaml

@@ -23,6 +23,11 @@ label:
       checked: geprüft
       paid: bezahlt
       rejected: abgelehnt
+  contact:
+    category:
+      hr: Personalplanung
+      management: Management
+      house_management: Hausmanagement
 
 message:
   confirm_contract: