diff --git a/blocks/agent-address/agent-address.css b/blocks/agent-address/agent-address.css deleted file mode 100644 index bc074896..00000000 --- a/blocks/agent-address/agent-address.css +++ /dev/null @@ -1,35 +0,0 @@ -.agent-address.block { - padding: 2rem; - background-color: var(--tertiary-color); -} - -.agent-address.block .address { - margin-bottom: 2rem; -} - -.agent-address.block .address>p { - margin-bottom: 0; - font-size: var(--body-font-size-xs); -} - -.agent-address.block a { - border: 1px solid var(--primary-color); - color: var(--primary-color); - font-weight: var(--font-weight-bold); - letter-spacing: var(--letter-spacing-m); - text-transform: uppercase; - padding: 0.5rem 1rem; - text-decoration: none; - font-size: var(--body-font-size-s); -} - -.agent-address.block a:hover { - color: var(--primary-light); - background-color: var(--primary-color); -} - -@media (min-width: 600px) { - .agent-address.block { - display: none; - } -} diff --git a/blocks/agent-address/agent-address.js b/blocks/agent-address/agent-address.js deleted file mode 100644 index 4cd12dee..00000000 --- a/blocks/agent-address/agent-address.js +++ /dev/null @@ -1,22 +0,0 @@ -import { getMetadata } from '../../scripts/aem.js'; -import { - a, div, p, -} from '../../scripts/dom-helpers.js'; - -export default function decorate(block) { - const streetAddress = getMetadata('street-address'); - const city = getMetadata('city'); - const state = getMetadata('state'); - const zip = getMetadata('zip'); - - const textDiv = div({ class: 'address' }, - p('Berkshire Hathaway HomeServices'), - p('Commonwealth Real Estate'), - p(streetAddress), - p(`${city}, ${state} ${zip}`), - ); - const text = `${streetAddress}, ${city}, ${state} ${zip}`; - - const anchor = a({ href: `https://maps.google.com/maps?q=${text}`, target: '_blank' }, 'Directions'); - block.replaceChildren(textDiv, anchor); -} diff --git a/blocks/agent-profile/agent-profile.css b/blocks/agent-profile/agent-profile.css index e869b805..cb046b61 100644 --- a/blocks/agent-profile/agent-profile.css +++ b/blocks/agent-profile/agent-profile.css @@ -1,22 +1,13 @@ -@import url('design-4.css'); +@import url('./design-1.css'); +@import url('./design-4.css'); .agent-profile.block { - display: flex; padding: 0 1rem; + gap: 3rem; } -main .section.agent-profile-container .agent-profile-wrapper { - word-break: break-word; -} - -.agent-profile.block .profile-image img { - width: 9.375rem; - height: 11.875rem; -} - -.agent-profile.block .profile-content .contact-me { - margin-top: 1.5rem; - display: none; +.agent-profile.block .profile-details { + display: flex; } .agent-profile.block .profile-content { @@ -24,31 +15,71 @@ main .section.agent-profile-container .agent-profile-wrapper { font-size: var(--body-font-size-s); } -.agent-profile.block .profile-content .name { +.agent-profile.block .profile-content > div { + margin-bottom: 0.5rem; +} + +.agent-profile.block .profile-content h1 { font-size: var(--body-font-size-xl); line-height: var(--line-height-m); - margin-bottom: 0.5rem; + font-weight: var(--font-weight-bold); } .agent-profile.block .profile-content .designation, .agent-profile.block .profile-content .license-number { font-size: var(--body-font-size-xs); text-transform: uppercase; - margin-bottom: 0.25rem; +} + +main .section.agent-profile-container .agent-profile-wrapper { + word-break: break-word; +} + +.agent-profile.block .profile-image img { + width: 9.375rem; + aspect-ratio: 1 / 1.5; + object-fit: cover; +} + +.agent-profile.block .profile-content .contact-me { + display: none; +} + +.agent-profile.block .lang-prof-accred ul { + margin-top: 1rem; } .agent-profile.block .profile-content .social ul { display: flex; - margin-top: 1rem; - opacity: .5; +} + +.agent-profile.block .lang-prof-accred li { + list-style: outside; + margin-left: 1rem; +} + +.agent-profile.block .profile-content .phone li { + margin-bottom: 0.5rem; } .agent-profile.block .profile-content .social li { margin-right: 0.5rem; } +.agent-profile.block .address a { + border: 1px solid var(--primary-color); + color: var(--primary-color); + font-weight: var(--font-weight-bold); + letter-spacing: var(--letter-spacing-m); + text-transform: uppercase; + padding: 0.5rem 1rem; + text-decoration: none; + font-size: var(--body-font-size-xs); +} + .agent-profile.block .profile-content .email a, .agent-profile.block .profile-content .website a { + line-height: var(--line-height-xs); font-size: var(--body-font-size-xs); color: var(--black); text-transform: lowercase; @@ -65,27 +96,106 @@ main .section.agent-profile-container .agent-profile-wrapper { text-decoration: none; } -.agent-profile.block .profile-content .contact-me a:hover { +.agent-profile.block .address a:hover { color: var(--primary-light); background-color: var(--primary-color); } -.agent-profile.block .profile-content .website, -.agent-profile.block .profile-content .email { - margin-bottom: 0.25rem; +.agent-profile.block .profile-content .contact-me a:hover { + color: var(--primary-light); + background-color: var(--primary-color); } .agent-profile.block .profile-content .phone { font-size: var(--body-font-size-xs); } -.agent-profile.block .profile-content .phone li { - margin-bottom: 0.25rem; +.agent-profile.block .address { + padding: 2rem; + background-color: var(--tertiary-color); + margin-top: 1.5rem; +} + +.agent-profile.block .address>p { + margin-bottom: 0; + font-size: var(--body-font-size-xs); +} + +.agent-profile.block .address>p:last-of-type { + margin-bottom: 2rem; +} + +.agent-profile.block .about-non-truncate.hide, +.agent-profile.block .languages-non-truncate.hide, +.agent-profile.block .professional-accreditations-non-truncate.hide, +.agent-profile.block .about-truncate.hide, +.agent-profile.block .languages-truncate.hide, +.agent-profile.block .professional-accreditations-truncate.hide { + display: none; +} + +.agent-profile.block .about { + margin: 1rem 0 2rem; + font-size: var(--body-font-size-s); + line-height: var(--line-height-xs); +} + +.agent-profile.block .lang-prof-accred .languages, +.agent-profile.block .lang-prof-accred .professional-accreditations { + margin-bottom: 2rem; + font-size: var(--body-font-size-s); + line-height: var(--line-height-xs); +} + + +.agent-profile.block .about::before { + content: 'About'; + font-weight: var(--font-weight-bold); +} + +.agent-profile.block .lang-prof-accred .languages::before { + content: 'Languages'; + font-weight: var(--font-weight-bold); +} + +.agent-profile.block .lang-prof-accred .professional-accreditations::before { + content: 'Professional Accreditations'; + font-weight: var(--font-weight-bold); +} + +.agent-profile.block .about>div { + margin-top: 0.75rem; +} + +.agent-profile.block a.view-more::after, +.agent-profile.block a.view-less::after { + display: inline-block; + margin-top: 0.5rem; + text-decoration: underline; + font-size: var(--body-font-size-s); + color: var(--black); +} + +.agent-profile.block a.view-more::after { + content: "View More"; +} + +.agent-profile.block a.view-less::after { + content: "View Less"; } @media (min-width: 600px) { + .agent-profile.block .about { + margin-top: 0; + } + .agent-profile.block .profile-content .contact-me { display: block; + margin: 1.5rem 0; + } + + .agent-profile.block .address { + display: none; } } @@ -94,41 +204,26 @@ main .section.agent-profile-container .agent-profile-wrapper { position: relative; } - main .section.agent-profile-container .agent-profile-wrapper { + .agent-profile.block .profile-details { position: absolute; display: flex; left: auto; width: 34rem; right: 0; - bottom: 4.625rem; + top: -29rem; padding: 1.875rem 1.875rem 0; z-index: 1; background-color: var(--white); } .agent-profile.block { - position: relative; + display: flex; line-height: var(--line-height-s); } .agent-profile.block .profile-image img { width: 13.125rem; - height: 15.625rem; - } - - .agent-profile.block .profile-content .phone { - font-size: var(--body-font-size-s); - margin-top: 2px; - line-height: var(--line-height-m); - } - - .agent-profile.block .profile-content .email a, - .agent-profile.block .profile-content .website a { - font-size: var(--body-font-size-xs); - } - - .agent-profile.block .profile-content { - padding-left: 1.875rem; + height: 22rem; } .agent-profile.block .profile-content .designation, @@ -139,4 +234,14 @@ main .section.agent-profile-container .agent-profile-wrapper { .agent-profile.block .profile-content .phone li { margin-bottom: unset; } + + .agent-profile.block .lang-prof-accred { + gap: 3rem; + display: flex; + flex-basis: 40%; + } + + .agent-profile.block .about { + flex-basis: 60%; + } } diff --git a/blocks/agent-profile/agent-profile.js b/blocks/agent-profile/agent-profile.js index 191b685f..d01ee2b4 100644 --- a/blocks/agent-profile/agent-profile.js +++ b/blocks/agent-profile/agent-profile.js @@ -1,6 +1,6 @@ import { decorateIcons, getMetadata } from '../../scripts/aem.js'; import { - a, div, h1, ul, li, img, span, + a, div, h1, ul, li, img, span, p, } from '../../scripts/dom-helpers.js'; const getPhoneDiv = () => { @@ -79,7 +79,26 @@ const getSocialDiv = () => { return null; }; -export default async function decorate(block) { +const decorateAddress = (block) => { + const streetAddress = getMetadata('street-address'); + const city = getMetadata('city'); + const state = getMetadata('state'); + const zip = getMetadata('zip'); + const text = `${streetAddress}, ${city}, ${state} ${zip}`; + + const addressDiv = div({ class: 'address' }, + p('Berkshire Hathaway HomeServices'), + p('Commonwealth Real Estate'), + p(streetAddress), + p(`${city}, ${state} ${zip}`), + a({ href: `https://maps.google.com/maps?q=${text}`, target: '_blank' }, 'Directions'), + ); + + block.append(addressDiv); +}; + +const decorateProfileDetails = (block) => { + const profileDetails = div({ class: 'profile-details' }); const profileImage = getImageDiv(); const profileContent = div({ class: 'profile-content' }, div({ class: 'name' }, h1(getMetadata('name'))), @@ -114,6 +133,73 @@ export default async function decorate(block) { if (socialDiv) { profileContent.append(socialDiv); } + decorateIcons(profileContent); - block.replaceChildren(profileImage, profileContent); + profileDetails.append(profileImage, profileContent); + block.replaceChildren(profileDetails); +}; + +const viewMoreOnClick = (name, anchor, block) => { + anchor.addEventListener('click', (event) => { + event.preventDefault(); + if (anchor.classList.contains('view-more')) { + anchor.classList.remove('view-more'); + anchor.classList.add('view-less'); + block.querySelector(`.${name}-non-truncate`).classList.remove('hide'); + block.querySelector(`.${name}-truncate`).classList.add('hide'); + } else { + anchor.classList.remove('view-less'); + anchor.classList.add('view-more'); + block.querySelector(`.${name}-non-truncate`).classList.add('hide'); + block.querySelector(`.${name}-truncate`).classList.remove('hide'); + } + }); +}; + +const decorateAbout = (block) => { + const text = 'about'; + const aboutText = getMetadata(text); + const aboutDiv = div({ class: text }); + const threshold = 245; + aboutDiv.append(div({ class: `${text}-truncate` }, aboutText.substring(0, threshold))); + aboutDiv.append(div({ class: `${text}-non-truncate hide` }, aboutText)); + aboutDiv.append(a({ href: '#', class: 'view-more' })); + viewMoreOnClick(text, aboutDiv.querySelector('a'), block); + block.append(aboutDiv); +}; + +const createLangoOrProfAccred = (key, langProfAccredDiv) => { + const threshold = 3; + const truncateDiv = ul({ class: `${key}-truncate` }); + const nontruncateDiv = ul({ class: `${key}-non-truncate hide` }); + + getMetadata(key).split(',').filter((x) => x).forEach((x, index) => { + if (index < threshold) { + truncateDiv.append(li(x.trim())); + } + nontruncateDiv.append(li(x.trim())); + }); + + const anchor = a({ href: '#', class: 'view-more' }); + langProfAccredDiv.append(div({ class: key }, + truncateDiv, + nontruncateDiv, + anchor, + )); + + viewMoreOnClick(key, anchor, langProfAccredDiv); +}; + +const decorateLangProfAccred = (block) => { + const langProfAccredDiv = div({ class: 'lang-prof-accred' }); + createLangoOrProfAccred('languages', langProfAccredDiv); + createLangoOrProfAccred('professional-accreditations', langProfAccredDiv); + block.append(langProfAccredDiv); +}; + +export default async function decorate(block) { + decorateProfileDetails(block); + decorateAbout(block); + decorateLangProfAccred(block); + decorateAddress(block); } diff --git a/blocks/agent-profile/design-1.css b/blocks/agent-profile/design-1.css new file mode 100644 index 00000000..98069465 --- /dev/null +++ b/blocks/agent-profile/design-1.css @@ -0,0 +1,190 @@ +.design-1 .agent-profile.block { + display: flex; + flex-direction: column; + gap: 2rem; +} + +.design-1 .agent-profile.block .profile-details { + position: relative; + top: unset; + flex-direction: column; + display: flex; + margin-top: 2rem; +} + +.design-1 .agent-profile.block .profile-content { + font-size: var(--body-font-size-l); + font-weight: var(--font-weight-bold); + padding-left: 0; +} + +.design-1 .agent-profile.block .profile-content div { + margin-bottom: 0.5rem; +} + +.design-1 .agent-profile.block .profile-content .name h1 { + font-family: var(--font-family-secondary); + font-size: var(--body-font-size-xxxl); + margin-bottom: 2rem; + margin-top: 1rem; +} + +.design-1.traditional .agent-profile.block .profile-content .name h1 { + color: var(--primary-color); +} + +.design-1 .agent-profile.block .about { + margin-bottom: 0; + letter-spacing: var(--letter-spacing-xs); +} + +.design-1 .agent-profile.block .lang-prof-accred { + letter-spacing: var(--letter-spacing-xs); +} + +.design-1 .agent-profile.block .profile-image img { + width: 100%; + aspect-ratio: 1/1; + max-width: calc((100% - 60px * 2)); + margin: 0 auto; + object-fit: cover; + height: fit-content; +} + +.design-1.traditional .agent-profile.block .profile-image img { + box-shadow: var(--primary-color) 3rem -3rem; +} + +.design-1 .agent-profile.block .profile-content .contact-me { + display: none; + font-size: var(--body-font-size-s); +} + +.design-1 .agent-profile.block .profile-image { + display: flex; +} + +.design-1.traditional .agent-profile.block .address { + background-color: var(--primary-color); +} + +.design-1.traditional .agent-profile.block .address p { + color: var(--white); +} + +.design-1.black-white .agent-profile.block .address a { + color: var(--white); + border: 1px solid var(--white); +} + +.design-1.traditional .agent-profile.block .address a { + color: var(--white); + border: 1px solid var(--white); +} + +.design-1.black-white .agent-profile.block .address a:hover { + background-color: var(--white); + color: var(--black); +} + +.design-1.traditional .agent-profile.block .address a:hover { + color: var(--primary-color); + background-color: var(--primary-light); +} + +.design-1.black-white .agent-profile.block .profile-image img { + box-shadow: var(--black) 4.375rem -4.375rem; +} + +.design-1.black-white .agent-profile.block .profile-content .name { + color: var(--black); +} + +.design-1.black-white .agent-profile.block .profile-content .name h1 { + color: var(--black); +} + +.design-1.black-white .agent-profile.block .profile-content .contact-me a { + color: var(--black); + border: 1px solid var(--black); +} + +.design-1.black-white .agent-profile.block .profile-content .contact-me a:hover { + background-color: var(--black); + color: var(--white); +} + +.design-1.black-white .agent-profile.block .address { + background-color: var(--black); +} + +.design-1.black-white .agent-profile.block .address p { + color: var(--white); +} + +@media (min-width: 900px) { + .design-1 .agent-profile.block { + position: relative; + } + + .design-1 .agent-profile.block .profile-details { + flex-direction: row-reverse; + } + + .design-1 .agent-profile.block .profile-content .name h1 { + font-size: 2.75rem; + margin-top: 0; + } + + .design-1 .agent-profile.block .profile-image { + flex-basis: 60%; + } + + .design-1 .agent-profile.block .profile-content { + flex-basis: 40%; + margin-top: 0; + } + + .design-1 .agent-profile.block .profile-image img { + margin-top: 70px; + position: absolute; + width: 50%; + margin-left: calc(0.025 * 100vw); + } + + .design-1.traditional .agent-profile.block .profile-image img { + box-shadow: var(--primary-color) 4.375rem -4.375rem; + } + + .design-1 .agent-profile.block .profile-content .contact-me { + margin-top: 2rem; + margin-bottom: 1rem; + display: block; + } + + .design-1 .agent-profile.block .about { + flex-basis: 0; + width: 40%; + } + + .design-1 .agent-profile.block .lang-prof-accred { + display: flex; + gap: 2rem; + } + + .design-1 .agent-profile.block .profile-content div { + font-size: var(--body-font-size-s); + } + + .design-1 .agent-profile.block .profile-content .email a, + .design-1 .agent-profile.block .profile-content .website a { + font-size: var(--body-font-size-s); + } +} + +@media (min-width: 1200px) { + .design-1 .agent-profile.block .profile-details { + padding: 0; + width: unset; + } +} diff --git a/blocks/agent-transactions/agent-transactions.css b/blocks/agent-transactions/agent-transactions.css index 0af85cc8..f0f8734c 100644 --- a/blocks/agent-transactions/agent-transactions.css +++ b/blocks/agent-transactions/agent-transactions.css @@ -1,4 +1,6 @@ -@import url('design-4.css'); +@import url('./design-1.css'); +@import url('./design-4.css'); + .agent-transactions.block table { width: 100%; @@ -116,7 +118,7 @@ } } -@media (min-width: 992px) { +@media (min-width: 900px) { .agent-transactions.block h1 { font-size: 1.875rem; } diff --git a/blocks/agent-transactions/agent-transactions.js b/blocks/agent-transactions/agent-transactions.js index d67f42ce..9ca00941 100644 --- a/blocks/agent-transactions/agent-transactions.js +++ b/blocks/agent-transactions/agent-transactions.js @@ -11,7 +11,7 @@ const getClosedTransactions = async () => { const response = await fetch(`/bin/bhhs/agentPropertyListingsServlet.${agentId}.json`); const data = await response.json(); - if (data && data?.closedTransactions?.properties?.length) { + if (data?.closedTransactions?.properties?.length) { data.closedTransactions.properties.forEach((property) => { formattedData.push({ address: property.StreetName, diff --git a/blocks/agent-transactions/design-1.css b/blocks/agent-transactions/design-1.css new file mode 100644 index 00000000..f37a148e --- /dev/null +++ b/blocks/agent-transactions/design-1.css @@ -0,0 +1,42 @@ +.design-1 .agent-transactions.block h1 { + font-family: var(--font-family-secondary); + font-size: 1.75rem; + font-weight: var(--font-weight-normal); + text-align: center; +} + +.design-1 .agent-transactions.block th { + color: var(--white); +} + +@media (min-width: 600px) { + .design-1 .agent-transactions.block h1 { + font-size: 2.25rem; + } +} + +@media (min-width: 1200px) { + .design-1 .agent-transactions.block h1 { + font-size: 2.75rem; + } +} + +/* +---------------------------------------- +* Theme Name: Traditional +*/ +.design-1.traditional .agent-transactions.block thead { + background: var(--primary-color); +} + +/* +---------------------------------------- +* Theme Name: Black & White +*/ +.design-1.black-white .agent-transactions.block h1 { + color: var(--black); +} + +.design-1.black-white .agent-transactions.block thead { + background: var(--black); +} diff --git a/blocks/floating-images/design-1.css b/blocks/floating-images/design-1.css new file mode 100644 index 00000000..d6a9762a --- /dev/null +++ b/blocks/floating-images/design-1.css @@ -0,0 +1,77 @@ +.design-1 .block.floating-images > div { + background-color: var(--white); +} + +.design-1 .block.floating-images .content h2 { + font-size: 2rem; +} + +@media (min-width: 900px) { + .design-1 .block.floating-images .image { + margin-top: 4.375rem; + margin-right: 4.375rem; + } +} + +@media (min-width: 1200px) { + .design-1 .block.floating-images .content h2 { + font-size: var(--heading-font-size-xxl); + } +} + +/** +Theme Name: Traditional +*/ +.design-1.traditional .block.floating-images .content h2 { + color: var(--primary-color); +} + +.design-1.traditional .block.floating-images .content p { + color: var(--primary-color); +} + +.design-1.traditional .block.floating-images .content a { + color: var(--primary-color); + border: 1px solid var(--primary-color); + margin-top: 1rem; +} + +.design-1.traditional .block.floating-images .content a:hover { + background-color: var(--primary-color); + color: var(--primary-light); +} + +@media (min-width: 900px) { + .design-1.traditional .with-border .block.floating-images .image { + box-shadow: var(--primary-color) 4.375rem -4.375rem; + } +} + +/* +Theme Name: Black & White +*/ +.design-1.black-white .block.floating-images .content h2 { + color: var(--black); +} + +.design-1.black-white .block.floating-images .content p { + color: var(--black); +} + +/* stylelint-disable-next-line no-descending-specificity */ +.design-1.black-white .block.floating-images .content a { + color: var(--black); + border: 1px solid var(--black); + margin-top: 1rem; +} + +.design-1.black-white .block.floating-images .content a:hover { + background-color: var(--black); + color: var(--white); +} + +@media (min-width: 900px) { + .design-1.black-white .with-border .block.floating-images .image { + box-shadow: var(--black) 4.375rem -4.375rem; + } +} diff --git a/blocks/floating-images/floating-images.css b/blocks/floating-images/floating-images.css index cbd42254..bc8ac470 100644 --- a/blocks/floating-images/floating-images.css +++ b/blocks/floating-images/floating-images.css @@ -1,5 +1,6 @@ /* styles for the floating images auto block */ @import url('luxury-collection-template.css'); +@import url('./design-1.css'); .block.floating-images { margin-bottom: 5em; @@ -60,6 +61,17 @@ line-height: var(--line-height-m); } +.block.floating-images .content a { + color: var(--primary-color); + border: 1px solid var(--primary-color); + margin-top: 1rem; +} + +.block.floating-images .content a:hover { + background-color: var(--primary-color); + color: var(--primary-light); +} + @media screen and (min-width: 900px) { .block.floating-images > div { flex-direction: row;