Adds bootstrap, rids us of the CDN and better styling on detail page

1 files changed, 60 insertions, 44 deletions

diff --git a/pyblackbird_cc/templates/resources/resource_detail.html b/pyblackbird_cc/templates/resources/resource_detail.html
index 6f8f3be..605f6bb 100644
--- a/pyblackbird_cc/templates/resources/resource_detail.html
+++ b/pyblackbird_cc/templates/resources/resource_detail.html
@@ -2,63 +2,79 @@
 
 {% block content %}
   <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 class="row my-4">
+      <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
+        <h3>{{ resource.name }}</h3>
+        <div class="d-flex flex-row justify-content-between my-3">
+          <div>
+            <span class="fw-bold">Subject:</span>{{ resource.main_resource_category }}
+          </div>
+          <div class="px-2">
+            <span class="fw-bold">Age range:</span> {{ resource.age_range }}
+          </div>
+          <div class="px-2">
+            <span class="fw-bold">Resource type:</span> {{ resource.resource_type }}
+          </div>
         </div>
       </div>
     </div>
-    <div class="row mt-3">
-      <div class="col-md">
-        <h3>Feature images</h3>
-        <div>
+    <div class="row my-4">
+      <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
+        <h4>Feature images</h4>
+        <div class="d-flex flex-row justify-content-between">
           {% for tn_url, tn_filename in resource.thumbnails %}
-            <img class="img-thumbnail rounded"
-                 src="{{ tn_url }}"
-                 alt="{{ tn_filename }}" />
+            <div class="m-2">
+              <img class="img-fluid rounded" src="{{ tn_url }}" alt="{{ tn_filename }}" />
+            </div>
           {% endfor %}
         </div>
       </div>
     </div>
-    <div class="row mt-3">
-      <div class="col-md">
-        <h3>Resource preview</h3>
-        <div>
-          {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
-            <div>{{ snapshot_filename }}</div>
-            <div>
+    <div class="row my-4">
+      <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
+        <h4>Resource files preview</h4>
+        {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
+          <div>{{ snapshot_filename }}</div>
+          <div>
+            <div class="d-flex flex-row justify-content-between">
               {% 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 class="m-2">
+                  <img class="img-thumbnail rounded"
+                       src="{{ snapshot_url }}"
+                       alt="{{ snapshot_filename }}" />
                 </div>
-                <div id="download-reveal"></div>
-              </div>
+              {% endfor %}
             </div>
-          {% endfor %}
-          <div>Logged in as {{ request.user.username }}</div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+    <div class="row my-5">
+      <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
+        <div>
+          <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>
+    </div>
+    <div class="row">
+      <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
+        <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>Logged in as {{ request.user.username }}</div>
     </div>
   </div>
 {% endblock content %}