Added border and badge colour based on category

- You have to define them on the ResourceCategory model in the database

4 files changed, 26 insertions, 4 deletions

diff --git a/pyblackbird_cc/resources/migrations/0013_resourcecategory_badge_foreground_colour.py b/pyblackbird_cc/resources/migrations/0013_resourcecategory_badge_foreground_colour.py
new file mode 100644
index 0000000..7644a5c
--- /dev/null
+++ b/pyblackbird_cc/resources/migrations/0013_resourcecategory_badge_foreground_colour.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.0.4 on 2024-07-28 15:12
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("resources", "0012_resourcecategory_colour_css_class"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="resourcecategory",
+            name="badge_foreground_colour",
+            field=models.CharField(blank=True, max_length=56, null=True),
+        ),
+    ]
diff --git a/pyblackbird_cc/resources/models.py b/pyblackbird_cc/resources/models.py
index 912cd17..6b0a9b0 100644
--- a/pyblackbird_cc/resources/models.py
+++ b/pyblackbird_cc/resources/models.py
@@ -115,6 +115,7 @@ class ResourceCategory(models.Model):
     created_at = models.DateTimeField(auto_now_add=True)
     updated_at = models.DateTimeField(auto_now=True)
     colour_css_class = models.CharField(max_length=56, blank=True, null=True)
+    badge_foreground_colour = models.CharField(max_length=56, blank=True, null=True)
 
     class Meta:
         verbose_name_plural = "Resource Categories"
diff --git a/pyblackbird_cc/resources/views.py b/pyblackbird_cc/resources/views.py
index bf1f6ba..db236f0 100644
--- a/pyblackbird_cc/resources/views.py
+++ b/pyblackbird_cc/resources/views.py
@@ -47,6 +47,7 @@ class ResourceInfo:
     card_description: str
     main_resource_category_name: str
     main_resource_category_colour_css_class: str
+    main_resource_badge_foreground_colour: str
     additional_resource_category_name: str | None
     age_range: str | None
     pdf_filenames: list[str]
@@ -110,6 +111,7 @@ def _extract_metadata_from_resource(resource_obj) -> ResourceInfo | None:
             card_description=resource_obj.card_description,
             main_resource_category_name=resource_obj.main_resource_category.name,
             main_resource_category_colour_css_class=resource_obj.main_resource_category.colour_css_class,
+            main_resource_badge_foreground_colour=resource_obj.main_resource_category.badge_foreground_colour,
             additional_resource_category_name=arc_name,
             age_range=resource_obj.age_range,
             pdf_filenames=pdf_resource_filenames,
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>