From e768f221ffbdd5f75c3818169dd5eefdd702e635 Mon Sep 17 00:00:00 2001
From: Matthew Lemon <y@yulqen.org>
Date: Tue, 14 May 2024 15:28:36 +0100
Subject: Trying to improve the CSS of the detail page

---
 pyblackbird_cc/templates/base.html                 |  1 +
 .../templates/resources/resource_detail.html       | 92 +++++++++++++---------
 2 files changed, 54 insertions(+), 39 deletions(-)

(limited to 'pyblackbird_cc/templates')

diff --git a/pyblackbird_cc/templates/base.html b/pyblackbird_cc/templates/base.html
index ce0a4ca..4e06117 100644
--- a/pyblackbird_cc/templates/base.html
+++ b/pyblackbird_cc/templates/base.html
@@ -77,6 +77,7 @@
         </div>
       </div>
     </header>
+    <hr />
     <main>
       {% block body %}
         {% if messages %}
diff --git a/pyblackbird_cc/templates/resources/resource_detail.html b/pyblackbird_cc/templates/resources/resource_detail.html
index a52c2c6..6f8f3be 100644
--- a/pyblackbird_cc/templates/resources/resource_detail.html
+++ b/pyblackbird_cc/templates/resources/resource_detail.html
@@ -1,50 +1,64 @@
 {% extends 'base.html' %}
 
 {% block content %}
-  <div class="resource-metadata-panel">
-    <div>
-      <h1 class="resource-title">{{ resource.name }}</h1>
-    </div>
-    <div class="resource-details">
-      <div>Subject: {{ resource.main_resource_category }}</div>
-      <div>Age range: {{ resource.age_range }}</div>
-      <div>Resource type: {{ resource.resource_type }}</div>
-    </div>
-  </div>
-  <div>
-    <h3 class="feature-pdf-page-title">Feature images</h3>
-    <div class="resource-img-detail">
-      {% for tn_url, tn_filename in resource.thumbnails %}<img src="{{ tn_url }}" alt="{{ tn_filename }}" />{% endfor %}
+  <div class="container">
+    <div class="row mt-4">
+      <div class="col-md">
+        <div class="my-4 p-2">
+          <h1 class="display-6 text-dark">{{ resource.name }}</h1>
+          <div>Subject: {{ resource.main_resource_category }}</div>
+          <div>Age range: {{ resource.age_range }}</div>
+          <div>Resource type: {{ resource.resource_type }}</div>
+        </div>
+      </div>
     </div>
-    <h3 class="feature-pdf-page-title">Resource preview</h3>
-    <div class="resource-img-detail">
-      {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
+    <div class="row mt-3">
+      <div class="col-md">
+        <h3>Feature images</h3>
         <div>
-          <h4>{{ snapshot_filename }}</h4>
+          {% for tn_url, tn_filename in resource.thumbnails %}
+            <img class="img-thumbnail rounded"
+                 src="{{ tn_url }}"
+                 alt="{{ tn_filename }}" />
+          {% endfor %}
         </div>
+      </div>
+    </div>
+    <div class="row mt-3">
+      <div class="col-md">
+        <h3>Resource preview</h3>
         <div>
-          {% for snapshot_url in snapshot_urls %}<img src="{{ snapshot_url }}" alt="{{ snapshot_filename }}" />{% endfor %}
-          <div class="resource-description-panel">
-            <h3>What's included?</h3>
-            <div>{{ resource.description }}</div>
-            <h3>What's it for?</h3>
-            <div>{% lorem %}</div>
-            <h3>Resource Details</h3>
-            <div>{% lorem %}</div>
-          </div>
-          <div class="resource-download-panel">
-            <h4>Download the resource</h4>
+          {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
+            <div>{{ snapshot_filename }}</div>
             <div>
-              Click
-              <button hx-get="/hx-download-btn?rn={{ resource.pdf_filename }}"
-                      hx-target="next #download-reveal">here</button>
-              to download the resource
+              {% for snapshot_url in snapshot_urls %}
+                <img class="img-thumbnail rounded"
+                     src="{{ snapshot_url }}"
+                     alt="{{ snapshot_filename }}" />
+              {% endfor %}
+              <div class="resource-description-panel">
+                <h3>What's included?</h3>
+                <div>{{ resource.description }}</div>
+                <h3>What's it for?</h3>
+                <div>{% lorem %}</div>
+                <h3>Resource Details</h3>
+                <div>{% lorem %}</div>
+              </div>
+              <div class="resource-download-panel">
+                <h4>Download the resource</h4>
+                <div>
+                  Click
+                  <button hx-get="/hx-download-btn?rn={{ resource.pdf_filename }}"
+                          hx-target="next #download-reveal">here</button>
+                  to download the resource
+                </div>
+                <div id="download-reveal"></div>
+              </div>
             </div>
-            <div id="download-reveal"></div>
-          </div>
+          {% endfor %}
+          <div>Logged in as {{ request.user.username }}</div>
         </div>
       </div>
-    {% endfor %}
-    <div>Logged in as {{ request.user.username }}</div>
-  {% endblock content %}
-</div>
+    </div>
+  </div>
+{% endblock content %}
-- 
cgit v1.2.3