🚧 WIP Institutional Repository carousel

This commit: - removes Bootstrap carousel due to the limitations of Bootstrap's built in functionality in favor of creating a custom carousel Ref: - notch8/palni_palci_knapsack#189
samvera · Jan 24, 2025 · aee5af9 · aee5af9
1 parent 984c237
commit aee5af9
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 152 deletions.
diff --git 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
@@ -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>