From 2162427757f1ea7e0980367b8c73cbd66a7d86cf Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Mon, 27 May 2024 14:49:46 +0530 Subject: [PATCH 1/9] Floating agent bottom --- blocks/floatingagent/floatingagent.css | 81 ++++++++++++++++++++++++++ blocks/floatingagent/floatingagent.js | 66 +++++++++++++++++++++ 2 files changed, 147 insertions(+) create mode 100644 blocks/floatingagent/floatingagent.css create mode 100644 blocks/floatingagent/floatingagent.js diff --git a/blocks/floatingagent/floatingagent.css b/blocks/floatingagent/floatingagent.css new file mode 100644 index 00000000..83c2e820 --- /dev/null +++ b/blocks/floatingagent/floatingagent.css @@ -0,0 +1,81 @@ +.floatingagent.block { + display: none; + align-items: center; + justify-content: space-between; + position: fixed; + bottom: 0; + left: 0; + width: 100%; + height: 100px; + background-color: white; + padding: 10px; + border-top: 1px solid #ccc; + z-index: 999; +} + +.floatingagent.block > .floating-agent-col { + margin-left: 100px; + display: flex; + margin-right: 10px; + flex: none; +} + +.floatingagent.block > .agentinfo > p { + margin-block-end: 0; + font-family: Manrope, serif; + font-size: 12px; + font-style: normal; + font-weight: 400; + letter-spacing: normal; + color: #2a2223; +} + +.floatingagent.block > .agentinfo > h2 { + font-size: 18px; + line-height: 130%; + letter-spacing: .18px; + vertical-align: top; + color: #2a2223; + width: max-content; +} + +.floatingagent.block > .floating-agent-col > picture { + height:40px; + width:30px; + margin-right: 40px; +} + +.floatingagent > .floating-agent-col > picture > img{ + display: inline; +} + +.floatingagent.block > .agentinfo { + flex-grow: 1; + margin-top: 10px; +} + +.floatingagent.block > .contactagent { + align-self: center; + background: #670038; + color: #f5f1f2; + border: 0; + flex: none; + padding: 10px; + margin-right: 5%; +} + +@media (max-width: 600px) { + .floatingagent.block { + justify-content: flex-start; + } + + .floatingagent > .floating-agent-col > picture > img, + .floatingagent > .agentinfo { + display: none; + } + + .floatingagent > .contactagent { + display: block; + margin-left: 10px; + } +} \ No newline at end of file diff --git a/blocks/floatingagent/floatingagent.js b/blocks/floatingagent/floatingagent.js new file mode 100644 index 00000000..17b4cd73 --- /dev/null +++ b/blocks/floatingagent/floatingagent.js @@ -0,0 +1,66 @@ +import { + getMetadata, +} from '../../scripts/aem.js'; +import { + button, + div, + h2, + img, + p, + strong, +} from '../../scripts/dom-helpers.js'; + +export default function decorate(block) { + const agentPicture = document.createElement('picture'); + agentPicture.appendChild(img({ + loading: 'lazy', + alt: 'Agent Image', + src: '', + width: '48', + height: '64', + style: 'width: 48px; height: 64px;', + })); + + const agentInfo = div({ class: 'agentinfo' }, + h2(strong('')), // Placeholder, will be updated with metadata + p(''), // Placeholder, will be updated with metadata + p(''), // Placeholder, will be updated with metadata + ); + + const contactButton = button({ class: 'contactagent' }, 'CONTACT AGENT'); + + // Append elements directly to the block + block.append( + div({ class: 'floating-agent-col' }, agentPicture), + agentInfo, + contactButton, + ); + + // Fetch metadata + const agentName = getMetadata('name'); + const agentDesc = getMetadata('desc'); + const pic = getMetadata('pic'); + const lic = getMetadata('lic'); + + // Populate the elements with metadata values + const agentImageElement = agentPicture.querySelector('img'); + const agentInfoElements = agentInfo.children; + + agentImageElement.src = pic; + agentInfoElements[0].innerHTML = `${agentName}`; + agentInfoElements[1].textContent = agentDesc; + agentInfoElements[2].textContent = lic; +} + +const displayedElement = document.querySelector('.floatingagent'); + +window.addEventListener('scroll', () => { + const heroElement = document.querySelector('.hero-wrapper'); + const heroRect = heroElement.getBoundingClientRect(); + + if (heroRect.bottom < 0) { + displayedElement.style.display = 'flex'; + } else { + displayedElement.style.display = 'none'; + } +}); From d50dfb4739c1f586af51f6fe856455acf9fbd664 Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Mon, 27 May 2024 14:53:25 +0530 Subject: [PATCH 2/9] Floating agent bottom --- blocks/floatingagent/floatingagent.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/blocks/floatingagent/floatingagent.css b/blocks/floatingagent/floatingagent.css index 83c2e820..c267848f 100644 --- a/blocks/floatingagent/floatingagent.css +++ b/blocks/floatingagent/floatingagent.css @@ -45,7 +45,7 @@ margin-right: 40px; } -.floatingagent > .floating-agent-col > picture > img{ +.floatingagent.block > .floating-agent-col > picture > img{ display: inline; } @@ -69,12 +69,12 @@ justify-content: flex-start; } - .floatingagent > .floating-agent-col > picture > img, - .floatingagent > .agentinfo { + .floatingagent.block > .floating-agent-col > picture > img, + .floatingagent.block > .agentinfo { display: none; } - .floatingagent > .contactagent { + .floatingagent.block > .contactagent { display: block; margin-left: 10px; } From 0288ab3ab5b7805ed6a1c702bb1f99b8d06e427f Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Mon, 27 May 2024 15:11:18 +0530 Subject: [PATCH 3/9] Floating agent bottom --- blocks/floatingagent/floatingagent.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/blocks/floatingagent/floatingagent.css b/blocks/floatingagent/floatingagent.css index c267848f..b55eeb85 100644 --- a/blocks/floatingagent/floatingagent.css +++ b/blocks/floatingagent/floatingagent.css @@ -7,7 +7,7 @@ left: 0; width: 100%; height: 100px; - background-color: white; + background-color: var(--white); padding: 10px; border-top: 1px solid #ccc; z-index: 999; @@ -22,16 +22,16 @@ .floatingagent.block > .agentinfo > p { margin-block-end: 0; - font-family: Manrope, serif; - font-size: 12px; + font-family: var(--font-family-primary); + font-size: var(--body-font-size-xxs); font-style: normal; - font-weight: 400; + font-weight: var(--font-weight-normal); letter-spacing: normal; color: #2a2223; } .floatingagent.block > .agentinfo > h2 { - font-size: 18px; + font-size: var(--heading-font-size-m); line-height: 130%; letter-spacing: .18px; vertical-align: top; @@ -56,8 +56,8 @@ .floatingagent.block > .contactagent { align-self: center; - background: #670038; - color: #f5f1f2; + background: var(--primary-color); + color: var(--tertiary-color); border: 0; flex: none; padding: 10px; From a35e45450d4c42dbddfb32d915c184b8235fe2c8 Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Wed, 29 May 2024 11:55:51 +0530 Subject: [PATCH 4/9] use intersectionObserver --- blocks/floatingagent/floatingagent.js | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/blocks/floatingagent/floatingagent.js b/blocks/floatingagent/floatingagent.js index 17b4cd73..66380e5a 100644 --- a/blocks/floatingagent/floatingagent.js +++ b/blocks/floatingagent/floatingagent.js @@ -54,13 +54,18 @@ export default function decorate(block) { const displayedElement = document.querySelector('.floatingagent'); -window.addEventListener('scroll', () => { - const heroElement = document.querySelector('.hero-wrapper'); - const heroRect = heroElement.getBoundingClientRect(); +const heroElement = document.querySelector('.hero-wrapper'); - if (heroRect.bottom < 0) { - displayedElement.style.display = 'flex'; - } else { - displayedElement.style.display = 'none'; - } +const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + displayedElement.style.display = 'none'; + } else { + displayedElement.style.display = 'flex'; + } + }); +}, { + threshold: [0], }); + +observer.observe(heroElement); From 39647a2484265d56c1cf6e70a3e4c66df63cae36 Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Mon, 3 Jun 2024 13:42:13 +0530 Subject: [PATCH 5/9] Floating agent --- blocks/floatingagent/floatingagent.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/blocks/floatingagent/floatingagent.js b/blocks/floatingagent/floatingagent.js index 66380e5a..c593a81a 100644 --- a/blocks/floatingagent/floatingagent.js +++ b/blocks/floatingagent/floatingagent.js @@ -11,6 +11,11 @@ import { } from '../../scripts/dom-helpers.js'; export default function decorate(block) { + const agentName = getMetadata('name'); + const agentDesc = getMetadata('desc'); + const pic = getMetadata('pic'); + const lic = getMetadata('lic'); + const agentPicture = document.createElement('picture'); agentPicture.appendChild(img({ loading: 'lazy', @@ -22,27 +27,19 @@ export default function decorate(block) { })); const agentInfo = div({ class: 'agentinfo' }, - h2(strong('')), // Placeholder, will be updated with metadata - p(''), // Placeholder, will be updated with metadata - p(''), // Placeholder, will be updated with metadata + h2(strong('')), + p(''), + p(''), ); const contactButton = button({ class: 'contactagent' }, 'CONTACT AGENT'); - // Append elements directly to the block block.append( div({ class: 'floating-agent-col' }, agentPicture), agentInfo, contactButton, ); - // Fetch metadata - const agentName = getMetadata('name'); - const agentDesc = getMetadata('desc'); - const pic = getMetadata('pic'); - const lic = getMetadata('lic'); - - // Populate the elements with metadata values const agentImageElement = agentPicture.querySelector('img'); const agentInfoElements = agentInfo.children; From 8e64dff1cf393c4bd71429552dd2c8b97045b74c Mon Sep 17 00:00:00 2001 From: RitwikSrivastava <45959816+RitwikSrivastava@users.noreply.github.com> Date: Tue, 4 Jun 2024 19:45:44 +0530 Subject: [PATCH 6/9] Update blocks/floatingagent/floatingagent.js Co-authored-by: Bryan Stopp --- blocks/floatingagent/floatingagent.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/blocks/floatingagent/floatingagent.js b/blocks/floatingagent/floatingagent.js index c593a81a..5b6cb279 100644 --- a/blocks/floatingagent/floatingagent.js +++ b/blocks/floatingagent/floatingagent.js @@ -20,16 +20,16 @@ export default function decorate(block) { agentPicture.appendChild(img({ loading: 'lazy', alt: 'Agent Image', - src: '', + src: pic, width: '48', height: '64', style: 'width: 48px; height: 64px;', })); const agentInfo = div({ class: 'agentinfo' }, - h2(strong('')), - p(''), - p(''), + h2(strong(agentName)), + p(agentDesc), + p(lic), ); const contactButton = button({ class: 'contactagent' }, 'CONTACT AGENT'); @@ -39,14 +39,6 @@ export default function decorate(block) { agentInfo, contactButton, ); - - const agentImageElement = agentPicture.querySelector('img'); - const agentInfoElements = agentInfo.children; - - agentImageElement.src = pic; - agentInfoElements[0].innerHTML = `${agentName}`; - agentInfoElements[1].textContent = agentDesc; - agentInfoElements[2].textContent = lic; } const displayedElement = document.querySelector('.floatingagent'); From 8fcc666d86b5d95822cd305bf1a559f39e6a762e Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Tue, 4 Jun 2024 19:49:10 +0530 Subject: [PATCH 7/9] Floating agent --- blocks/floatingagent/floatingagent.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/blocks/floatingagent/floatingagent.js b/blocks/floatingagent/floatingagent.js index 5b6cb279..766d94ff 100644 --- a/blocks/floatingagent/floatingagent.js +++ b/blocks/floatingagent/floatingagent.js @@ -39,6 +39,23 @@ export default function decorate(block) { agentInfo, contactButton, ); + const displayedElement = document.querySelector('.floatingagent'); + + const heroElement = document.querySelector('.hero-wrapper'); + + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + displayedElement.style.display = 'none'; + } else { + displayedElement.style.display = 'flex'; + } + }); + }, { + threshold: [0], + }); + + observer.observe(heroElement); } const displayedElement = document.querySelector('.floatingagent'); From 94ba880ba84ae008c2544ebb4381f6bf323df330 Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Tue, 4 Jun 2024 19:51:50 +0530 Subject: [PATCH 8/9] Floating agent --- blocks/floatingagent/floatingagent.js | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/blocks/floatingagent/floatingagent.js b/blocks/floatingagent/floatingagent.js index 766d94ff..ef0d685c 100644 --- a/blocks/floatingagent/floatingagent.js +++ b/blocks/floatingagent/floatingagent.js @@ -57,21 +57,3 @@ export default function decorate(block) { observer.observe(heroElement); } - -const displayedElement = document.querySelector('.floatingagent'); - -const heroElement = document.querySelector('.hero-wrapper'); - -const observer = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - displayedElement.style.display = 'none'; - } else { - displayedElement.style.display = 'flex'; - } - }); -}, { - threshold: [0], -}); - -observer.observe(heroElement); From dba5aa8ec7af3b8005732c96f6d5dfb72f537ca1 Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Wed, 5 Jun 2024 10:55:34 +0530 Subject: [PATCH 9/9] Fix Css mobile first approach --- blocks/floatingagent/floatingagent.css | 97 ++++++++++++++------------ 1 file changed, 52 insertions(+), 45 deletions(-) diff --git a/blocks/floatingagent/floatingagent.css b/blocks/floatingagent/floatingagent.css index b55eeb85..688323d9 100644 --- a/blocks/floatingagent/floatingagent.css +++ b/blocks/floatingagent/floatingagent.css @@ -1,7 +1,7 @@ .floatingagent.block { - display: none; + display: flex; align-items: center; - justify-content: space-between; + justify-content: flex-start; position: fixed; bottom: 0; left: 0; @@ -14,68 +14,75 @@ } .floatingagent.block > .floating-agent-col { - margin-left: 100px; - display: flex; - margin-right: 10px; - flex: none; -} - -.floatingagent.block > .agentinfo > p { - margin-block-end: 0; - font-family: var(--font-family-primary); - font-size: var(--body-font-size-xxs); - font-style: normal; - font-weight: var(--font-weight-normal); - letter-spacing: normal; - color: #2a2223; -} - -.floatingagent.block > .agentinfo > h2 { - font-size: var(--heading-font-size-m); - line-height: 130%; - letter-spacing: .18px; - vertical-align: top; - color: #2a2223; - width: max-content; -} - -.floatingagent.block > .floating-agent-col > picture { - height:40px; - width:30px; - margin-right: 40px; -} - -.floatingagent.block > .floating-agent-col > picture > img{ - display: inline; + display: none; } .floatingagent.block > .agentinfo { - flex-grow: 1; - margin-top: 10px; + display: none; } .floatingagent.block > .contactagent { + display: block; align-self: center; background: var(--primary-color); color: var(--tertiary-color); border: 0; - flex: none; padding: 10px; - margin-right: 5%; + margin-left: 35%; } -@media (max-width: 600px) { +@media (min-width: 600px) { .floatingagent.block { - justify-content: flex-start; + justify-content: space-between; + } + + .floatingagent.block > .floating-agent-col { + margin-left: 100px; + display: flex; + margin-right: 10px; + flex: none; + margin-bottom: 20px; } - .floatingagent.block > .floating-agent-col > picture > img, .floatingagent.block > .agentinfo { - display: none; + display: block; + flex-grow: 1; + margin-top: 10px; + margin-bottom: 15px; + } + + .floatingagent.block > .agentinfo > p { + margin-block-end: 0; + font-family: var(--font-family-primary); + font-size: var(--body-font-size-xxs); + font-style: normal; + font-weight: var(--font-weight-normal); + letter-spacing: normal; + color: #2a2223; + } + + .floatingagent.block > .agentinfo > h2 { + font-size: var(--heading-font-size-m); + line-height: 130%; + letter-spacing: var(--letter-spacing-xxxs); + vertical-align: top; + color: #2a2223; + width: max-content; + } + + .floatingagent.block > .floating-agent-col > picture { + height: 40px; + width: 30px; + margin-right: 40px; + } + + .floatingagent.block > .floating-agent-col > picture > img { + display: inline; } .floatingagent.block > .contactagent { - display: block; + flex: none; + margin-right: 5%; margin-left: 10px; } -} \ No newline at end of file +}