Better implementation of carousel

- Removed the primary coloured background
- Changed the colour of the next and previous icons
- Reduced the width of the actual image

3 files changed, 20 insertions, 2 deletions

diff --git a/pyblackbird_cc/static/css/custom.css b/pyblackbird_cc/static/css/custom.css
index 3698692..342225b 100644
--- a/pyblackbird_cc/static/css/custom.css
+++ b/pyblackbird_cc/static/css/custom.css
@@ -6170,6 +6170,14 @@ progress {
   top: -1px;
 }
 
+.carousel-control-prev-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+}
+
+.carousel-control-next-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+}
+
 h2, .h2 {
   color: #51635e;
 }
diff --git a/pyblackbird_cc/static/scss/custom.scss b/pyblackbird_cc/static/scss/custom.scss
index c80e8f4..5c05488 100644
--- a/pyblackbird_cc/static/scss/custom.scss
+++ b/pyblackbird_cc/static/scss/custom.scss
@@ -25,6 +25,14 @@ $ml-font-label-weight: 500;
 @import "../bootstrap/scss/_badge.scss";
 // 5. Add additional custom code here
 
+.carousel-control-prev-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+}
+
+.carousel-control-next-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+}
+
 h2 {
   color: $primary;
 }
diff --git a/pyblackbird_cc/templates/resources/resource_detail.html b/pyblackbird_cc/templates/resources/resource_detail.html
index 2cdebd4..4db7f56 100644
--- a/pyblackbird_cc/templates/resources/resource_detail.html
+++ b/pyblackbird_cc/templates/resources/resource_detail.html
@@ -53,6 +53,7 @@
       </div>
     </div>
 
+    <!-- Here be the carousel stuff -->
     
     {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
       <div class="row my-4">
@@ -62,15 +63,16 @@
 
 
           <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
-            <div class="carousel-inner bg-primary">
+            <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-50 mx-auto img-thumbnail rounded" alt="{{ snapshot_name }}">
+                  <img src="{{ snapshot_url }}" class="d-block w-25 mx-auto img-thumbnail rounded" alt="{{ snapshot_name }}">
                 </div>
                 {% endfor %}
               </div>