From aee5af9ca8d40dd100bfe76d17a5030669624e4a Mon Sep 17 00:00:00 2001
From: Sarah Proctor <sarah.proctor@scientist.com>
Date: Fri, 24 Jan 2025 12:40:31 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20WIP=20Institutional=20Repository?=
 =?UTF-8?q?=20carousel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit:
- removes Bootstrap carousel due to the limitations of Bootstrap's built
in functionality in favor of creating a custom carousel

Ref:
- https://github.com/notch8/palni_palci_knapsack/issues/189
---
 .../themes/institutional_repository.scss      | 160 ++++--------------
 .../homepage/_resource_type_slider.html.erb   |  46 ++---
 2 files changed, 54 insertions(+), 152 deletions(-)

diff --git a/app/assets/stylesheets/themes/institutional_repository.scss b/app/assets/stylesheets/themes/institutional_repository.scss
index 753f0806a..d4573fa00 100644
--- a/app/assets/stylesheets/themes/institutional_repository.scss
+++ b/app/assets/stylesheets/themes/institutional_repository.scss
@@ -1,6 +1,6 @@
 .institutional_repository {
 
-  ////// Basic Apperance Styles //////
+  ////// Basic Appearance Styles //////
 
   .mt-40 {
     margin-top: 40px;
@@ -164,31 +164,40 @@
     z-index: 5;
   }
 
-  .institutional-repository-carousel {
-    .carousel-control {
-      background-image: none;
-      width: 4%;
-
-      .left {
-        margin-left: 0;
-      }
+  //// Resources Carousel ////
 
-      .right {
-        margin-right: 0;
-      }
+  .institutional-repository-carousel {
+    .resource-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      // overflow: hidden;
+      // width: 100%;
+      position: relative;
+    }
+    
+    .resource-wrapper {
+      overflow: hidden;
+      width: calc(6 * 160px); /* Requires the width of each item including margins */
+    }
+    
+    .resource-row {
+      display: flex;
+      transition: transform 0.3s ease;
+      width: max-content; /* Ensures the row expands with more icons */
+    }
+    
+    .resource-item {
+      margin: 5px;
+      width: 150px;
+      text-align: center;
     }
 
-    .carousel-item.active {
-      display: flex;
-      padding-top: 1em;
-      padding-left: 10em;
-      padding-right: 10em;
+    .resource-item a {
+      text-decoration: none;
     }
   }
 
-  .carousel .item .col-xs-12 {
-    padding: 0;
-  }
 
   ////// All Collections //////
 
@@ -197,115 +206,4 @@
     font-size: 1.5em;
     list-style-type: none;
   }
-
-  ////// Stats Carousel Media Queries //////
-
-  @media (max-width: 767px) {
-    .institutional-repository-carousel .cloneditem-1,
-    .institutional-repository-carousel .cloneditem-2,
-    .institutional-repository-carousel .cloneditem-3 {
-      display: none;
-    }
-  }
-
-  @media only screen and (max-width: 992px) {
-    .carousel .item .col-xs-12:nth-last-child(-n+2) {
-      display: none;
-    }
-  }
-
-  @media all and (min-width: 768px) {
-    .institutional-repository-carousel .carousel-inner > .active.left,
-    .institutional-repository-carousel .carousel-inner > .prev {
-      left: -50%;
-    }
-
-    .institutional-repository-carousel .carousel-inner > .active.right,
-    .institutional-repository-carousel .carousel-inner > .next {
-      left: 50%;
-    }
-
-    .institutional-repository-carousel .carousel-inner > .left,
-    .institutional-repository-carousel .carousel-inner > .prev.right,
-    .institutional-repository-carousel .carousel-inner > .active {
-      left: 0;
-    }
-
-    .institutional-repository-carousel .carousel-inner .cloneditem-1 {
-      display: block;
-    }
-  }
-
-  @media all and (min-width: 768px) and (transform-3d),
-  all and (min-width: 768px) and (-webkit-transform-3d) {
-    .institutional-repository-carousel .carousel-inner > .item.active.right,
-    .institutional-repository-carousel .carousel-inner > .item.next {
-      left: 0;
-      -webkit-transform: translate3d(50%, 0, 0);
-      transform: translate3d(50%, 0, 0);
-    }
-
-    .institutional-repository-carousel .carousel-inner > .item.active.left,
-    .institutional-repository-carousel .carousel-inner > .item.prev {
-      left: 0;
-      -webkit-transform: translate3d(-50%, 0, 0);
-      transform: translate3d(-50%, 0, 0);
-    }
-
-    .institutional-repository-carousel .carousel-inner > .item.left,
-    .institutional-repository-carousel .carousel-inner > .item.prev.right,
-    .institutional-repository-carousel .carousel-inner > .item.active {
-      left: 0;
-      -webkit-transform: translate3d(0, 0, 0);
-      transform: translate3d(0, 0, 0);
-    }
-  }
-
-  @media all and (min-width: 992px) {
-    .institutional-repository-carousel .carousel-inner > .active.left,
-    .institutional-repository-carousel .carousel-inner > .prev {
-      left: -16.6%;
-    }
-
-    .institutional-repository-carousel .carousel-inner > .active.right,
-    .institutional-repository-carousel .carousel-inner > .next {
-      left: 16.6%;
-    }
-
-    .institutional-repository-carousel .carousel-inner > .left,
-    .institutional-repository-carousel .carousel-inner > .prev.right,
-    .institutional-repository-carousel .carousel-inner > .active {
-      left: 0;
-    }
-
-    .institutional-repository-carousel .carousel-inner .cloneditem-2,
-    .institutional-repository-carousel .carousel-inner .cloneditem-3 {
-      display: block;
-    }
-  }
-
-  @media all and (min-width: 992px) and (transform-3d),
-  all and (min-width: 992px) and (-webkit-transform-3d) {
-    .institutional-repository-carousel .carousel-inner > .item.active.right,
-    .institutional-repository-carousel .carousel-inner > .item.next {
-      left: 0;
-      -webkit-transform: translate3d(16.6%, 0, 0);
-      transform: translate3d(16.6%, 0, 0);
-    }
-
-    .institutional-repository-carousel .carousel-inner > .item.active.left,
-    .institutional-repository-carousel .carousel-inner > .item.prev {
-      left: 0;
-      -webkit-transform: translate3d(-16.6%, 0, 0);
-      transform: translate3d(-16.6%, 0, 0);
-    }
-
-    .institutional-repository-carousel .carousel-inner > .item.left,
-    .institutional-repository-carousel .carousel-inner > .item.prev.right,
-    .institutional-repository-carousel .carousel-inner > .item.active {
-      left: 0;
-      -webkit-transform: translate3d(0, 0, 0);
-      transform: translate3d(0, 0, 0);
-    }
-  }
 }
diff --git a/app/views/themes/institutional_repository/hyrax/homepage/_resource_type_slider.html.erb b/app/views/themes/institutional_repository/hyrax/homepage/_resource_type_slider.html.erb
index 8f77b3fb3..837f0cb6f 100644
--- a/app/views/themes/institutional_repository/hyrax/homepage/_resource_type_slider.html.erb
+++ b/app/views/themes/institutional_repository/hyrax/homepage/_resource_type_slider.html.erb
@@ -3,27 +3,31 @@
   <meta name="turbolinks-cache-control" content="no-cache">
 <% end %>
 
-<div class="carousel slide institutional-repository-carousel" id="carousel-tilenav" data-ride="carousel" data-interval="false">
-  <div class="carousel-inner">
-    <% resource_types.each.with_index do |(k,v), i| %>
-      <% next if v[0].zero? %>
-      <div class="carousel-item <%= 'active' if i == 1 %>">
-        <div class="col-sm-3 col-md-2 text-center">
-          <%= link_to "/catalog?f[resource_type_sim][]=#{k}", style: "color: inherit;" do %>
-            <i class='<%= "#{v[1]}" %>' aria-hidden="true"></i>
-            <h5><%= k %></h5>
-            <p><%= v[0] %></p>
-          <% end %>
-        </div>
+<div class="institutional-repository-carousel">
+  <div class="resource-container">
+    <a role="button" onclick="scrollIcons('previous')">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="sr-only">Previous</span>
+    </a>
+    <div class="resource-wrapper">
+      <div class="resource-row">
+        <% resource_types.each do |resource_type, value| %>
+          <% resource_count = value[0] %>
+          <% resource_icon = value[1] %>
+          <% next if resource_count.zero? %>
+          <div class="resource-item">
+            <%= link_to "/catalog?f[resource_type_sim][]=#{resource_type}", style: "color: inherit;" do %>
+              <i class='<%= "#{resource_icon}" %>' aria-hidden="true"></i>
+              <h6><%= resource_type %></h6>
+              <p><%= resource_count %></p>
+            <% end %>
+          </div>
+        <% end %>
       </div>
-    <% end %>
+    </div>
+    <a role="button" onclick="scrollIcons('next')">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="sr-only">Next</span>
+    </a>
   </div>
-  <a class="carousel-control-prev" href="#carousel-tilenav" role="button" data-slide="prev">
-    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-    <span class="sr-only">Previous</span>
-  </a>
-  <a class="carousel-control-next" href="#carousel-tilenav" role="button" data-slide="next">
-    <span class="carousel-control-next-icon" aria-hidden="true"></span>
-    <span class="sr-only">Next</span>
-  </a>
 </div>