Ditched flex-box on the detail page

Resorted to using simple row and col classes here. Vary rudimentary at
this stage but at least it gets them horizontally aligned.

1 files changed, 7 insertions, 134 deletions

diff --git a/pyblackbird_cc/templates/resources/resource_detail.html b/pyblackbird_cc/templates/resources/resource_detail.html
index 33096a0..7f7362c 100644
--- a/pyblackbird_cc/templates/resources/resource_detail.html
+++ b/pyblackbird_cc/templates/resources/resource_detail.html
@@ -4,25 +4,15 @@
 
 {% block content %}
 
-<div class="d-flex justify-content-between">
-    <div class="border border-danger px-1">
-        <p>This should be left.</p>
-    </div>
-    <div class="border border-danger px-1">
-        <p>This should be right.</p>
-    </div>
-</div>
-
-
-<div class="d-flex flex-wrap justify-content-start">
-    <div class="border border-danger">
+<div class="row justify-content-between my-4">
+    <div class="col">
         {% for tn_url, tn_filename in resource.thumbnails %}
-        <div class="m-2">
-            <img class="image-thumbnail rounded mx-1" src="{{ tn_url }}" alt="{{ tn_filename }}"/>
+        <div>
+            <img class="image-fluid float-start rounded mx-1" src="{{ tn_url }}" alt="{{ tn_filename }}"/>
         </div>
         {% endfor %}
     </div> 
-    <div class="border border-success">
+    <div class="col">
         <div class="row">
             <div class="col">
                 <h2 class="my-1">{{ resource.name }}</h2>
@@ -52,7 +42,7 @@
         </div>
         <div>
             <div class="my-4 d-flex justify-content-center">
-                <button class="btn btn-primary"> 
+                <button class="btn btn-primary w-100"> 
                     Add to cart 
                 </button>
             </div>
@@ -81,122 +71,5 @@
     </div>
 </div>
 
-<div class="row my-4">
-    <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
-        <div class="card mb-4">
-            <div class="card-header bg-success text-white">
-                <h1 class="card-title mb-0 text-center">{{ resource.name }}</h1>
-            </div>
-            <div class="card-body">
-                <table class="table table-bordered mx-auto">
-                    <tbody>
-                        <tr>
-                            <th>Subject</th>
-                            <td>{{ resource.main_resource_category }}</td>
-                        </tr>
-                        <tr>
-                            <th>Age range</th>
-                            <td>{{ resource.age_range }}</td>
-                        </tr>
-                        <tr>
-                            <th>Resource type</th>
-                            <td>{{ resource.resource_type }}</td>
-                        </tr>
-                        <tr>
-                            <th>Number of files</th>
-                            <td>{{ resource.pdf_filenames|length }}</td>
-                        </tr>
-                        <tr>
-                            <th>Created</th>
-                            <td>{{ resource.created|date:"D d M Y" }}</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <div class="my-4">
-                    <h5 class="card-title bg-success text-white p-2">Resource Description</h5>
-                    <div>{{ resource.description | markdown | safe }}</div>
-                </div>
-
-                <div class="d-flex justify-content-end">
-                    {% if request.user.is_authenticated and request.user.is_staff %}
-                    <a href="{% url "resources:resource_update_metadata" resource.id %}"
-                       class="text-danger">Edit this resource</a>
-                    {% endif %}
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div class="row my-4">
-    <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
-        <div class="card mb-4">
-            <div class="card-header bg-success text-white">
-                <h4 class="card-title mb-0">Feature Images</h4>
-            </div>
-            <div class="card-body">
-                <div class="d-flex flex-row justify-content-between">
-                    {% for tn_url, tn_filename in resource.thumbnails %}
-                    <div class="m-2">
-                        <img class="img-fluid rounded" src="{{ tn_url }}" alt="{{ tn_filename }}"/>
-                    </div>
-                    {% endfor %}
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-
-<!-- Here be the carousel stuff -->
-{% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
-<div class="row justify-content-center my-4">
-    <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
-        <div class="card mb-4">
-            <div class="card-header bg-success text-white">
-                {% if resource.snapshot_urls.items|length > 1 %}
-                <h4 class="card-title mb-0 text-center">File
-                    preview {{ forloop.counter }}: {{ snapshot_filename|cut:".pdf" }}</h4>
-                {% else %}
-                <h4 class="card-title mb-0 text-center">File preview: {{ snapshot_filename|cut:".pdf" }}</h4>
-                {% endif %}
-            </div>
-            <div class="card-body">
-                <div id="carouselPreview{{ forloop.counter }}" class="carousel slide" data-bs-ride="carousel">
-                    <div class="carousel-inner">
-                        {% for snapshot_url in snapshot_urls %}
-                        {% if forloop.first %}
-                        <div class="carousel-item active">
-                            {% else %}
-                            <div class="carousel-item">
-                                {% endif %}
-                                <img src="{{ snapshot_url }}" class="d-block mx-auto img-thumbnail rounded"
-                                                              alt="{{ snapshot_name }}">
-                            </div>
-                            {% endfor %}
-                        </div>
-                        <button class="carousel-control-prev" type="button"
-                                                              data-bs-target="#carouselPreview{{ forloop.counter }}" data-bs-slide="prev">
-                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                            <span class="visually-hidden">Previous</span>
-                        </button>
-                        <button class="carousel-control-next" type="button"
-                                                              data-bs-target="#carouselPreview{{ forloop.counter }}" data-bs-slide="next">
-                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                            <span class="visually-hidden">Next</span>
-                        </button>
-                    </div>
-                    {% if request.user.is_authenticated and request.user.is_staff %}
-                    <div class="d-flex justify-content-between my-2 p-2">
-                        <a href="#" class="btn btn-primary btn-sm" type="button">Replace</a>
-                        <a href="#" class="btn btn-danger btn-sm" type="button">Delete</a>
-                    </div>
-                    {% endif %}
-                </div>
-            </div>
-        </div>
-    </div>
-    {% endfor %}
-
-</div>
 {% endblock content %}
+