From dcefb7dfc5b171fcc18fb0adf11a49cb39ff2c6b Mon Sep 17 00:00:00 2001
From: Matthew Lemon <y@yulqen.org>
Date: Sun, 28 Jul 2024 16:31:21 +0100
Subject: Added border and badge colour based on category

- You have to define them on the ResourceCategory model in the database
---
 pyblackbird_cc/templates/resources/resource_list.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'pyblackbird_cc/templates/resources')

diff --git a/pyblackbird_cc/templates/resources/resource_list.html b/pyblackbird_cc/templates/resources/resource_list.html
index 6f9edef..454ba45 100644
--- a/pyblackbird_cc/templates/resources/resource_list.html
+++ b/pyblackbird_cc/templates/resources/resource_list.html
@@ -46,7 +46,7 @@
         <div class="d-flex flex-row justify-content-between flex-wrap">
           {% for resource in featured_resources %}
           <!-- <div class="card mx-2 mt-2 shadow-sm ey_literacy_border" style="width: 24rem;"> -->
-            <div class="card mx-2 mt-2 shadow-sm ey_literacy_border" style="width: 24rem;">            
+            <div class="card mx-2 mt-2 shadow-sm" style="width: 24rem; border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 8px;">
               <img class="card-img-top"
                    src="{{ resource.thumbnail_urls|first }}"
                    alt="{{ resource.thumbnail_filename }}" />
@@ -54,7 +54,7 @@
                 <h5 class="card-title"><a href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a></h5>
                 <div class="d-flex flex-row justify-content-start align-content-center">
                   <div>
-                    <span class="badge {{ resource.main_resource_category_colour_css_class }} me-2">{{ resource.main_resource_category_name }}</span>
+                    <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>
                   </div>
                   <div>
                     <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
@@ -94,7 +94,8 @@
           </div>
           <div class="d-flex flex-row justify-content-start flex-wrap">
             {% for resource in resource_list %}
-              <div class="card mx-4 mt-4 border border-width-1" style="width: 17rem;">
+{#              <div class="card mx-4 mt-4 border border-width-1" style="width: 17rem;">#}
+              <div class="card mx-2 mt-2 shadow-sm border-width-1" style="width: 17rem; border-color: {{ resource.main_resource_category_colour_css_class }}; border-width: 8px;">
                 <img class="card-img-top"
                      src="{{ resource.thumbnail_urls|first }}"
                      alt="{{ resource.thumbnail_filename }}" />
@@ -102,7 +103,7 @@
                     <h5 class="card-title"><a href="{% url 'resources:resource_detail' resource_id=resource.id %}">{{ resource.name }}</a></h5>
                   <div class="d-flex flex-row justify-content-start align-content-center">
                     <div>
-                      <span class="badge {{ resource.main_resource_category_colour_css_class }} me-2">{{ resource.main_resource_category_name }}</span>
+                      <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>
                     </div>
                     <div>
                       <span class="badge bg-secondary me-2">{{ resource.age_range }}</span>
-- 
cgit v1.2.3