Basic carousel with no javascript - yes

2 files changed, 46 insertions, 23 deletions

diff --git a/alphabetlearning/static/css/project.css b/alphabetlearning/static/css/project.css
index 79ad930..7fff081 100644
--- a/alphabetlearning/static/css/project.css
+++ b/alphabetlearning/static/css/project.css
@@ -1,16 +1,24 @@
 :root {
     --link-colour: rgb(64, 21, 92);
 }
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-size: 16px;
+    font-family: "Noto Sans", Arial, Helvetica, sans-serif;
+}
 .section-title {
     position: relative;
     width: max-content;
-  font-family: "Noto Sans", sans-serif;
-  font-size: 2.2em;
-  font-optical-sizing: auto;
-  font-weight: 800; /* bold */
-  font-style: italic;
-  margin: 1.2em 0.5em 1.6em;
-  font-variation-settings:
+    font-family: "Noto Sans", sans-serif;
+    font-size: 2.2em;
+    font-optical-sizing: auto;
+    font-weight: 800; /* bold */
+    font-style: italic;
+    margin: 1.2em 0.5em 1.6em;
+    font-variation-settings:
     "wdth" 100;
 }
 
@@ -31,14 +39,6 @@
 }
 
 
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    font-size: 16px;
-    font-family: "Noto Sans", Arial, Helvetica, sans-serif;
-}
-
 h1, h2, h3 {
     color: #3d3d3d;
 }
@@ -248,3 +248,24 @@ nav > div > ul > li {
 .card-title a {
     font-size: 1.2rem;
 }
+
+.new-carousel-wrapper {
+    display: flex;
+    margin-left: auto;
+    margin-right: auto;
+    gap: 20px;
+    width: 80%;
+    overflow-x: scroll;
+    scroll-snap-type: x mandatory;
+}
+
+.pdf-card {
+    scroll-snap-align: center;
+    box-sizing: border-box;
+    padding: 20px 30px;
+    flex-shrink: 0;
+    width: 80%;
+    background-color: white;
+    border-radius: 14px;
+    text-align: center;
+}
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>