Merge pull request #199 from hlxsites/bug/timeline-issues

Bug/timeline issues
hlxsites · Nov 30, 2023 · 65d614c · 65d614c
2 parents 4719e0b + 1ebcee8
commit 65d614c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/blocks/timeline-slide/timeline-slide.css b/blocks/timeline-slide/timeline-slide.css
@@ -6,16 +6,16 @@
     padding: 40px 0;
     overflow: hidden;
   }
-  
+
   /* Slider styles */
   #year-slider {
     display: flex;
     overflow: hidden;
     transform: translate3d(43%, 0, 0);
     transition: 0.5s all ease-in-out;
-    transition-duration: 0ms;
+    transition-duration: 500ms;
   }
-  
+
   .year {
     cursor: pointer;
     border-radius: 5px;
@@ -24,13 +24,14 @@
     font-weight: 700;
     transition: 0.3s all ease-in-out;
     text-align: center;
+    width: 160px;
   }
-  
-  .year:hover, .year.active {
+
+  .year.active {
     color: #f49600;
     transition: 0.3s all ease-in-out;
   }
-  
+
   /* Content area styles */
   #content-slider-container {
     position: relative;
@@ -57,15 +58,15 @@
     position: absolute;
     top: 0.45em;
 }
-  
+
   .year-content {
     display: none;
     transition: transform 0.5s ease, opacity 0.5s ease;
     opacity: 0;
     left: 0;
     right: 0;
   }
-  
+
   .year-content.active {
     display: block;
     opacity: 1;
@@ -87,7 +88,9 @@
   }
 
   .button-container .hide {
-    opacity: 0.5;
+    opacity: .35;
+    cursor: auto;
+    pointer-events: none;
   }
 
   .button-prev {
@@ -172,4 +175,8 @@
         position: relative;
         justify-content: center;
       }
+
+    .year {
+      width: 150px;
+    }
   }
diff --git a/blocks/timeline-slide/timeline-slide.js b/blocks/timeline-slide/timeline-slide.js
@@ -83,7 +83,6 @@ export default function decorate(block) {
     if (child.children.length >= 2) {
       const yearChild = child.children[0].cloneNode(true);
       yearChild.classList.add('year');
-      yearChild.style.width = '130px';
       yearSlider.appendChild(yearChild);
       const contentChild = child.children[1].cloneNode(true);
       contentChild.classList.add('year-content');
@@ -103,6 +102,16 @@ export default function decorate(block) {
     year.addEventListener('click', () => {
       clearActiveClasses();
 
+      // disable previous arrow button based on first slide.
+      if (index === 0 && !prevButton.classList.contains('hide')) {
+        prevButton.classList.add('hide');
+      } else { prevButton.classList.remove('hide'); }
+
+      // disable next arrow button based on last slide.
+      if (index === yearSlider.children.length - 1 && !nextButton.classList.contains('hide')) {
+        nextButton.classList.add('hide');
+      } else { nextButton.classList.remove('hide'); }
+
       // Check direction for slide effect
       const direction = index > activeYearIndex ? 'left' : 'right';
       applySlideEffect(index, direction);