From 3f08cb9cb1434545853e5de380e9c5d9502c91fd Mon Sep 17 00:00:00 2001 From: Piyush Jindal Date: Tue, 13 Aug 2024 19:48:27 +0530 Subject: [PATCH] Agent Communities Changes (#266) * Agent Communities Changes * path changed --------- Co-authored-by: piyushjindal --- .../agent-communities/agent-communities.css | 22 ++++++++++-- blocks/agent-communities/agent-communities.js | 26 ++++++++------ blocks/agent-communities/design-1.css | 34 +++++++++++++++++++ 3 files changed, 69 insertions(+), 13 deletions(-) create mode 100644 blocks/agent-communities/design-1.css diff --git a/blocks/agent-communities/agent-communities.css b/blocks/agent-communities/agent-communities.css index 96612826..d48ad79a 100644 --- a/blocks/agent-communities/agent-communities.css +++ b/blocks/agent-communities/agent-communities.css @@ -1,5 +1,7 @@ +@import url('./design-1.css'); + .agent-communities.block { - height: 1000px; + min-height: 1000px; } .agent-communities.block .cards-list { @@ -36,6 +38,16 @@ background: linear-gradient(transparent, transparent, rgba(0 0 0 / 50%)); } +.agent-communities.block .cards-list .cards-item-body h4:hover { + background: unset; +} + +.agent-communities.block .cards-list .cards-item-body h4::before { + font-size: var(--heading-font-size-m); + font-weight: var(--font-weight-bold); + content: 'Explore '; +} + .agent-communities.block .cards-list .cards-item:first-of-type h4 { color: var(--primary-color); background: unset; @@ -52,7 +64,6 @@ width: 100%; height: fit-content; object-fit: cover; - filter: brightness(0.8); margin-bottom: 10px; background-position: center 70%; background-size: cover; @@ -67,12 +78,19 @@ padding: .5rem .75rem; text-decoration: none; font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-bold); +} + +.agent-communities.block .hero-item-explore:hover { + color: var(--primary-light); + background-color: var(--primary-color); } .agent-communities.block .hero-item-heading { text-transform: uppercase; font-size: var(--body-font-size-s); letter-spacing: 3.2px; + font-weight: var(--font-weight-bold); } .agent-communities.block .hero-item-bio { diff --git a/blocks/agent-communities/agent-communities.js b/blocks/agent-communities/agent-communities.js index c98b11ca..328da9f4 100644 --- a/blocks/agent-communities/agent-communities.js +++ b/blocks/agent-communities/agent-communities.js @@ -11,8 +11,7 @@ export default async function decorate(block) { block.appendChild(getLoader('agent-communities')); window.setTimeout(async () => { - // const url = `/commonwealth-real-estate-ma312${window.location.pathname}`; - const url = '/commonwealth-real-estate-ma312/east-greenwich/barry-alofsin/cid-473521'; + const url = `/commonwealth-real-estate-ma312${window.location.pathname}`; const bhhsCode = 'bhhs-ma312'; const finalUrl = new URL('https://api.liveby.com/v1/pages'); @@ -54,17 +53,20 @@ export default async function decorate(block) { if (data2.length) { modifiedData.push(...data2.map((item) => { - const regex = /\/communities\/\w+$/; + const regex = /\/communities/; const match = item.url.match(regex); const link = match ? match[0] : ''; - return { - name: item.name.toUpperCase(), - exploreName: `explore ${item.name}`, - link, - banner: item.banner_16x9, - }; - })); + if (link) { + return { + name: item.name.toUpperCase(), + exploreName: `${item.name}`, + link, + banner: item.banner_16x9, + }; + } + return null; + }).filter((item) => item !== undefined && item !== null)); } const cardsList = div({ class: 'cards-list' }); @@ -96,7 +98,9 @@ export default async function decorate(block) { cardBody.appendChild(paragraphElement); }); - block.appendChild(cardsList); + if (cardsList.hasChildNodes()) { + block.appendChild(cardsList); + } } catch (error) { // eslint-disable-next-line no-console console.error('Error fetching data', error); diff --git a/blocks/agent-communities/design-1.css b/blocks/agent-communities/design-1.css new file mode 100644 index 00000000..308df5f0 --- /dev/null +++ b/blocks/agent-communities/design-1.css @@ -0,0 +1,34 @@ +.design-1 .agent-communities.block .cards-list .cards-item-body h4 { + font-family: var(--font-family-secondary); + font-size: 2rem; + text-transform: none; + padding-top: 3rem; +} + +.design-1 .agent-communities.block .cards-list .cards-item-body h4::before { + font-size: 1rem; + line-height: var(--line-height-m); + letter-spacing: var(--letter-spacing-l); + display: block; + text-align: center; + margin-bottom: 0.5rem; +} + +/* +Theme: Black & White +*/ +.design-1.black-white .agent-communities.block .hero-item-explore { + color: var(--black); + border: solid 1px var(--black); +} + +.design-1.black-white .agent-communities.block .hero-item-explore:hover { + color: var(--white); + background-color: var(--black); +} + +.design-1.black-white .agent-communities.block .cards-list .cards-item:first-of-type h4 { + color: var(--black); + padding-left: 0.5rem; + padding-right: 0.5rem; +}