Merge branch 'main' of github.com:hlxsites/aldevron into feature/dyna…

…mic-block
hlxsites · Nov 28, 2023 · f189c33 · f189c33
2 parents 5463bf6 + 7a8fb26
commit f189c33
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 54 deletions.
diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
@@ -19,6 +19,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  width: 100%;
 }
 
 .social-icons.clearfix {

diff --git a/styles/Typo.css b/styles/Typo.css
@@ -3,6 +3,11 @@
     --text-color: #fff;
 }
 
+html {
+    scroll-behavior: smooth;
+    scroll-padding-top: 120px;
+}
+
 .img-colorbox-popup::after,
 [class*=" icon-"],
 [class^="icon-"] {

diff --git a/styles/responsive.css b/styles/responsive.css
@@ -7,7 +7,11 @@
     #logo {
         left: 20px;
         width: 190px
-    }    
+    }
+
+    #menu li.hs-menu-depth-1>a {
+        padding: 0 18px !important;
+    }  
 }
 
 @media (max-width: 1024px) {
@@ -38,6 +42,11 @@
     #heading .vertical {
         display: block
     }
+
+    #menu li.hs-menu-depth-1>a {
+        font-size: 15px !important;
+        padding: 0 12px !important;
+    }
 }
 
 @media (max-width: 1023px) {

diff --git a/styles/template.css b/styles/template.css
@@ -507,13 +507,21 @@ body.full-width #sidebar {
     width: 0%!important;
 }
 
+body.full-width #sidebar {
+    width: 0;
+}
+
 #sidebar {
     float: right;
     font-size: 16px;
     line-height: normal;
     width: 26%;
 }
 
+#sidebar > div {
+    margin-top: 0;
+}
+
 body.sidebar-50 #sidebar {
     width: 47%
 }

diff --git a/templates/Blog/Blog.js b/templates/Blog/Blog.js
@@ -254,17 +254,12 @@ export default async function buildAutoBlocks(block) {
     return regex.test(path);
   });
 
-  const blocks = block.querySelector('.section');
-  const sidebars = blocks.querySelectorAll('[data-block-name^="sidebar-"]');
+  const contentBlocks = block.querySelectorAll('.section');
 
   // Creating the default template wrapper
   const defaultTemplate = document.createElement('div');
   defaultTemplate.id = 'content-wrapper';
 
-  // Appending Hero banner
-  const heroBanner = blocks.querySelector('.hero-wrapper');
-  defaultTemplate.appendChild(heroBanner);
-
   // Creating content wrapper
   const content = document.createElement('div');
   content.id = 'content';
