From 8aa42db71fe228498d265a89eaba2c683a63879b Mon Sep 17 00:00:00 2001
From: Tobias Kunze <r@rixx.de>
Date: Thu, 11 Sep 2025 13:20:13 +0200
Subject: [PATCH] Extract card layout into reusable CSS classes

---
 .../organizations/service_detail.html         | 27 +++++-----
 .../frontend/organizations/services.html      | 45 ++++++++--------
 src/servala/static/css/servala.css            | 52 ++++++++++++++++++-
 3 files changed, 85 insertions(+), 39 deletions(-)

diff --git a/src/servala/frontend/templates/frontend/organizations/service_detail.html b/src/servala/frontend/templates/frontend/organizations/service_detail.html
index d9ca433..55cf31e 100644
--- a/src/servala/frontend/templates/frontend/organizations/service_detail.html
+++ b/src/servala/frontend/templates/frontend/organizations/service_detail.html
@@ -46,28 +46,27 @@
                 {% endif %}
             </div>
         </div>
-        <div class="row">
+        <div class="row match-height card-grid">
             {% for offering in service.offerings.all %}
                 <div class="col-6 col-lg-3 col-md-4">
                     <div class="card">
-                        <div class="card-header d-flex align-items-center">
+                        <div class="card-header card-header-with-logo">
                             {% if offering.provider.logo %}
                                 <img src="{{ offering.provider.logo.url }}"
-                                     alt="{{ offering.provider.name }}"
-                                     class="me-3"
-                                     style="max-width: 48px;
-                                            max-height: 48px">
+                                     alt="{{ offering.provider.name }}">
                             {% endif %}
-                            <div class="d-flex flex-column">
-                                <h4 class="mb-0">{{ offering.provider.name }}</h4>
+                            <div class="card-header-content">
+                                <h4>{{ offering.provider.name }}</h4>
                             </div>
                         </div>
-                        <div class="card-body">
-                            {% if offering.description %}
-                                <p class="card-text">{{ offering.description|urlize }}</p>
-                            {% elif offering.provider.description %}
-                                <p class="card-text">{{ offering.provider.description|urlize }}</p>
-                            {% endif %}
+                        <div class="card-content">
+                            <div class="card-body">
+                                {% if offering.description %}
+                                    <p class="card-text">{{ offering.description|urlize }}</p>
+                                {% elif offering.provider.description %}
+                                    <p class="card-text">{{ offering.provider.description|urlize }}</p>
+                                {% endif %}
+                            </div>
                         </div>
                         <div class="card-footer d-flex justify-content-between">
                             <span></span>
diff --git a/src/servala/frontend/templates/frontend/organizations/services.html b/src/servala/frontend/templates/frontend/organizations/services.html
index 673f844..766b5bc 100644
--- a/src/servala/frontend/templates/frontend/organizations/services.html
+++ b/src/servala/frontend/templates/frontend/organizations/services.html
@@ -16,20 +16,17 @@
                 </div>
             </div>
         </div>
-        <div class="row match-height service-cards-container mb-5">
+        <div class="row match-height card-grid service-cards-container mb-5">
             {% for service in services %}
                 <div class="col-12 col-md-6 col-lg-3">
                     <div class="card">
-                        <div class="card-header d-flex align-items-center">
+                        <div class="card-header card-header-with-logo">
                             {% if service.logo %}
                                 <img src="{{ service.logo.url }}"
-                                     alt="{{ service.name }}"
-                                     class="me-3"
-                                     style="max-width: 48px;
-                                            max-height: 48px">
+                                     alt="{{ service.name }}">
                             {% endif %}
-                            <div class="d-flex flex-column">
-                                <h4 class="mb-0">{{ service.name }}</h4>
+                            <div class="card-header-content">
+                                <h4>{{ service.name }}</h4>
                                 <small class="text-muted">{{ service.category }}</small>
                             </div>
                         </div>
@@ -38,21 +35,21 @@
                                 {% if service.description %}<p class="card-text">{{ service.description|urlize }}</p>{% endif %}
                             </div>
                         </div>
-                            <div class="card-footer d-flex justify-content-between align-items-center gap-2">
-                                {% if service.featured_links %}
-                                    {% with featured_link=service.featured_links.0 %}
-                                        <a href="{{ featured_link.url }}"
-                                           target="_blank"
-                                           rel="noopener noreferrer"
-                                           class="btn btn-outline-primary">
-                                            {{ featured_link.title }}
-                                            <i class="bi bi-box-arrow-up-right ms-1"></i>
-                                        </a>
-                                    {% endwith %}
-                                {% else %}
-                                    <span></span>
-                                {% endif %}
-                                <a href="{{ service.slug }}/" class="btn btn-light-primary">{% translate "View Availability" %}</a>
+                        <div class="card-footer d-flex justify-content-between align-items-center gap-2">
+                            {% if service.featured_links %}
+                                {% with featured_link=service.featured_links.0 %}
+                                    <a href="{{ featured_link.url }}"
+                                       target="_blank"
+                                       rel="noopener noreferrer"
+                                       class="btn btn-outline-primary">
+                                        {{ featured_link.title }}
+                                        <i class="bi bi-box-arrow-up-right ms-1"></i>
+                                    </a>
+                                {% endwith %}
+                            {% else %}
+                                <span></span>
+                            {% endif %}
+                            <a href="{{ service.slug }}/" class="btn btn-light-primary">{% translate "View Availability" %}</a>
                         </div>
                     </div>
                 </div>
@@ -60,7 +57,7 @@
                 <div class="card">
                     <div class="card-body">
                         <div class="card-content">
-                        <p>{% translate "No services found." %}</p>
+                            <p>{% translate "No services found." %}</p>
                         </div>
                     </div>
                 </div>
diff --git a/src/servala/static/css/servala.css b/src/servala/static/css/servala.css
index 4b905a5..9a59b8f 100644
--- a/src/servala/static/css/servala.css
+++ b/src/servala/static/css/servala.css
@@ -175,7 +175,57 @@ a.btn-keycloak {
     padding-right: 28px;
 }
 
-/* Service cards equal height styling */
+/* Card layout utilities - reusable for any card grid */
+.card-grid {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.card-grid > * {
+    display: flex;
+    align-items: stretch;
+}
+
+.card-grid .card {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.card-grid .card-content {
+    flex-grow: 1;
+}
+
+.card-grid .card-body {
+    flex-grow: 1;
+}
+
+/* Card header with logo styling */
+.card-header-with-logo {
+    display: flex;
+    align-items: center;
+}
+
+.card-header-with-logo img {
+    max-width: 48px;
+    max-height: 48px;
+    margin-right: 1rem;
+}
+
+.card-header-with-logo .card-header-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.card-header-with-logo .card-header-content h4 {
+    margin-bottom: 0;
+}
+
+.card-header-with-logo .card-header-content .text-muted {
+    font-size: 0.875rem;
+}
+
+/* Backwards compatibility - keep existing service-cards-container class */
 .service-cards-container > * {
     display: flex;
     align-items: stretch;