From: Arnaud Guéras <arnaudgs@gmail.com>
Date: Sun, 24 Nov 2024 12:36:37 +0000 (+0100)
Subject: carousel
X-Git-Url: http://xenbits.xensource.com/gitweb?a=commitdiff_plain;h=fb46a140f4f5e9ba763130bec915b91738a24f14;p=www-xenproject-org.git

carousel

Signed-off-by: Arnaud Guéras <arnaudgs@gmail.com>
---

diff --git a/content/_index.md b/content/_index.md
index 5dbcfd5..cf63e83 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -71,7 +71,7 @@ The Xen Project focuses on revolutionizing virtualization by providing a versati
 
 
 {{<section container="full">}}
-{{<carousel class="mg-t-lg carousel-container-width">}}
+{{<carousel class="mg-t-lg">}}
 {{<getpages "projects" "hidden">}}
 {{</carousel>}}
 
diff --git a/content/test.md b/content/test.md
index b4ff9d7..6e24008 100644
--- a/content/test.md
+++ b/content/test.md
@@ -4,7 +4,12 @@ draft: true
 hidden: true
 ---
 {{<section container="full">}}
-{{<carousel class="mg-t-lg carousel-container-width">}}
+{{<carousel class="mg-t-lg ">}}
 {{<getpages "projects" "hidden">}}
 {{</carousel>}}
+{{</section>}}
+
+
+{{<section container="full">}}
+{{<latest-news>}}
 {{</section>}}
\ No newline at end of file
diff --git a/themes/xen-project/assets/css/components/carousel.scss b/themes/xen-project/assets/css/components/carousel.scss
index fbe61e4..e67523e 100644
--- a/themes/xen-project/assets/css/components/carousel.scss
+++ b/themes/xen-project/assets/css/components/carousel.scss
@@ -61,14 +61,14 @@
   }
 
   .carousel-content-inner {
-    --opacity: 0.2;
+    --opacity: 0.1;
     --mask-image: linear-gradient(
       to right,
       transparent,
-      rgba(0, 0, 0, var(--opacity)) calc(var(--mask-size) - 5%),
+      rgba(0, 0, 0, var(--opacity)) calc(var(--mask-size) - 2%),
       black calc(var(--mask-size) + 5%),
       black calc(100% - var(--mask-size) - 5%),
-      rgba(0, 0, 0, var(--opacity)) calc(100% - var(--mask-size) + 5%),
+      rgba(0, 0, 0, var(--opacity)) calc(100% - var(--mask-size) + 2%),
       transparent
     );
     mask-image: var(--mask-image);
diff --git a/themes/xen-project/assets/css/components/news-container.scss b/themes/xen-project/assets/css/components/news-container.scss
deleted file mode 100644
index de4d5fa..0000000
--- a/themes/xen-project/assets/css/components/news-container.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.news-container {
-  --cols: 1;
-  --gap: 24px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: stretch;
-  gap: var(--gap);
-
-  --col-width: calc((100% / var(--cols)) - var(--gap));
-  > * {
-    flex: 1 1 var(--col-width);
-  }
-
-  @include tablet {
-    --cols: 2;
-  }
-
-  @include desktop {
-    --cols: 3;
-  }
-}
diff --git a/themes/xen-project/assets/css/main.scss b/themes/xen-project/assets/css/main.scss
index 244feb8..19aca87 100644
--- a/themes/xen-project/assets/css/main.scss
+++ b/themes/xen-project/assets/css/main.scss
@@ -31,7 +31,6 @@
 @import "./components/box-members.scss";
 @import "./components/carousel.scss";
 @import "./components/news-card.scss";
-@import "./components/news-container.scss";
 @import "./components/images-in-circle.scss";
 @import "./components/latest-news.scss";
 @import "./content-markdown.scss";
diff --git a/themes/xen-project/assets/js/carousel.js b/themes/xen-project/assets/js/carousel.js
index ddef777..08f8553 100644
--- a/themes/xen-project/assets/js/carousel.js
+++ b/themes/xen-project/assets/js/carousel.js
@@ -4,11 +4,11 @@
   const itemsContainerSelector = ".carousel";
   const itemSelector = ".carousel-item";
 
-  const { debounce } = window.XenSiteUtils;
+  const { debounce, waitForElements } = window.XenSiteUtils;
 
   const carousel = async (element) => {
     const itemsContainer = element.querySelector(itemsContainerSelector);
-    const items = element.querySelectorAll(itemSelector);
+    const items = await waitForElements(element, itemSelector);
 
     const firstItem = items[0].cloneNode(true);
     firstItem.innerHTML = "";
@@ -30,34 +30,34 @@
         behavior: "smooth",
       });
     });
-  };
-
-  [...document.querySelectorAll(selector)].forEach((elm) => {
-    carousel(elm);
-  });
 
-  function updateCarouselTabIndexes() {
-    const items = document.querySelectorAll(".carousel-item");
+    function updateCarouselTabIndexes() {
+      const items = element.querySelectorAll(".carousel-item");
 
-    items.forEach((item) => {
-      const rect = item.getBoundingClientRect();
-      const isVisible = rect.left >= 0 && rect.right <= window.innerWidth;
+      items.forEach((item) => {
+        const rect = item.getBoundingClientRect();
+        const isVisible = rect.left >= 0 && rect.right <= window.innerWidth;
 
-      item.classList.toggle("carousel-item--hidden", !isVisible);
-      const links = item.querySelectorAll("a");
+        item.classList.toggle("carousel-item--hidden", !isVisible);
+        const links = item.querySelectorAll("a");
 
-      links.forEach((link) => {
-        if (link.getAttribute("aria-hidden") !== "true") {
-          if (isVisible) {
-            link.removeAttribute("tabindex");
-          } else {
-            link.setAttribute("tabindex", "-1");
+        links.forEach((link) => {
+          if (link.getAttribute("aria-hidden") !== "true") {
+            if (isVisible) {
+              link.removeAttribute("tabindex");
+            } else {
+              link.setAttribute("tabindex", "-1");
+            }
           }
-        }
+        });
       });
-    });
-  }
+    }
 
-  document.querySelector(".carousel").addEventListener("scroll", updateCarouselTabIndexes);
-  updateCarouselTabIndexes();
+    element.querySelector(".carousel").addEventListener("scroll", updateCarouselTabIndexes);
+    updateCarouselTabIndexes();
+  };
+
+  [...document.querySelectorAll(selector)].forEach((elm) => {
+    carousel(elm);
+  });
 })();
diff --git a/themes/xen-project/layouts/partials/latest-news.html b/themes/xen-project/layouts/partials/latest-news.html
index 3a54f0a..3fdda30 100644
--- a/themes/xen-project/layouts/partials/latest-news.html
+++ b/themes/xen-project/layouts/partials/latest-news.html
@@ -33,7 +33,9 @@
 
   <div class="carousel-container carousel-container-width">
     <div class="carousel-content">
-      <div class="carousel latest-news_container news-container"></div>
+      <div class="carousel-content-inner">
+        <div class="carousel latest-news_container"></div>
+      </div>
       <div class="carousel-buttons">
         <button class="carousel-button prev">
           <i class="fas fa-arrow-left"></i>