Merge pull request #144 from hlxsites/feature/sidebar-sticky

Added sidebar sticky to all the templates
hlxsites · Nov 20, 2023 · 8c7541f · 8c7541f
2 parents f85122a + 8f2bd63
commit 8c7541f
Show file tree

Hide file tree

Showing 8 changed files with 196 additions and 2 deletions.
diff --git a/styles/Typo.css b/styles/Typo.css
@@ -843,6 +843,62 @@ body.purple input[type="submit"]:hover {
     width: 100%
 }
 
+.text-left {
+    text-align: left;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-right {
+    text-align: right;
+}
+
+.padding-1 {
+    padding: 1px;
+}
+
+.padding-2 {
+    padding: 2px
+}
+
+.padding-4 {
+    padding: 4px;
+}
+
+.padding-8 {
+    padding: 8px;
+}
+
+.padding-16 {
+    padding: 16px;
+}
+
+.margin-1 {
+    margin: 1px;
+}
+
+.margin-2 {
+    margin: 2px
+}
+
+.margin-4 {
+    margin: 4px;
+}
+
+.margin-8 {
+    margin: 8px;
+}
+
+.margin-16 {
+    margin: 16px;
+}
+
+.bg-grey {
+    background-color: #ededed;
+}
+
 .cols-row,
 .cols2-row,
 .cols3-row {

diff --git a/styles/template.css b/styles/template.css
@@ -14,7 +14,7 @@ body {
     box-sizing: border-box;
     margin: 0 auto;
     text-align: left;
-    width: 980px
+    width: 980px;
 }
 
 #header {
@@ -543,7 +543,7 @@ body.full-width #main {
     float: right;
     font-size: 16px;
     line-height: normal;
-    width: 26%
+    width: 26%;
 }
 
 body.sidebar-50 #sidebar {

diff --git a/templates/Blog/Blog.css b/templates/Blog/Blog.css
@@ -2,3 +2,33 @@
 .post-topics {
     padding: 1em 0;
 }
+
+.outer {
+    display: flex;
+    justify-content: space-between;
+}
+
+#main {
+    float: none;
+}
+
+#sidebar {
+    position: sticky;
+    top: 130px;
+    float: none;
+}
+
+@media (max-width: 960px) {
+    #sidebar {
+        top: 80px;
+    }
+}
+
+@media (max-width: 860px) {
+    .outer {
+        flex-direction: column;
+    }
+    #sidebar {
+        max-height: none;
+    }
+}
diff --git a/templates/Blog/Blog.js b/templates/Blog/Blog.js
@@ -225,6 +225,20 @@ function renderShareButtons(container, url, title) {
   container.appendChild(list);
 }
 
+function setSidebarMaxHeight() {
+  let height = 0;
+  const sidebar = document.querySelector('#sidebar');
+  [...sidebar.children].forEach((element) => {
+    height += element.offsetHeight;
+  });
+  sidebar.style.maxHeight = `${height}px`;
+}
+
+function setSidebarHeight() {
+  window.addEventListener('resize', setSidebarMaxHeight);
+  window.addEventListener('click', setSidebarMaxHeight);
+}
+
 export default async function buildAutoBlocks(block) {
   const searchParams = new URLSearchParams(window.location.search);
   let pageNumber = 1; // Use let instead of const
@@ -340,4 +354,6 @@ export default async function buildAutoBlocks(block) {
   content.appendChild(clearFix);
   defaultTemplate.appendChild(content);
   block.appendChild(defaultTemplate);
+  setSidebarMaxHeight();
+  setSidebarHeight();
 }
diff --git a/templates/Default/Default.css b/templates/Default/Default.css
@@ -5,4 +5,34 @@
 
 .default-content-wrapper h2:first-child {
     margin-top: 0px!important;
+}
+
+.outer {
+    display: flex;
+    justify-content: space-between;
+}
+
+#main {
+    float: none;
+}
+
+#sidebar {
+    position: sticky;
+    top: 130px;
+    float: none;
+}
+
+@media (max-width: 960px) {
+    #sidebar {
+        top: 80px;
+    }
+}
+
+@media (max-width: 860px) {
+    .outer {
+        flex-direction: column;
+    }
+    #sidebar {
+        max-height: none;
+    }
 }
diff --git a/templates/Default/Default.js b/templates/Default/Default.js
@@ -1,3 +1,17 @@
+function setSidebarMaxHeight() {
+  let height = 0;
+  const sidebar = document.querySelector('#sidebar');
+  [...sidebar.children].forEach((element) => {
+    height += element.offsetHeight;
+  });
+  sidebar.style.maxHeight = `${height}px`;
+}
+
+function setSidebarHeight() {
+  window.addEventListener('resize', setSidebarMaxHeight);
+  window.addEventListener('click', setSidebarMaxHeight);
+}
+
 export default function buildAutoBlocks(block) {
   const blocks = block.querySelector('.section');
   const sidebars = blocks.querySelectorAll('[data-block-name^="sidebar-"]');
@@ -50,4 +64,6 @@ export default function buildAutoBlocks(block) {
   content.appendChild(clearFix);
   defaultTemplate.appendChild(content);
   block.appendChild(defaultTemplate);
+  setSidebarMaxHeight();
+  setSidebarHeight();
 }
diff --git a/templates/News/News.css b/templates/News/News.css
@@ -2,3 +2,33 @@
 .post-topics {
     padding: 1em 0;
 }
+
+.outer {
+    display: flex;
+    justify-content: space-between;
+}
+
+#main {
+    float: none;
+}
+
+#sidebar {
+    position: sticky;
+    top: 130px;
+    float: none;
+}
+
+@media (max-width: 960px) {
+    #sidebar {
+        top: 80px;
+    }
+}
+
+@media (max-width: 860px) {
+    .outer {
+        flex-direction: column;
+    }
+    #sidebar {
+        max-height: none;
+    }
+}
diff --git a/templates/News/News.js b/templates/News/News.js
@@ -224,6 +224,20 @@ function renderShareButtons(container, url, title) {
   container.appendChild(list);
 }
 
+function setSidebarMaxHeight() {
+  let height = 0;
+  const sidebar = document.querySelector('#sidebar');
+  [...sidebar.children].forEach((element) => {
+    height += element.offsetHeight;
+  });
+  sidebar.style.maxHeight = `${height}px`;
+}
+
+function setSidebarHeight() {
+  window.addEventListener('resize', setSidebarMaxHeight);
+  window.addEventListener('click', setSidebarMaxHeight);
+}
+
 export default async function buildAutoBlocks(block) {
   const searchParams = new URLSearchParams(window.location.search);
   let pageNumber = 1; // Use let instead of const
@@ -339,4 +353,6 @@ export default async function buildAutoBlocks(block) {
   content.appendChild(clearFix);
   defaultTemplate.appendChild(content);
   block.appendChild(defaultTemplate);
+  setSidebarMaxHeight();
+  setSidebarHeight();
 }