KAW-7905: footer updates

Netcentric · Sep 9, 2024 · c2723ba · c2723ba
1 parent aaea6d6
commit c2723ba
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 41 deletions.
diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
@@ -1,5 +1,5 @@
 footer {
-  background-color: #222;
+  background-color: var(--black);
   color: var(--c-primary-white);
   position: relative;
   padding: 0 20px;
@@ -13,12 +13,9 @@ footer {
   margin: 0;
 }
 
-.footer .footer-column:first-child {
-  margin: 0;
-}
-
 .footer .footer-column:last-child {
   padding-bottom: 0;
+  margin: 0;
 }
 
 .footer .block.columns .footer-column {
@@ -28,11 +25,11 @@ footer {
 }
 
 .footer .footer-column ul {
-  margin-top: 20px;
+  margin-top: 24px;
   padding: 0;
   list-style: none;
   display: flex;
-  gap: 24px;
+  gap: 16px;
   flex-direction: column;
 }
 
@@ -52,6 +49,7 @@ footer {
 }
 
 .footer .footer-list-item a {
+  border-bottom: 1px solid transparent;
   color: var(--c-primary-white);
   display: flex;
   gap: 15px;
@@ -61,8 +59,7 @@ footer {
 
 .footer .footer-list-item a:hover,
 .footer .footer-list-item a:active {
-  color: var(--action-hover);
-  text-decoration: none;
+  border-bottom: 1px solid var(--c-primary-white);
 }
 
 .footer .footer-list-item a:focus {
@@ -73,6 +70,7 @@ footer {
 .footer .footer-list-item a:has(span.icon):focus,
 .footer .footer-list-item a:has(span.icon):hover {
   filter: brightness(2);
+  border: none;
 }
 
 .footer .back-to-top {

diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
@@ -48,49 +48,46 @@ export default async function decorate(block) {
   });
 
   // Back to top button
-  const path = window.location.pathname;
-  if (!(path.includes('importatori-dealer') || path.includes('import-dealers'))) {
-    const backToTopNode = document.createRange().createContextualFragment(`
+  const backToTopNode = document.createRange().createContextualFragment(`
     <button class="back-to-top">
       <img data-icon-name="arrow" src="/icons/chevron-up.svg" alt="" loading="lazy">
     </button>
   `);
 
-    footer.prepend(backToTopNode);
+  footer.prepend(backToTopNode);
 
-    const backToTopButton = footer.querySelector('.back-to-top');
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          backToTopButton.style.position = 'absolute';
-          backToTopButton.style.bottom = `${entry.boundingClientRect.height + 80}px`;
-        } else {
-          backToTopButton.style.position = 'fixed';
-          backToTopButton.style.bottom = '80px';
-        }
-      });
-    });
-    observer.observe(footer);
-
-    window.addEventListener('scroll', () => {
-      const scrollPosition = window.scrollY + window.innerHeight;
-      const documentHeight = document.documentElement.scrollHeight;
-
-      // Display button if user scrolls close to the bottom, 40px above the footer
-      if (scrollPosition >= documentHeight / 3) {
-        backToTopButton.style.display = 'block';
+  const backToTopButton = footer.querySelector('.back-to-top');
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        backToTopButton.style.position = 'absolute';
+        backToTopButton.style.bottom = `${entry.boundingClientRect.height + 80}px`;
       } else {
-        backToTopButton.style.display = 'none';
+        backToTopButton.style.position = 'fixed';
+        backToTopButton.style.bottom = '80px';
       }
     });
+  });
+  observer.observe(footer);
 
-    footer.querySelector('.back-to-top').addEventListener('click', () => {
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-      });
+  window.addEventListener('scroll', () => {
+    const scrollPosition = window.scrollY + window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+
+    // Display button if user scrolls close to the bottom, 40px above the footer
+    if (scrollPosition >= documentHeight / 3) {
+      backToTopButton.style.display = 'block';
+    } else {
+      backToTopButton.style.display = 'none';
+    }
+  });
+
+  footer.querySelector('.back-to-top').addEventListener('click', () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
     });
-  }
+  });
 
   block.append(footer);
 }