From 318da03f016312922bb6ba4343723d925c39be37 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Wed, 6 Dec 2023 16:25:13 +0530 Subject: [PATCH] Created the anniversaty block with sidebar --- blocks/connect/connect.css | 9 ++++ blocks/connect/connect.js | 2 +- scripts/scripts.js | 1 + styles/Typo.css | 4 ++ templates/Anniversary/Anniversary.css | 38 +++++++++++++++++ templates/Anniversary/Anniversary.js | 61 +++++++++++++++++++++++++++ templates/Blog/Blog.js | 2 +- templates/Default/Default.js | 2 +- templates/News/News.js | 2 +- 9 files changed, 117 insertions(+), 4 deletions(-) create mode 100644 blocks/connect/connect.css create mode 100644 templates/Anniversary/Anniversary.css create mode 100644 templates/Anniversary/Anniversary.js diff --git a/blocks/connect/connect.css b/blocks/connect/connect.css new file mode 100644 index 00000000..fb540281 --- /dev/null +++ b/blocks/connect/connect.css @@ -0,0 +1,9 @@ +/* connet css */ +.linkedin-bottom { + padding-top: 80px; + padding-bottom: 80px; +} + +.linkedin-bottom .outer { + display: block; +} \ No newline at end of file diff --git a/blocks/connect/connect.js b/blocks/connect/connect.js index c015f5f8..23ddd2c8 100644 --- a/blocks/connect/connect.js +++ b/blocks/connect/connect.js @@ -9,7 +9,7 @@ export default function decorate(block) { const anchorLink = block.querySelector('a'); const bodytext = block.children[1].textContent.trim(); const container = div( - { class: 'linkedin-bottom wide-section padding-btm' }, + { class: 'linkedin-bottom padding-btm' }, div( { class: 'outer' }, a( diff --git a/scripts/scripts.js b/scripts/scripts.js index efac4cab..d3751ec8 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -35,6 +35,7 @@ const TEMPLATE_LIST = [ 'default', 'blog', 'news', + 'anniversary', ]; const CATEGORY_LIST = [ diff --git a/styles/Typo.css b/styles/Typo.css index b6296c0d..7fb15bb2 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -933,6 +933,10 @@ body.mrna input[type="submit"]:hover { padding: 0!important; } +.no-space a { + width: auto!important; +} + .text-small p { font-size: 12px!important; line-height: 1.1em!important; diff --git a/templates/Anniversary/Anniversary.css b/templates/Anniversary/Anniversary.css new file mode 100644 index 00000000..ef6388c2 --- /dev/null +++ b/templates/Anniversary/Anniversary.css @@ -0,0 +1,38 @@ +/* Default template css */ +.default-content-wrapper { + text-align: left!important; +} + +.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; + } +} \ No newline at end of file diff --git a/templates/Anniversary/Anniversary.js b/templates/Anniversary/Anniversary.js new file mode 100644 index 00000000..2ad4aeb9 --- /dev/null +++ b/templates/Anniversary/Anniversary.js @@ -0,0 +1,61 @@ +function setSidebarMaxHeight() { + let height = 0; + const sidebar = document.querySelector('#sidebar'); + [...sidebar.children].forEach((element) => { + height += element.offsetHeight; + }); + sidebar.style.maxHeight = `${height + 50}px`; +} + +function setSidebarHeight() { + window.addEventListener('resize', setSidebarMaxHeight); + window.addEventListener('click', setSidebarMaxHeight); +} + +export default function buildAutoBlocks(block) { + // const contentBlocks = block.querySelectorAll('.section'); + const sidebarSections = block.querySelector('.sidebar-section'); + + // Creating the default template wrapper + const defaultTemplate = document.createElement('div'); + defaultTemplate.id = 'content-wrapper'; + + // Creating content wrapper + const content = document.createElement('div'); + content.id = 'content'; + + // Creating outer element + const outerElement = document.createElement('div'); + outerElement.className = 'outer'; + + // Creating main and sidebar elements + const main = document.createElement('div'); + main.id = 'main'; + + const sidebar = document.createElement('div'); + sidebar.id = 'sidebar'; + + // Creating clearfix element + const clearFix = document.createElement('div'); + clearFix.className = 'clearfix'; + + outerElement.appendChild(main); + outerElement.appendChild(sidebar); + content.appendChild(outerElement); + content.appendChild(clearFix); + defaultTemplate.appendChild(content); + // Iterate over each section + if (sidebarSections.children.length > 0) { + const sidebars = sidebarSections.querySelectorAll('[data-block-name^="sidebar-"]'); + if (sidebars.length > 0) { + sidebars.forEach((sidebarItem) => { + sidebar.appendChild(sidebarItem); + }); + } + sidebarSections.style.display = null; + main.appendChild(sidebarSections.cloneNode(true)); + sidebarSections.outerHTML = defaultTemplate.outerHTML; + } + setTimeout(() => setSidebarMaxHeight(), 1000); + setSidebarHeight(); +} diff --git a/templates/Blog/Blog.js b/templates/Blog/Blog.js index 0125a148..273938d7 100644 --- a/templates/Blog/Blog.js +++ b/templates/Blog/Blog.js @@ -231,7 +231,7 @@ function setSidebarMaxHeight() { [...sidebar.children].forEach((element) => { height += element.offsetHeight; }); - sidebar.style.maxHeight = `${height}px`; + sidebar.style.maxHeight = `${height + 50}px`; } function setSidebarHeight() { diff --git a/templates/Default/Default.js b/templates/Default/Default.js index 1bfad679..7fdc4931 100644 --- a/templates/Default/Default.js +++ b/templates/Default/Default.js @@ -4,7 +4,7 @@ function setSidebarMaxHeight() { [...sidebar.children].forEach((element) => { height += element.offsetHeight; }); - sidebar.style.maxHeight = `${height}px`; + sidebar.style.maxHeight = `${height + 50}px`; } function setSidebarHeight() { diff --git a/templates/News/News.js b/templates/News/News.js index 5eb7d91d..1b783d87 100644 --- a/templates/News/News.js +++ b/templates/News/News.js @@ -229,7 +229,7 @@ function setSidebarMaxHeight() { [...sidebar.children].forEach((element) => { height += element.offsetHeight; }); - sidebar.style.maxHeight = `${height}px`; + sidebar.style.maxHeight = `${height + 50}px`; } function setSidebarHeight() {