From c5fccd7ea8f2c9f2ac2b31d6af9c8bccc821b509 Mon Sep 17 00:00:00 2001 From: umamenda Date: Fri, 13 Oct 2023 17:50:55 +0530 Subject: [PATCH 1/7] footer development is completed with eslint issues --- blocks/footer/footer.css | 37 ++++++++++++++++++++++++---------- blocks/footer/footer.js | 43 +++++++++++++++++++++++++++++++--------- 2 files changed, 61 insertions(+), 19 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 19fc5607..736be36d 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -1,14 +1,31 @@ -footer { - padding: 2rem; - background-color: var(--overlay-background-color); - font-size: var(--body-font-size-s); +#footer-orange{ + line-height: normal; } -footer .footer { - max-width: 1200px; - margin: auto; +.footer-wrapper div#footer-orange .outer { + display: grid; + grid-template-columns: 3fr 20%; } -footer .footer p { - margin: 0; -} \ No newline at end of file +.footer-wrapper div#footer-orange .hs-menu-wrapper { + width: 100%; +} + +.footer-wrapper div#footer-black div { + display: flex; + align-items: center; + flex-direction: row-reverse; + justify-content: space-between; +} + +.social-icons.clearfix { + text-align: right; +} + +.social-icons.clearfix img { + max-width: 44px; +} + +#footer-black.outer * { + color: #fff; +} diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 26b44da7..1fcf804c 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -1,5 +1,4 @@ import { readBlockConfig, decorateIcons } from '../../scripts/aem.js'; - /** * loads and decorates the footer * @param {Element} block The footer block element @@ -7,19 +6,45 @@ import { readBlockConfig, decorateIcons } from '../../scripts/aem.js'; export default async function decorate(block) { const cfg = readBlockConfig(block); block.textContent = ''; - // fetch footer content const footerPath = cfg.footer || '/footer'; const resp = await fetch(`${footerPath}.plain.html`, window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {}); - + function createDivElement(className, IDName) { + const divEl = document.createElement('div'); + divEl.setAttribute('class', className); + divEl.setAttribute('id', IDName); + return divEl; + } + function addClassesToListItems(element, depth) { + for (let i = 0; i < element.length; i += 1) { + const item = element[i]; + item.classList.add('hs-menu-item', `hs-menu-depth-${depth}`, 'hs-item-has-children', `menu-num-${i + 1}`); + const childItems = item.querySelector('ul'); + if (childItems?.children?.length > 0) { + addClassesToListItems(childItems.children, depth + 1); + } + } + } if (resp.ok) { const html = await resp.text(); + const topContainer = createDivElement('top-container', ''); + const footerOrangeSection = createDivElement('', 'footer-orange'); + const footerParent = createDivElement('outer', ''); + const footerWapper = createDivElement('hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal', 'hs_menu_wrapper_footer_nav'); + const footerUl = createDivElement('outer', 'footer-black'); + const socialIcons = createDivElement('social-icons clearfix', ''); - // decorate footer DOM - const footer = document.createElement('div'); - footer.innerHTML = html; - - decorateIcons(footer); - block.append(footer); + footerUl.innerHTML = html; + footerWapper.append(footerUl.querySelector('ul')); + footerOrangeSection.append(footerParent); + topContainer.append(footerOrangeSection); + footerParent.append(footerWapper); + const childItems = footerWapper.children[0].children; + addClassesToListItems(childItems, 1); + socialIcons.append(footerUl.querySelector('p')); + footerParent.append(socialIcons); + topContainer.append(footerUl); + decorateIcons(footerWapper); + block.append(topContainer); } } From b2f043f0251879e10b95a5b966bcfbb4526834d4 Mon Sep 17 00:00:00 2001 From: umamenda Date: Mon, 16 Oct 2023 19:27:22 +0530 Subject: [PATCH 2/7] Updated the content and css issues --- blocks/footer/footer.css | 3 +++ blocks/footer/footer.js | 8 ++++++++ styles/Typo.css | 5 ++++- 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 736be36d..cf4dc273 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -29,3 +29,6 @@ #footer-black.outer * { color: #fff; } +#footer-black img { + width: 55px; +} diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index 1fcf804c..cfa6fc13 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -40,9 +40,17 @@ export default async function decorate(block) { topContainer.append(footerOrangeSection); footerParent.append(footerWapper); const childItems = footerWapper.children[0].children; + // const childImage = childItems[5] + // footerWapper.append(footerUl) addClassesToListItems(childItems, 1); socialIcons.append(footerUl.querySelector('p')); footerParent.append(socialIcons); + const footLogo = document.createElement('a'); + footLogo.id = 'footLogo'; + footLogo.target = '_blank'; + footLogo.href = 'https://www.danaher.com/?utm_source=ALD_web&utm_medium=referral&utm_content=trustmarkfooter'; + footLogo.innerHTML = footerUl.children[0].children[1].innerHTML; + footerUl.children[0].children[1].children[0].children[3].replaceWith(footLogo); topContainer.append(footerUl); decorateIcons(footerWapper); block.append(topContainer); diff --git a/styles/Typo.css b/styles/Typo.css index 251cc9a4..4cffaf94 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -107,6 +107,7 @@ url("../fonts/ald-icons.svg?dgljk#ald-icons") format("svg") } + .img-colorbox-popup::after,[class*=" icon-"],[class^="icon-"] { speak: none; -webkit-font-smoothing: antialiased; @@ -343,7 +344,9 @@ strong { body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font: normal 16px/1.45 "Proxima Nova A", Helvetica, sans-serif; + background-color: #1a1919; + color: #1a1919; + font: normal 16px/1.45 "Proxima Nova A",Helvetica,sans-serif; margin: 0; text-align: center; } From 10916c3e281b5c0883658a648fdf644e963d36da Mon Sep 17 00:00:00 2001 From: umamenda Date: Mon, 16 Oct 2023 19:37:29 +0530 Subject: [PATCH 3/7] added new line for lint issue --- blocks/footer/footer.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index cf4dc273..7d888c35 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -29,6 +29,7 @@ #footer-black.outer * { color: #fff; } + #footer-black img { width: 55px; } From 8703a29acf3f09e7fc0eeae655319eb6e53d8955 Mon Sep 17 00:00:00 2001 From: umamenda Date: Tue, 17 Oct 2023 16:19:14 +0530 Subject: [PATCH 4/7] social icons anchor tag create and updated --- blocks/footer/footer.css | 4 ++++ blocks/footer/footer.js | 21 +++++++++++++++------ 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 7d888c35..e08f5d14 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -33,3 +33,7 @@ #footer-black img { width: 55px; } + +.footer-wrapper div#footer-black div.footericon.social-media-footer { + display: none; +} diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index cfa6fc13..b3060e36 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -25,6 +25,17 @@ export default async function decorate(block) { } } } + function callSocialIcons(socialIcons) { + const allAnchorTags = createDivElement('social-icons', ''); + for (let i = 0; i < socialIcons.children.length; i += 1) { + const createAtag = document.createElement('a'); + createAtag.appendChild(socialIcons.children[i]?.children[0]?.querySelector('picture')); + createAtag.setAttribute('href', socialIcons.children[i]?.children[1]?.children[0].href); + createAtag.setAttribute('target', '_blank'); + allAnchorTags.appendChild(createAtag); + } + return allAnchorTags; + } if (resp.ok) { const html = await resp.text(); const topContainer = createDivElement('top-container', ''); @@ -32,8 +43,6 @@ export default async function decorate(block) { const footerParent = createDivElement('outer', ''); const footerWapper = createDivElement('hs-menu-wrapper active-branch flyouts hs-menu-flow-horizontal', 'hs_menu_wrapper_footer_nav'); const footerUl = createDivElement('outer', 'footer-black'); - const socialIcons = createDivElement('social-icons clearfix', ''); - footerUl.innerHTML = html; footerWapper.append(footerUl.querySelector('ul')); footerOrangeSection.append(footerParent); @@ -43,14 +52,14 @@ export default async function decorate(block) { // const childImage = childItems[5] // footerWapper.append(footerUl) addClassesToListItems(childItems, 1); - socialIcons.append(footerUl.querySelector('p')); - footerParent.append(socialIcons); + footerParent.append(callSocialIcons(footerUl.children[0].children[0])); + footerParent.append(footerUl); const footLogo = document.createElement('a'); footLogo.id = 'footLogo'; footLogo.target = '_blank'; footLogo.href = 'https://www.danaher.com/?utm_source=ALD_web&utm_medium=referral&utm_content=trustmarkfooter'; - footLogo.innerHTML = footerUl.children[0].children[1].innerHTML; - footerUl.children[0].children[1].children[0].children[3].replaceWith(footLogo); + footLogo.innerHTML = footerUl.children[0].children[2].innerHTML; + footerUl.children[0].children[2].replaceWith(footLogo); topContainer.append(footerUl); decorateIcons(footerWapper); block.append(topContainer); From b184da9fcd238358d2f9aea83c97170f2658ff34 Mon Sep 17 00:00:00 2001 From: umamenda Date: Tue, 17 Oct 2023 19:15:19 +0530 Subject: [PATCH 5/7] Removed the static url and added from backend for foot logo --- blocks/footer/footer.css | 1 - blocks/footer/footer.js | 10 +++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index e08f5d14..6bee932f 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -14,7 +14,6 @@ .footer-wrapper div#footer-black div { display: flex; align-items: center; - flex-direction: row-reverse; justify-content: space-between; } diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index b3060e36..17e6c42d 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -57,9 +57,13 @@ export default async function decorate(block) { const footLogo = document.createElement('a'); footLogo.id = 'footLogo'; footLogo.target = '_blank'; - footLogo.href = 'https://www.danaher.com/?utm_source=ALD_web&utm_medium=referral&utm_content=trustmarkfooter'; - footLogo.innerHTML = footerUl.children[0].children[2].innerHTML; - footerUl.children[0].children[2].replaceWith(footLogo); + // footLogo.href = ''; + // footLogo.innerHTML = footerUl.children[0].children[2].innerHTML; + + footLogo.append(footerUl.children[0]?.children[1]?.children[0]?.children[0]?.querySelector('picture')); + footLogo.href = footerUl.children[0]?.children[1]?.children[0]?.children[1]?.children[0]?.href; + + footerUl.children[0].children[1].replaceWith(footLogo); topContainer.append(footerUl); decorateIcons(footerWapper); block.append(topContainer); From f2fe343dfa21a379a437822e2e52401d5681d531 Mon Sep 17 00:00:00 2001 From: umamenda Date: Tue, 17 Oct 2023 21:49:30 +0530 Subject: [PATCH 6/7] updated css for mobile footer --- blocks/footer/footer.css | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 6bee932f..edaa0124 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -20,7 +20,23 @@ .social-icons.clearfix { text-align: right; } - +@media (max-width: 767px){ + .footer-wrapper div#footer-black div { + display: block; + } +} +@media (max-width: 1024px){ + .footer-wrapper div#footer-black div { + padding: 0 20px; + } + .footer-wrapper div#footer-orange .outer{ + grid-template-columns: 1fr; + } + .footer-wrapper div#footer-orange .outer .social-icons{ + display: flex; + justify-content: flex-end; + } +} .social-icons.clearfix img { max-width: 44px; } From 6062898b567293b1c6d22aa86a14717f31903357 Mon Sep 17 00:00:00 2001 From: umamenda Date: Tue, 17 Oct 2023 21:53:39 +0530 Subject: [PATCH 7/7] fixed lint issues --- blocks/footer/footer.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index edaa0124..b6c30e7d 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -20,23 +20,28 @@ .social-icons.clearfix { text-align: right; } + @media (max-width: 767px){ .footer-wrapper div#footer-black div { display: block; } } + @media (max-width: 1024px){ .footer-wrapper div#footer-black div { padding: 0 20px; } + .footer-wrapper div#footer-orange .outer{ grid-template-columns: 1fr; } + .footer-wrapper div#footer-orange .outer .social-icons{ display: flex; justify-content: flex-end; } } + .social-icons.clearfix img { max-width: 44px; }