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

2 files changed, 72 insertions, 54 deletions

diff --git a/pyblackbird_cc/templates/base.html b/pyblackbird_cc/templates/base.html
index 4e06117..37f83af 100644
--- a/pyblackbird_cc/templates/base.html
+++ b/pyblackbird_cc/templates/base.html
@@ -19,13 +19,14 @@
     {% endblock extra_css %}
     {% block css %}
       <!--Latest compiled and minified Bootstrap CSS -->
-      <link rel="stylesheet"
-            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css"
-            integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA=="
-            crossorigin="anonymous"
-            referrerpolicy="no-referrer" />
+      {#      <link rel="stylesheet"#}
+      {#            href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css"#}
+      {#            integrity="sha512-SbiR/eusphKoMVVXysTKG/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz/2ut2Vw1uQEj2MbRF+TVBUA=="#}
+      {#            crossorigin="anonymous"#}
+      {#            referrerpolicy="no-referrer" />#}
       <!-- Your stuff: Third-party CSS libraries go here -->
       <!-- This file stores project-specific CSS -->
+      <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}" />
       <link href="{% static 'css/project.css' %}" rel="stylesheet" />
       {#      <link rel="stylesheet" href="{% static "css/wrapper.css" %}" type="text/css" media="screen" charset="utf-8" />#}
     {% endblock css %}
@@ -34,14 +35,15 @@
     {# Placed at the top of the document so pages load faster with defer #}
     {% block javascript %}
       <!-- Bootstrap JS -->
-      <script defer
-              src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"
-              integrity="sha512-1/RvZTcCDEUjY/CypiMz+iqqtaoQfAITmNSJY17Myp4Ms5mdxPS5UV7iOfdZoxcGhzFbOm6sntTKJppjvuhg4g=="
-              crossorigin="anonymous"
-              referrerpolicy="no-referrer"></script>
+      {#      <script defer#}
+      {#              src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"#}
+      {#              integrity="sha512-1/RvZTcCDEUjY/CypiMz+iqqtaoQfAITmNSJY17Myp4Ms5mdxPS5UV7iOfdZoxcGhzFbOm6sntTKJppjvuhg4g=="#}
+      {#              crossorigin="anonymous"#}
+      {#              referrerpolicy="no-referrer"></script>#}
       <!-- Your stuff: Third-party javascript libraries go here -->
       <!-- place project specific Javascript in this file -->
       <script defer src="{% static 'js/project.js' %}"></script>
+      <script scr="{% static "bootstrap/js/bootstrap.js" %}"></script>
       <script src="{% static "js/htmx.min.js" %}"></script>
     {% endblock javascript %}
   </head>
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 %}