From c14c2efcbefb3c2cce2828fa26f6e880ca09ae83 Mon Sep 17 00:00:00 2001
From: Matthew Lemon <y@yulqen.org>
Date: Mon, 7 Oct 2024 21:01:49 +0100
Subject: Summary panel looks a little better

---
 .../templates/resources/resource_detail.html       | 44 +++++++++++-----------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/pyblackbird_cc/templates/resources/resource_detail.html b/pyblackbird_cc/templates/resources/resource_detail.html
index 7f7362c..a4068ad 100644
--- a/pyblackbird_cc/templates/resources/resource_detail.html
+++ b/pyblackbird_cc/templates/resources/resource_detail.html
@@ -4,49 +4,51 @@
 
 {% block content %}
 
-<div class="row justify-content-between my-4">
-    <div class="col">
+<div class="row my-4">
+    <div class="col-md-7">
         {% for tn_url, tn_filename in resource.thumbnails %}
         <div>
-            <img class="image-fluid float-start rounded mx-1" src="{{ tn_url }}" alt="{{ tn_filename }}"/>
+            <img class="img-fluid rounded mx-1" src="{{ tn_url }}" alt="{{ tn_filename }}"/>
         </div>
         {% endfor %}
     </div> 
-    <div class="col">
+    <div class="col-md-5">
         <div class="row">
             <div class="col">
-                <h2 class="my-1">{{ resource.name }}</h2>
+                <p class="my-1 fw-bold fs-3">{{ resource.name }}</p>
             </div> 
         </div>
-        <div class="row">
-            <div class="col">
-                <p class="my-1">{{ resource.main_resource_category }}</p>
-            </div> 
-        </div>
-        <div class="row">
-            <div class="col">
-                <p class="my-1">{{ resource.age_range }}</p>
+        <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>
             </div> 
+            <div>
+                <p class="text-secondary my-1 fw-semibold fs-5">{{ resource.age_range }}</p>
+            </div>
         </div>
-        <div class="row">
-            <div class="col">
-                <p class="my-1">Number of PDF files: {{ resource.pdf_filenames|length }}</p>
-            </div> 
+
+        <div class="col">
+            {% if resource.pdf_filenames|length > 1 %} 
+                <p class="text-secondary my-1">Contains {{ resource.pdf_filenames|length }} PDF files.</p>
+            {% else %}
+                <p class="text-secondary my-1">Contains {{ resource.pdf_filenames|length }} PDF file.</p>
+            {% endif %}
         </div>
+
+        <hr>
+
         <div class="row">
             <div class="col">
-                <h4>Product summary</h4>
-
+                <p class="my-1 fw-semibold fs-5">Product summary</p>
                 <p>{{resource.card_description}}</p>
             </div> 
         </div>
-        <div>
+        <div class="row align-items-end">
             <div class="my-4 d-flex justify-content-center">
                 <button class="btn btn-primary w-100"> 
                     Add to cart 
                 </button>
             </div>
-
         </div>
     </div> 
 </div>
-- 
cgit v1.2.3