make whole carousel shadow target area for click, get rid of color ch…

…ange on hover
fablabbcn · Sep 5, 2024 · 9b8b174 · 9b8b174
1 parent 4ce9625
commit 9b8b174
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 62 deletions.
diff --git a/ddlh/static/application.js b/ddlh/static/application.js
@@ -51,25 +51,13 @@ class Carousel {
     });
     this.outer
       .querySelector(".carousel-shadow.left")
-      .addEventListener("click", (event) => {
-        this.currentIndex = this.currentIndex - 1;
-        this.updatePosition();
-      });
-    this.outer
-      .querySelector(".carousel-shadow.right")
-      .addEventListener("click", (event) => {
-        this.currentIndex = this.currentIndex + 1;
-        this.updatePosition();
-      });
-    this.outer
-      .querySelector(".carousel-arrow.left")
       .addEventListener("click", (event) => {
         event.preventDefault();
         this.currentIndex = this.currentIndex - 1;
         this.updatePosition();
       });
     this.outer
-      .querySelector(".carousel-arrow.right")
+      .querySelector(".carousel-shadow.right")
       .addEventListener("click", (event) => {
         event.preventDefault();
         this.currentIndex = this.currentIndex + 1;
@@ -81,6 +69,12 @@ class Carousel {
     this.container.querySelectorAll(".carousel-dummy").forEach((child) => {
       this.container.removeChild(child);
     });
+    this.container
+      .querySelectorAll(".carousel-item.active")
+      .forEach((child) => {
+        child.classList.remove("active");
+      });
+
     const childWidth = this.container.children[0].offsetWidth;
     const lastIndex = this.container.children.length - 1;
     if (this.currentIndex < 0) {
@@ -90,6 +84,7 @@ class Carousel {
       this.currentIndex = 0;
     }
     var widthOffset = this.currentIndex;
+    this.container.children[this.currentIndex].classList.add("active");
     if (this.currentIndex == 0) {
       const dummyLast = this.container.children[lastIndex].cloneNode(true);
       dummyLast.classList.add("carousel-dummy");

diff --git a/ddlh/static/styles.css b/ddlh/static/styles.css
@@ -642,51 +642,42 @@ p {
     position: relative;
   }
 
-  & .carousel-arrow {
+  & .carousel-shadow {
     position: absolute;
-    border-radius: 1rem;
-    top: 50%;
-    margin-top: -1rem;
-    height: 2rem;
+    z-index: 100;
     width: 2rem;
-    z-index: 200;
-
-    &.left {
-      left: 0;
+    top: 1px;
+    bottom: 1px;
 
-      & svg {
-        transform: rotate(180deg);
-      }
-    }
+    & .carousel-arrow {
+      position: absolute;
+      border-radius: 1rem;
+      top: 50%;
+      margin-top: -1rem;
+      height: 2rem;
+      width: 2rem;
 
-    &.right {
-      right: 0;
-    }
+      &.left {
+        left: 0;
 
-    & svg {
-      width: 100%;
-      height: 100%;
+        & svg {
+          transform: rotate(180deg);
+        }
+      }
 
-      & path {
-        fill: var(--main-fg-color);
+      &.right {
+        right: 0;
       }
-    }
 
-    &:hover {
-      background-color: rgb(0 0 0 / 20%);
+      & svg {
+        width: 100%;
+        height: 100%;
 
-      svg path {
-        fill: var(--link-color);
+        & path {
+          fill: var(--main-fg-color);
+        }
       }
     }
-  }
-
-  & .carousel-shadow {
-    position: absolute;
-    z-index: 100;
-    width: 2rem;
-    top: 1px;
-    bottom: 1px;
 
     &.left {
       left: 0;
@@ -705,6 +696,12 @@ p {
         rgb(255 255 255 / 0%) 100%
       );
     }
+
+    &:hover {
+      & .carousel-arrow {
+        background-color: rgb(0 0 0 / 20%);
+      }
+    }
   }
 
   & .documents {
@@ -722,6 +719,7 @@ p {
 
 .carousel-item {
   display: flex;
+  pointer-events: none;
   flex-direction: column-reverse;
   justify-content: flex-end;
   border-top: 1px solid var(--main-fg-color);
@@ -737,6 +735,10 @@ p {
     border-right: none;
   }
 
+  &.active {
+    pointer-events: auto;
+  }
+
   & .details {
     width: 100%;
     display: flex;
@@ -1516,20 +1518,20 @@ p {
   .carousel {
     & .carousel-shadow {
       width: 6rem;
-    }
 
-    & .carousel-arrow {
-      border-radius: 1.5rem;
-      margin-top: -1.5rem;
-      height: 3rem;
-      width: 3rem;
+      & .carousel-arrow {
+        border-radius: 1.5rem;
+        margin-top: -1.5rem;
+        height: 3rem;
+        width: 3rem;
 
-      &.left {
-        left: 1.5rem;
-      }
+        &.left {
+          left: 1.5rem;
+        }
 
-      &.right {
-        right: 1.5rem;
+        &.right {
+          right: 1.5rem;
+        }
       }
     }
   }

diff --git a/ddlh/templates/partials/carousel.j2 b/ddlh/templates/partials/carousel.j2
@@ -1,16 +1,18 @@
 <div class="carousel container">
     <h1>{{ headline }}</h1>
     <div class="carousel-inner">
-        <div class="carousel-shadow left"></div>
-        <a class="carousel-arrow left" href="#">{% include "partials/carousel_arrow.j2" %}</a>
+        <a class="carousel-shadow left" href="#">
+            <span class="carousel-arrow left">{% include "partials/carousel_arrow.j2" %}</span>
+        </a>
         <div class="documents">
             {% for document in documents %}
                 {% with show_tags=True, show_theme=True %}
                     {% include "partials/carousel_item.j2" %}
                 {% endwith %}
             {% endfor %}
         </div>
-        <a class="carousel-arrow right" href="#">{% include "partials/carousel_arrow.j2" %}</a>
-        <div class="carousel-shadow right"></div>
+        <a class="carousel-shadow right" href="#">
+            <span class="carousel-arrow right">{% include "partials/carousel_arrow.j2" %}</span>
+        </a>
     </div>
 </div>