From 9c9b3084939e77618854e2cbe3cce51029a70f07 Mon Sep 17 00:00:00 2001
From: Matthew Lemon <y@yulqen.org>
Date: Mon, 5 Aug 2024 21:20:21 +0100
Subject: wip: adding delete and replace buttons for PDFs

---
 .../templates/resources/resource_detail.html       | 175 +++++++++++----------
 1 file changed, 92 insertions(+), 83 deletions(-)

(limited to 'pyblackbird_cc/templates/resources/resource_detail.html')

diff --git a/pyblackbird_cc/templates/resources/resource_detail.html b/pyblackbird_cc/templates/resources/resource_detail.html
index 67694fa..a68c321 100644
--- a/pyblackbird_cc/templates/resources/resource_detail.html
+++ b/pyblackbird_cc/templates/resources/resource_detail.html
@@ -3,110 +3,119 @@
 {% load markdown_extras %}
 
 {% block content %}
-  <div class="container">
+    <div class="container">
     <div class="row my-4">
-      <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
-        <h1 class="mb-4">{{ resource.name }}</h1>
-        <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 class="px-2">
-            <span class="fw-bold">Number of files in this resource:</span> {{ resource.pdf_filenames|length }}
-          </div>
-        </div>
-        <div class="d-flex flex-row justify-content-between my-3 flex-wrap">
-          <div>
-            <span class="fw-bold">Created:</span> {{ resource.created|date:"D d M Y" }}
-          </div>
-          <div>
-            {% 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 class="col bg-white pt-3 border border-success border-opacity-25 rounded">
+            <h1 class="mb-4">{{ resource.name }}</h1>
+            <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 class="px-2">
+                    <span class="fw-bold">Number of files in this resource:</span> {{ resource.pdf_filenames|length }}
+                </div>
+            </div>
+            <div class="d-flex flex-row justify-content-between my-3 flex-wrap">
+                <div>
+                    <span class="fw-bold">Created:</span> {{ resource.created|date:"D d M Y" }}
+                </div>
+                <div>
+                    {% 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">
-        <h4>Feature images</h4>
-        <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 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 %}
+                    <div class="m-2">
+                        <img class="img-fluid rounded" src="{{ tn_url }}" alt="{{ tn_filename }}"/>
+                    </div>
+                {% endfor %}
             </div>
-          {% endfor %}
         </div>
-      </div>
     </div>
 
     <!-- Here be the carousel stuff -->
-    
+
     {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
-      <div class="row my-4">
+        <div class="row my-4">
         <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
-          {% if resource.snapshot_urls.items|length > 1 %}
-          <h4>File preview {{ forloop.counter }}: {{ snapshot_filename|cut:".pdf" }} </h4>
-          {% else %}
-          <h4>File preview: {{ snapshot_filename|cut:".pdf" }}</h4>
-          {% endif %}
+            {% if resource.snapshot_urls.items|length > 1 %}
+                <h4>File preview {{ forloop.counter }}: {{ snapshot_filename|cut:".pdf" }} </h4>
+            {% else %}
+                <h4>File preview: {{ snapshot_filename|cut:".pdf" }}</h4>
+            {% endif %}
 
-          <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
-            <div class="carousel-inner">
+            <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
+                <div class="carousel-inner">
 
-              {% for snapshot_url in snapshot_urls %}
-              {% if forloop.first %}
-              <!-- We must have an active class otherwise the carousel will not show up -->
-              <div class="carousel-item active">
-                {% else %}
-                <div class="carousel-item">
-                  {% endif %}
-                  <img src="{{ snapshot_url }}" class="d-block w-25 mx-auto img-thumbnail rounded" alt="{{ snapshot_name }}">
+                    {% for snapshot_url in snapshot_urls %}
+                        {% if forloop.first %}
+                            <!-- We must have an active class otherwise the carousel will not show up -->
+                            <div class="carousel-item active">
+                        {% else %}
+                            <div class="carousel-item">
+                        {% endif %}
+                    <img src="{{ snapshot_url }}" class="d-block w-25 mx-auto img-thumbnail rounded"
+                         alt="{{ snapshot_name }}">
+                    </div>
+                    {% endfor %}
+                    </div>
+                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
+                            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="#carouselExampleControls"
+                            data-bs-slide="next">
+                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                        <span class="visually-hidden">Next</span>
+                    </button>
                 </div>
-                {% endfor %}
-              </div>
-              <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
-                <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                <span class="visually-hidden">Next</span>
-              </button>
+                {% 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>
 
-        {% endfor %}
+    {% endfor %}
 
-      
-    <div class="row my-5">
-      <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
+
+<div class="row my-5">
+    <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
         <div>{{ resource.description | markdown | safe }}</div>
-      </div>
     </div>
-    <div class="row">
-      <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
+</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>
+            <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>
+    <div>Logged in as {{ request.user.username }}</div>
+</div>
+</div>
 {% endblock content %}
-- 
cgit v1.2.3