wip: implementing CSS classes for category colours on detail page

4 files changed, 65 insertions, 1 deletions

diff --git a/pyblackbird_cc/resources/views.py b/pyblackbird_cc/resources/views.py
index 1b3312e..3bf3d22 100644
--- a/pyblackbird_cc/resources/views.py
+++ b/pyblackbird_cc/resources/views.py
@@ -292,6 +292,7 @@ def resource_detail(request, resource_id):
         "card_description": resource_obj.card_description,
         "resource_type": resource_obj.resource_type.name,
         "main_resource_category": resource_obj.main_resource_category.name,
+        "main_resource_category_colour_css_class": resource_obj.main_resource_category.colour_css_class,
         "additional_resource_category": (
             resource_obj.subcategories.name if resource_obj.subcategories else None
         ),
diff --git a/pyblackbird_cc/static/css/custom.css b/pyblackbird_cc/static/css/custom.css
index b775578..42833bd 100644
--- a/pyblackbird_cc/static/css/custom.css
+++ b/pyblackbird_cc/static/css/custom.css
@@ -2284,6 +2284,30 @@ progress {
   font-weight: 500;
 }
 
+.category_colour_efl {
+  color: cyan;
+}
+
+.category_colour_literacy {
+  color: green;
+}
+
+.category_colour_maths {
+  color: magenta;
+}
+
+.category_colour_eymaths {
+  color: #343aeb;
+}
+
+.category_colour_eyliteracy {
+  color: #ebde34;
+}
+
+.category_colour_alphabet {
+  color: black;
+}
+
 .asteriskField {
   color: red;
 }
diff --git a/pyblackbird_cc/static/scss/custom.scss b/pyblackbird_cc/static/scss/custom.scss
index c3c12f0..b65db4c 100644
--- a/pyblackbird_cc/static/scss/custom.scss
+++ b/pyblackbird_cc/static/scss/custom.scss
@@ -54,6 +54,42 @@ $ml-font-label-weight: 500;
   font-weight: $ml-font-label-weight;
 }
 
+
+// These are the colours we need to colourise categories:
+
+// - English as a Foreign Language: cyan
+// - Literacy: green
+// - Maths: magenta
+// - English: red
+// - EYs Maths: #343aeb
+// - EYs Literacy: #ebde34
+// - Alphabet: no colour yet
+
+.category_colour_efl {
+    color: cyan;
+}
+
+.category_colour_literacy {
+    color: green;
+}
+
+.category_colour_maths {
+    color: magenta;
+}
+
+.category_colour_eymaths {
+    color: #343aeb  ;
+}
+
+.category_colour_eyliteracy {
+    color: #ebde34 ;
+}
+
+.category_colour_alphabet {
+    color: black ;
+}
+
+
 .asteriskField {
   color: red;
 }
diff --git a/pyblackbird_cc/templates/resources/resource_detail.html b/pyblackbird_cc/templates/resources/resource_detail.html
index a4068ad..f287575 100644
--- a/pyblackbird_cc/templates/resources/resource_detail.html
+++ b/pyblackbird_cc/templates/resources/resource_detail.html
@@ -20,7 +20,7 @@
         </div>
         <div class="d-flex justify-content-between align-items-center">
             <div>
-                <p class="text-success my-1 fw-semibold fs-5">{{ resource.main_resource_category }}</p>
+                <p class="boo-magenta my-1 fw-semibold fs-5">{{ resource.main_resource_category }}</p>
             </div> 
             <div>
                 <p class="text-secondary my-1 fw-semibold fs-5">{{ resource.age_range }}</p>
@@ -34,6 +34,9 @@
                 <p class="text-secondary my-1">Contains {{ resource.pdf_filenames|length }} PDF file.</p>
             {% endif %}
         </div>
+        <div class="col">
+            <p class="fs-3 fw-semibold">£1.50 (or 1 credit)</p>
+        </div>
 
         <hr>