@@ -280,9 +275,24 @@ export default async function buildAutoBlocks(block) {
   const sidebar = document.createElement('div');
   sidebar.id = 'sidebar';
 
-  // Moving remaining blocks to main
-  [...blocks.children].forEach((child) => {
-    main.appendChild(child);
+  // Iterate over each section
+  contentBlocks.forEach((blocks) => {
+    // Appending Hero banner from each section
+    const heroBanner = blocks.querySelector('.hero-wrapper');
+    if (heroBanner) {
+      defaultTemplate.appendChild(heroBanner); // Clone to avoid removing the original
+    }
+
+    // Handling sidebars within each section
+    const sidebars = blocks.querySelectorAll('[data-block-name^="sidebar-"]');
+    if (sidebars.length > 0) {
+      sidebars.forEach((sidebarItem) => {
+        sidebar.appendChild(sidebarItem); // Clone to keep the original in place
+      });
+    }
+
+    main.appendChild(blocks);
+    blocks.style.display = null;
   });
 
   if (searchParams.has('archive')) {
@@ -325,19 +335,13 @@ export default async function buildAutoBlocks(block) {
   const archiveSidebar = generateArchiveBlock(filteredResults);
   if (archiveSidebar) {
     sideBarVisible = true;
-    sidebar.appendChild(archiveSidebar);
+    sidebar.prepend(archiveSidebar);
   }
 
   const topicSidebar = generateTopicBlock(filteredResults);
   if (topicSidebar) {
     sideBarVisible = true;
-    sidebar.appendChild(topicSidebar);
-  }
-
-  if (sidebars.length > 0) {
-    sidebars.forEach((sidebarItem) => {
-      sidebar.appendChild(sidebarItem);
-    });
+    sidebar.prepend(topicSidebar);
   }
 
   if (!sideBarVisible) {
@@ -350,6 +354,9 @@ export default async function buildAutoBlocks(block) {
 
   outerElement.appendChild(main);
   outerElement.appendChild(sidebar);
+  if (!sidebar.children.length > 0) {
+    document.body.classList.add('full-width');
+  }
   content.appendChild(outerElement);
   content.appendChild(clearFix);
   defaultTemplate.appendChild(content);

diff --git a/templates/Default/Default.js b/templates/Default/Default.js
@@ -13,18 +13,12 @@ function setSidebarHeight() {
 }
 
 export default function buildAutoBlocks(block) {
-  const blocks = block.querySelector('.section');
-  const sidebars = blocks.querySelectorAll('[data-block-name^="sidebar-"]');
+  const contentBlocks = block.querySelectorAll('.section');
+
   // Creating the default template wrapper
   const defaultTemplate = document.createElement('div');
   defaultTemplate.id = 'content-wrapper';
 
-  // Appending Hero banner
-  const heroBanner = blocks.querySelector('.hero-wrapper');
-  if (heroBanner) {
-    defaultTemplate.appendChild(heroBanner);
-  }
-
   // Creating content wrapper
   const content = document.createElement('div');
   content.id = 'content';
@@ -40,18 +34,24 @@ export default function buildAutoBlocks(block) {
   const sidebar = document.createElement('div');
   sidebar.id = 'sidebar';
 
-  // Adding sidebars if available
-  if (sidebars.length > 0) {
-    sidebars.forEach((sidebarItem) => {
-      sidebar.appendChild(sidebarItem);
-    });
-  } else {
-    document.body.classList.add('full-width');
-  }
+  // Iterate over each section
+  contentBlocks.forEach((blocks) => {
+    // Appending Hero banner from each section
+    const heroBanner = blocks.querySelector('.hero-wrapper');
+    if (heroBanner) {
+      defaultTemplate.appendChild(heroBanner); // Clone to avoid removing the original
+    }
+
+    // Handling sidebars within each section
+    const sidebars = blocks.querySelectorAll('[data-block-name^="sidebar-"]');
+    if (sidebars.length > 0) {
+      sidebars.forEach((sidebarItem) => {
+        sidebar.appendChild(sidebarItem); // Clone to keep the original in place
+      });
+    }
 
-  // Moving remaining blocks to main
-  [...blocks.children].forEach((child) => {
-    main.appendChild(child);
+    main.appendChild(blocks);
+    blocks.style.display = null;
   });
 
   // Creating clearfix element
@@ -60,6 +60,9 @@ export default function buildAutoBlocks(block) {
 
   outerElement.appendChild(main);
   outerElement.appendChild(sidebar);
+  if (!sidebar.children.length > 0) {
+    document.body.classList.add('full-width');
+  }
   content.appendChild(outerElement);
   content.appendChild(clearFix);
   defaultTemplate.appendChild(content);

diff --git a/templates/News/News.js b/templates/News/News.js
@@ -252,17 +252,12 @@ export default async function buildAutoBlocks(block) {
     return regex.test(path);
   });
 
-  const blocks = block.querySelector('.section');
-  const sidebars = blocks.querySelectorAll('[data-block-name^="sidebar-"]');
+  const contentBlocks = block.querySelectorAll('.section');
 
   // Creating the default template wrapper
   const defaultTemplate = document.createElement('div');
   defaultTemplate.id = 'content-wrapper';
 
-  // Appending Hero banner
-  const heroBanner = blocks.querySelector('.hero-wrapper');
-  defaultTemplate.appendChild(heroBanner);
-
   // Creating content wrapper
   const content = document.createElement('div');
   content.id = 'content';
@@ -278,9 +273,23 @@ export default async function buildAutoBlocks(block) {
   const sidebar = document.createElement('div');
   sidebar.id = 'sidebar';
 
-  // Moving remaining blocks to main
-  [...blocks.children].forEach((child) => {
-    main.appendChild(child);
+  contentBlocks.forEach((blocks) => {
+    // Appending Hero banner from each section
+    const heroBanner = blocks.querySelector('.hero-wrapper');
+    if (heroBanner) {
+      defaultTemplate.appendChild(heroBanner); // Clone to avoid removing the original
+    }
+
+    // Handling sidebars within each section
+    const sidebars = blocks.querySelectorAll('[data-block-name^="sidebar-"]');
+    if (sidebars.length > 0) {
+      sidebars.forEach((sidebarItem) => {
+        sidebar.appendChild(sidebarItem); // Clone to keep the original in place
+      });
+    }
+
+    main.appendChild(blocks);
+    blocks.style.display = null;
   });
 
   if (searchParams.has('archive')) {
@@ -323,19 +332,13 @@ export default async function buildAutoBlocks(block) {
   const archiveSidebar = generateArchiveBlock(filteredResults);
   if (archiveSidebar) {
     sideBarVisible = true;
-    sidebar.appendChild(archiveSidebar);
+    sidebar.prepend(archiveSidebar);
   }
 
   const topicSidebar = generateTopicBlock(filteredResults);
   if (topicSidebar) {
     sideBarVisible = true;
-    sidebar.appendChild(topicSidebar);
-  }
-
-  if (sidebars.length > 0) {
-    sidebars.forEach((sidebarItem) => {
-      sidebar.appendChild(sidebarItem);
-    });
+    sidebar.prepend(topicSidebar);
   }
 
   if (!sideBarVisible) {
@@ -348,6 +351,9 @@ export default async function buildAutoBlocks(block) {
 
   outerElement.appendChild(main);
   outerElement.appendChild(sidebar);
+  if (!sidebar.children.length > 0) {
+    document.body.classList.add('full-width');
+  }
   content.appendChild(outerElement);
   content.appendChild(clearFix);
   defaultTemplate.appendChild(content);