From 117e883061701f8cd8327b630a5a154b62a1df47 Mon Sep 17 00:00:00 2001
From: Matthew Lemon <y@yulqen.org>
Date: Sun, 1 Sep 2024 20:07:27 +0100
Subject: Made the badges on the resource cards align horizontally

---
 .../resources/resource_card_featured.html          | 12 ++--
 .../resources/resource_card_standard.html          | 78 ++++++++++------------
 2 files changed, 39 insertions(+), 51 deletions(-)

diff --git a/pyblackbird_cc/templates/resources/resource_card_featured.html b/pyblackbird_cc/templates/resources/resource_card_featured.html
index e920cef..473c928 100644
--- a/pyblackbird_cc/templates/resources/resource_card_featured.html
+++ b/pyblackbird_cc/templates/resources/resource_card_featured.html
@@ -10,10 +10,8 @@
             <h5 class="card-title"><a
                     href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a></h5>
         </div>
-        <div>
+        <div class="d-flex flex-row justify-content-start align-items-center mt-2">
             <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
-        </div>
-        <div>
             {% if resource.main_resource_category_name == "English as a Foreign Language (EFL)" %}
                 <span class="badge me-2"
                       style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">EFL</span>
@@ -21,12 +19,10 @@
                 <span class="badge me-2"
                       style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">{{ resource.main_resource_category_name }}</span>
             {% endif %}
-        </div>
-        {% if request.user.is_authenticated and request.user.is_staff %}
-            <div>
+            {% if request.user.is_authenticated and request.user.is_staff %}
                 <span class="badge bg-info me-2">Feature slot: {{ resource.feature_slot }}</span>
-            </div>
-        {% endif %}
+            {% endif %}
+        </div>
         {% if resource.card_description %}
             <p class="card-text my-2">{{ resource.card_description | markdown | safe }}</p>
         {% else %}
diff --git a/pyblackbird_cc/templates/resources/resource_card_standard.html b/pyblackbird_cc/templates/resources/resource_card_standard.html
index 2b280a9..bdc3325 100644
--- a/pyblackbird_cc/templates/resources/resource_card_standard.html
+++ b/pyblackbird_cc/templates/resources/resource_card_standard.html
@@ -5,53 +5,45 @@
 <div class="col-md-6 mb-3">
 
     <div class="card mx-2 mt-2 my-card-shadow-sm" style="border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 1px;" onmouseover="this.classList.add('my-card-shadow-lg')" onmouseout="this.classList.remove('my-card-shadow-lg')">
-        <div class="row g-0">
-            <div class="col-4">
-                <img class="img-fluid rounded-start"
-                     src="{{ resource.thumbnail_urls|first }}"
-                     alt="{{ resource.thumbnail_filename }}">
-            </div>
-            <div class="col-8">
-                <div class="card-body">
-                    <div class="d-flex flex-row justify-content-start align-content-center">
-                        <h5 class="card-title"><a
-                                href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a></h5>
-                    </div>
-                    <div>
-                        <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
-                    </div>
-                    <div>
-                        {% if resource.main_resource_category_name == "English as a Foreign Language (EFL)" %}
-                            <span class="badge me-2"
-                                  style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">EFL</span>
-                        {% else %}
-                            <span class="badge me-2"
-                                  style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">{{ resource.main_resource_category_name }}</span>
-                        {% endif %}
-                    </div>
+    <div class="row g-0">
+        <div class="col-4">
+            <img class="img-fluid rounded-start"
+                 src="{{ resource.thumbnail_urls|first }}"
+                 alt="{{ resource.thumbnail_filename }}">
+        </div>
+        <div class="col-8">
+            <div class="card-body">
+                <div class="d-flex flex-row justify-content-start align-items-center">
+                    <h5 class="card-title"><a
+                            href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a></h5>
+                </div>
+                <div class="d-flex flex-row justify-content-start align-items-center mt-2">
+                    <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
+                    {% if resource.main_resource_category_name == "English as a Foreign Language (EFL)" %}
+                        <span class="badge me-2"
+                              style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">EFL</span>
+                    {% else %}
+                        <span class="badge me-2"
+                              style="background-color: {{ resource.main_resource_category_colour_css_class }}; color: {{ resource.main_resource_badge_foreground_colour }}">{{ resource.main_resource_category_name }}</span>
+                    {% endif %}
                     {% if request.user.is_authenticated and request.user.is_staff %}
-                        <div>
-                            <span class="badge bg-info me-2">Feature slot: {{ resource.feature_slot }}</span>
-                        </div>
+                        <span class="badge bg-info me-2">Feature slot: {{ resource.feature_slot }}</span>
                     {% endif %}
-{#                    {% if resource.card_description %}#}
-{#                        <p class="card-text my-2">{{ resource.card_description | markdown | safe }}</p>#}
-{#                    {% else %}#}
-{#                        <p class="card-text my-2">{{ resource.description | markdown | safe }}</p>#}
-{#                    {% endif %}#}
-                    <p class="card-text"><small class="text-muted">FREE</small></p>
                 </div>
+                <p class="card-text m-1"><small class="text-muted">1 credit</small></p>
             </div>
-            {% if request.user.is_authenticated and request.user.is_staff %}
-                <div class="card-footer">
-                    <a href="{% url 'resources:resource_update_metadata' resource.id %}"
-                       class="btn btn-outline-primary btn-sm">Edit</a>
-                    <a href="{% url 'resources:resource_update_thumbnails' resource.id %}"
-                       class="btn btn-outline-primary btn-sm">Edit Feature Images</a>
-                    <a href="{% url 'resources:resource_update_pdfs' resource.id %}"
-                       class="btn btn-outline-primary btn-sm">Add PDFs</a>
-                </div>
-            {% endif %}
         </div>
+        {% if request.user.is_authenticated and request.user.is_staff %}
+            <div class="card-footer">
+                <a href="{% url 'resources:resource_update_metadata' resource.id %}"
+                   class="btn btn-outline-primary btn-sm">Edit</a>
+                <a href="{% url 'resources:resource_update_thumbnails' resource.id %}"
+                   class="btn btn-outline-primary btn-sm">Edit Feature Images</a>
+                <a href="{% url 'resources:resource_update_pdfs' resource.id %}"
+                   class="btn btn-outline-primary btn-sm">Add PDFs</a>
+            </div>
+        {% endif %}
     </div>
+</div>
+
 </div>
\ No newline at end of file
-- 
cgit v1.2.3