From 416adee11c912256308d6edd647fb6d66bf78463 Mon Sep 17 00:00:00 2001
From: Arne Schauf <git@asw.io>
Date: Wed, 30 Apr 2025 15:25:27 +0200
Subject: [PATCH] Refactor contact info and add phone support to team cards

Updated the "about us" page to use a styled list for contact info, improving alignment and readability. Added "phone" field support to the team card model and updated the template to display it. Consolidated and modernized styling for better responsiveness and consistency.
---
 core/models.py                         |  1 +
 core/templates/core/about_us_page.html | 67 ++++++++++++++++++++------
 2 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/core/models.py b/core/models.py
index a437d02..729eaa2 100644
--- a/core/models.py
+++ b/core/models.py
@@ -606,6 +606,7 @@ class AboutUsPage(Page):
             ('photo', ImageChooserBlock(required=False)),
             ('bio', blocks.RichTextBlock(required=False)),
             ('email', blocks.EmailBlock(required=False)),
+            ('phone', blocks.CharBlock(max_length=128, required=False)),
             ('linkedin', blocks.URLBlock(required=False)),
             ('xing', blocks.URLBlock(required=False)),
         ])),
diff --git a/core/templates/core/about_us_page.html b/core/templates/core/about_us_page.html
index 284ddac..a0a922d 100644
--- a/core/templates/core/about_us_page.html
+++ b/core/templates/core/about_us_page.html
@@ -75,6 +75,29 @@
         padding: 1rem 1.5rem;
     }
 
+    /* Contact info list styling - aligned with contact_form_page */
+    .contact-info-list li {
+        padding: 0.75rem 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        transition: transform 0.2s ease;
+    }
+
+    .contact-info-list li:last-child {
+        border-bottom: none;
+    }
+
+    .contact-info-list li:hover {
+        transform: translateX(5px);
+    }
+
+    .contact-info-list i {
+        color: var(--bs-primary);
+        font-size: 1.2rem;
+        width: 30px;
+        text-align: center;
+    }
+
+    /* Keep team-social-link for backward compatibility */
     .team-social-link {
         display: inline-flex;
         align-items: center;
@@ -149,6 +172,12 @@
             height: 300px;
         }
 
+        /* Responsive styling for contact info list */
+        .contact-info-list li {
+            padding: 0.5rem 0;
+        }
+
+        /* Keep team-social-link for backward compatibility */
         .team-social-link {
             width: 100%;
             margin-right: 0;
@@ -245,26 +274,36 @@
                         </div>
                         <div class="card-footer bg-transparent">
                             <h5 class="text-muted mb-3 small">Kontaktmöglichkeiten:</h5>
-                            <div class="d-flex flex-wrap">
+                            <ul class="list-unstyled contact-info-list">
                                 {% if block.value.email %}
-                                <a href="mailto:{{ block.value.email }}" class="team-social-link" title="Send an email">
-                                    <i class="bi bi-envelope"></i>
-                                    <span>Email</span>
-                                </a>
+                                <li>
+                                    <a href="mailto:{{ block.value.email }}" class="text-decoration-none text-dark">
+                                        <i class="bi bi-envelope"></i> {{ block.value.email }}
+                                    </a>
+                                </li>
+                                {% endif %}
+                                {% if block.value.phone %}
+                                <li>
+                                    <a href="tel:{{ block.value.phone }}" class="text-decoration-none text-dark">
+                                        <i class="bi bi-telephone"></i> {{ block.value.phone }}
+                                    </a>
+                                </li>
                                 {% endif %}
                                 {% if block.value.linkedin %}
-                                <a href="{{ block.value.linkedin }}" target="_blank" class="team-social-link" title="View LinkedIn profile">
-                                    <i class="bi bi-linkedin"></i>
-                                    <span>LinkedIn</span>
-                                </a>
+                                <li>
+                                    <a href="{{ block.value.linkedin }}" target="_blank" class="text-decoration-none text-dark">
+                                        <i class="bi bi-linkedin"></i> LinkedIn
+                                    </a>
+                                </li>
                                 {% endif %}
                                 {% if block.value.xing %}
-                                <a href="{{ block.value.xing }}" target="_blank" class="team-social-link" title="View Xing profile">
-                                    <i class="bi bi-x"></i>
-                                    <span>Xing</span>
-                                </a>
+                                <li>
+                                    <a href="{{ block.value.xing }}" target="_blank" class="text-decoration-none text-dark">
+                                        <i class="bi bi-x"></i> Xing
+                                    </a>
+                                </li>
                                 {% endif %}
-                            </div>
+                            </ul>
                         </div>
                     </div>
                 </div>