From 408518e189134e228444cf90e3700ac1b65569c3 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Tue, 12 Dec 2023 19:18:21 +0530 Subject: [PATCH 1/2] Updated the footer refactor code --- blocks/footer/footer.css | 8 ++++++- blocks/footer/footer.js | 7 ++++++ blocks/imageshyperlink/imageshyperlink.js | 3 +++ blocks/rte/rte.js | 3 +++ blocks/sidebar-rte/sidebar-rte.js | 3 +++ scripts/aem.js | 1 + styles/Typo.css | 8 +++---- styles/template.css | 29 +++++++++++++---------- 8 files changed, 45 insertions(+), 17 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 90cb58ed..194f0f59 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -8,7 +8,8 @@ .footer-wrapper div#footer-orange .outer { display: grid; - grid-template-columns: 3fr 20%; + width: 85%; + grid-template-columns: 1fr; } .footer-wrapper div#footer-orange .hs-menu-wrapper { @@ -36,6 +37,11 @@ } @media (max-width: 1024px){ + .footer-wrapper div#footer-orange .outer { + padding-left: 0px!important; + padding-right: 0px!important; + } + .footer-wrapper div#footer-black div { padding: 0 20px; } diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index fd130aed..fef938ec 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -67,6 +67,13 @@ export default async function decorate(block) { footerUl.children[0].children[1].replaceWith(footLogo); topContainer.append(footerUl); + const links = footerWapper.querySelectorAll('a'); + links.forEach((link) => { + if (link.parentElement.tagName === 'STRONG') { + link.setAttribute('target', '_blank'); + link.classList.add('text-normal'); + } + }) decorateIcons(footerWapper); block.append(topContainer); } diff --git a/blocks/imageshyperlink/imageshyperlink.js b/blocks/imageshyperlink/imageshyperlink.js index 5cbbc8db..1fff8361 100644 --- a/blocks/imageshyperlink/imageshyperlink.js +++ b/blocks/imageshyperlink/imageshyperlink.js @@ -5,6 +5,9 @@ export default async function decorate(block) { const anchorEl = document.createElement('a'); const refAnchorEl = block.querySelector('a'); + if(refAnchorEl.parentElement.tagName === 'STRONG') { + anchorEl.setAttribute('target', 'blank'); + } const pic = block.querySelector('picture'); if (refAnchorEl) { if (refAnchorEl.hasAttribute('href')) { diff --git a/blocks/rte/rte.js b/blocks/rte/rte.js index 979503b0..4612ed0d 100644 --- a/blocks/rte/rte.js +++ b/blocks/rte/rte.js @@ -8,6 +8,9 @@ export default function decorate(block) { if (nextNextSibling) { const link = nextNextSibling.querySelector('a'); if (link.href === link.innerText.trim()) { + if (link.parentElement.tagName === 'STRONG') { + link.setAttribute('target', '_blank'); + } link.innerHTML = ''; link.appendChild(image.cloneNode(true)); if (image.parentElement.tagName === 'P') { diff --git a/blocks/sidebar-rte/sidebar-rte.js b/blocks/sidebar-rte/sidebar-rte.js index 979503b0..4612ed0d 100644 --- a/blocks/sidebar-rte/sidebar-rte.js +++ b/blocks/sidebar-rte/sidebar-rte.js @@ -8,6 +8,9 @@ export default function decorate(block) { if (nextNextSibling) { const link = nextNextSibling.querySelector('a'); if (link.href === link.innerText.trim()) { + if (link.parentElement.tagName === 'STRONG') { + link.setAttribute('target', '_blank'); + } link.innerHTML = ''; link.appendChild(image.cloneNode(true)); if (image.parentElement.tagName === 'P') { diff --git a/scripts/aem.js b/scripts/aem.js index 5b133c6a..09232469 100644 --- a/scripts/aem.js +++ b/scripts/aem.js @@ -534,6 +534,7 @@ function decorateButtons(element) { ) { a.setAttribute('target', '_blank'); a.classList.add('style-normal'); + a.classList.add('button'); } } } diff --git a/styles/Typo.css b/styles/Typo.css index 81221461..13ada5e7 100644 --- a/styles/Typo.css +++ b/styles/Typo.css @@ -641,7 +641,7 @@ input[type="submit"] { background-color: transparent; padding: 0!important; border: none; - color: #ec8f2d; + color: var(--primary-color); text-transform: none; font-style: normal; transition: all .3s ease-in-out; @@ -649,7 +649,7 @@ input[type="submit"] { .button.secondary:hover { border: none; - color: #ec8f2d; + color: var(--primary-color); text-decoration: underline; transition: all .3s ease-in-out; } @@ -658,7 +658,7 @@ input[type="submit"] { background-color: transparent; padding: 0; border: none; - color: #ec8f2d; + color: var(--primary-color); text-transform: none; font-style: normal; transition: all .3s ease-in-out; @@ -666,7 +666,7 @@ input[type="submit"] { .button.primary:hover { border: none; - color: #ec8f2d; + color: var(--primary-color); text-decoration: underline; transition: all .3s ease-in-out; } diff --git a/styles/template.css b/styles/template.css index 664717df..da618e4c 100644 --- a/styles/template.css +++ b/styles/template.css @@ -659,27 +659,31 @@ body.sidebar-50 #sidebar { } #footer-orange .hs-menu-wrapper { - float: left; - padding: 0; - width: 80% + /* float: left; */ + /* padding: 0; */ + /* width: 80% */ } #footer-orange .hs-menu-wrapper ul { + display: flex; padding: 0 } + #footer-orange li { padding: 0 } #footer-orange li.hs-menu-depth-1 { float: left; - margin-left: 1%; - width: 25% + margin-right: 1%; + margin-bottom: 20px; + width: 100%; } -#footer-orange li.hs-menu-depth-1.menu-num-3,#footer-orange li.hs-menu-depth-1:nth-child(3) { - width: 21% + +#footer-orange li.hs-menu-depth-1 ul{ + flex-direction: column; } #footer-orange li.hs-menu-depth-1.menu-num-2,#footer-orange li.hs-menu-depth-1:nth-child(2) { @@ -689,9 +693,10 @@ body.sidebar-50 #sidebar { #footer-orange li.hs-menu-depth-1>a { display: block; font-family: Brown-Ald,Helvetica,Arial,sans-serif; - font-size: 22px; + font-size: 18px; font-weight: 700; - line-height: 1.2 + line-height: 1.2; + min-height: 44px; } #footer-orange li.hs-menu-depth-2>a { @@ -1215,12 +1220,12 @@ h2 span.hs_cos_wrapper_widget { } .table_order button { - font-size: 12px; - padding: .8em .9em + font-size: 12px!important; + padding: .8em .9em!important; } .table_order .button { - font-size: 12px; + font-size: 12px!important; margin: 1px 0; padding: .4em .8em } From cc8c83379f5e75a078afde4d8d574c0293ad3da1 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Tue, 12 Dec 2023 19:23:42 +0530 Subject: [PATCH 2/2] Updated the lint issues --- blocks/footer/footer.css | 9 +++------ blocks/footer/footer.js | 2 +- blocks/imageshyperlink/imageshyperlink.js | 2 +- styles/template.css | 6 ------ 4 files changed, 5 insertions(+), 14 deletions(-) diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css index 194f0f59..698ed8c5 100644 --- a/blocks/footer/footer.css +++ b/blocks/footer/footer.css @@ -38,18 +38,15 @@ @media (max-width: 1024px){ .footer-wrapper div#footer-orange .outer { - padding-left: 0px!important; - padding-right: 0px!important; + padding-left: 0!important; + padding-right: 0!important; + grid-template-columns: 1fr; } .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; diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index fef938ec..d10901ca 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -73,7 +73,7 @@ export default async function decorate(block) { link.setAttribute('target', '_blank'); link.classList.add('text-normal'); } - }) + }); decorateIcons(footerWapper); block.append(topContainer); } diff --git a/blocks/imageshyperlink/imageshyperlink.js b/blocks/imageshyperlink/imageshyperlink.js index 1fff8361..48548272 100644 --- a/blocks/imageshyperlink/imageshyperlink.js +++ b/blocks/imageshyperlink/imageshyperlink.js @@ -5,7 +5,7 @@ export default async function decorate(block) { const anchorEl = document.createElement('a'); const refAnchorEl = block.querySelector('a'); - if(refAnchorEl.parentElement.tagName === 'STRONG') { + if (refAnchorEl.parentElement.tagName === 'STRONG') { anchorEl.setAttribute('target', 'blank'); } const pic = block.querySelector('picture'); diff --git a/styles/template.css b/styles/template.css index da618e4c..ecf061a6 100644 --- a/styles/template.css +++ b/styles/template.css @@ -658,12 +658,6 @@ body.sidebar-50 #sidebar { width: 100% } -#footer-orange .hs-menu-wrapper { - /* float: left; */ - /* padding: 0; */ - /* width: 80% */ -} - #footer-orange .hs-menu-wrapper ul { display: flex; padding: 0