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

@@ -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)),
         ])),

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">
+                                <li>
-                                    <i class="bi bi-envelope"></i>
+                                    <a href="mailto:{{ block.value.email }}" class="text-decoration-none text-dark">
-                                    <span>Email</span>
+                                        <i class="bi bi-envelope"></i> {{ block.value.email }}
-                                </a>
+                                    </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">
+                                <li>
-                                    <i class="bi bi-linkedin"></i>
+                                    <a href="{{ block.value.linkedin }}" target="_blank" class="text-decoration-none text-dark">
-                                    <span>LinkedIn</span>
+                                        <i class="bi bi-linkedin"></i> LinkedIn
-                                </a>
+                                    </a>
+                                </li>
                                 {% endif %}
                                 {% if block.value.xing %}
-                                <a href="{{ block.value.xing }}" target="_blank" class="team-social-link" title="View Xing profile">
+                                <li>
-                                    <i class="bi bi-x"></i>
+                                    <a href="{{ block.value.xing }}" target="_blank" class="text-decoration-none text-dark">
-                                    <span>Xing</span>
+                                        <i class="bi bi-x"></i> Xing
-                                </a>
+                                    </a>
+                                </li>
                                 {% endif %}
-                            </div>
+                            </ul>
                         </div>
                     </div>
                 </div>