Trying to improve the CSS of the detail page

1 files changed, 53 insertions, 39 deletions

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 %}