From a2b86ec4d5dccef497a24822c973c75f80858a0a Mon Sep 17 00:00:00 2001
From: Matthew Lemon <y@yulqen.org>
Date: Tue, 22 Oct 2024 21:26:54 +0100
Subject: Basic carousel with no javascript - yes

---
 .../templates/resources/resource_detail.html           | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

(limited to 'alphabetlearning/templates/resources')

diff --git a/alphabetlearning/templates/resources/resource_detail.html b/alphabetlearning/templates/resources/resource_detail.html
index 5012c5b..6128627 100644
--- a/alphabetlearning/templates/resources/resource_detail.html
+++ b/alphabetlearning/templates/resources/resource_detail.html
@@ -67,15 +67,17 @@
     </div> 
 </div>
 
-<!-- Here be the carousel stuff -->
-<!-- except we are doing away with the carousel in this design -->
-<div class="flex justify-content-start">
+<h1 class="section-title">Preview the PDF</h1>
+
+<p>If there are multiple pages, you can scroll horizontally to view them.</p>
+
+<div class="new-carousel-wrapper">
     {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
-    {% for snapshot_url in snapshot_urls %}
-    <div>
-        <img src="{{ snapshot_url }}" class="d-block mx-auto img-thumbnail rounded" alt="{{ snapshot_name }}">
-    </div>
-    {% endfor %}
+        {% for snapshot_url in snapshot_urls %}
+           <div class="pdf-card">
+               <img width="400px" src="{{ snapshot_url }}" alt="{{ snapshot_name }}">
+           </div>
+        {% endfor %}
     {% endfor %}
 </div>
 
-- 
cgit v1.2.3