generated from adobe/aem-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into floatingagent
- Loading branch information
Showing
13 changed files
with
714 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,140 @@ | ||
.agent-profile.block { | ||
display: flex; | ||
padding: 0 1rem; | ||
} | ||
|
||
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-content { | ||
padding-left: 1.5rem; | ||
font-size: var(--body-font-size-s); | ||
} | ||
|
||
.agent-profile.block .profile-content .name { | ||
font-size: var(--body-font-size-xl); | ||
line-height: var(--line-height-m); | ||
margin-bottom: 0.5rem; | ||
} | ||
|
||
.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; | ||
} | ||
|
||
.agent-profile.block .profile-content .social ul { | ||
display: flex; | ||
margin-top: 1rem; | ||
opacity: .5; | ||
} | ||
|
||
.agent-profile.block .profile-content .social li { | ||
margin-right: 0.5rem; | ||
} | ||
|
||
.agent-profile.block .profile-content .email a, | ||
.agent-profile.block .profile-content .website a { | ||
font-size: var(--body-font-size-xs); | ||
color: var(--black); | ||
text-transform: lowercase; | ||
word-wrap: break-word; | ||
} | ||
|
||
.agent-profile.block .profile-content .contact-me 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; | ||
} | ||
|
||
.agent-profile.block .profile-content .contact-me 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 .phone { | ||
font-size: var(--body-font-size-xs); | ||
} | ||
|
||
.agent-profile.block .profile-content .phone li { | ||
margin-bottom: 0.25rem; | ||
} | ||
|
||
@media (min-width: 600px) { | ||
.agent-profile.block .profile-content .contact-me { | ||
display: block; | ||
} | ||
} | ||
|
||
@media (min-width: 1200px) { | ||
main .section.agent-profile-container { | ||
position: relative; | ||
} | ||
|
||
main .section.agent-profile-container .agent-profile-wrapper { | ||
position: absolute; | ||
display: flex; | ||
left: auto; | ||
width: 34rem; | ||
right: 0; | ||
bottom: 4.625rem; | ||
padding: 1.875rem 1.875rem 0; | ||
z-index: 1; | ||
background-color: var(--white); | ||
} | ||
|
||
.agent-profile.block { | ||
position: relative; | ||
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; | ||
} | ||
|
||
.agent-profile.block .profile-content .designation, | ||
.agent-profile.block .profile-content .license-number { | ||
margin-bottom: unset; | ||
} | ||
|
||
.agent-profile.block .profile-content .phone li { | ||
margin-bottom: unset; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,119 @@ | ||
import { decorateIcons, getMetadata } from '../../scripts/aem.js'; | ||
import { | ||
a, div, h1, ul, li, img, span, | ||
} from '../../scripts/dom-helpers.js'; | ||
|
||
const getPhoneDiv = () => { | ||
let phoneDiv; | ||
let phoneUl; | ||
|
||
if (getMetadata('direct-phone')) { | ||
phoneUl = ul({}); | ||
phoneUl.append(li({}, 'Direct: ', getMetadata('direct-phone'))); | ||
} | ||
|
||
if (getMetadata('office-phone')) { | ||
phoneUl = phoneUl || ul({}); | ||
phoneUl.append(li({}, 'Office: ', getMetadata('office-phone'))); | ||
} | ||
|
||
if (phoneUl) { | ||
phoneDiv = div({ class: 'phone' }); | ||
phoneDiv.append(phoneUl); | ||
return phoneDiv; | ||
} | ||
|
||
return phoneDiv; | ||
}; | ||
|
||
const getWebsiteDiv = () => { | ||
let websiteDiv; | ||
const websiteUrl = getMetadata('website'); | ||
|
||
if (websiteUrl) { | ||
const text = 'my website'; | ||
const anchor = a({ href: websiteUrl, title: text, 'aria-label': text }, text); | ||
websiteDiv = div({ class: 'website' }, anchor); | ||
} | ||
|
||
return websiteDiv; | ||
}; | ||
|
||
const getEmailDiv = () => { | ||
let emailDiv; | ||
const agentEmail = getMetadata('email'); | ||
|
||
if (agentEmail) { | ||
const anchor = a({ href: `mailto:${agentEmail}`, title: agentEmail, 'aria-label': agentEmail }, agentEmail); | ||
emailDiv = div({ class: 'email' }, anchor); | ||
} | ||
|
||
return emailDiv; | ||
}; | ||
|
||
const getImageDiv = () => { | ||
const agentPhoto = getMetadata('photo'); | ||
return div({ class: 'profile-image' }, img({ src: agentPhoto, alt: getMetadata('name'), loading: 'lazy' })); | ||
}; | ||
|
||
const getSocialDiv = () => { | ||
const socialDiv = div({ class: 'social' }); | ||
let socialUl; | ||
|
||
['facebook', 'instagram', 'linkedin'].forEach((x) => { | ||
const url = getMetadata(x); | ||
socialUl = socialUl || ul({}); | ||
if (url) { | ||
const socialLi = li({}, a({ | ||
href: url, class: x, title: x, 'aria-label': x, | ||
}, span({ class: `icon icon-${x}` }))); | ||
socialUl.append(socialLi); | ||
} | ||
}); | ||
|
||
if (socialUl) { | ||
socialDiv.append(socialUl); | ||
return socialDiv; | ||
} | ||
|
||
return null; | ||
}; | ||
|
||
export default async function decorate(block) { | ||
const profileImage = getImageDiv(); | ||
const profileContent = div({ class: 'profile-content' }, | ||
div({ class: 'name' }, h1({}, getMetadata('name'))), | ||
div({ class: 'designation' }, getMetadata('designation')), | ||
); | ||
|
||
const licenseNumber = getMetadata('license-number'); | ||
if (licenseNumber) { | ||
profileContent.append(div({ class: 'license-number' }, `LIC# ${licenseNumber}`)); | ||
} | ||
|
||
const emailDiv = getEmailDiv(); | ||
if (emailDiv) { | ||
profileContent.append(emailDiv); | ||
} | ||
|
||
const websiteDiv = getWebsiteDiv(); | ||
if (websiteDiv) { | ||
profileContent.append(websiteDiv); | ||
} | ||
|
||
const phoneDiv = getPhoneDiv(); | ||
if (phoneDiv) { | ||
profileContent.append(phoneDiv); | ||
} | ||
|
||
const contactMeText = 'Contact Me'; | ||
profileContent.append(div({ class: 'contact-me' }, | ||
a({ href: '#', title: contactMeText, 'aria-label': contactMeText }, contactMeText))); | ||
|
||
const socialDiv = getSocialDiv(); | ||
if (socialDiv) { | ||
profileContent.append(socialDiv); | ||
} | ||
decorateIcons(profileContent); | ||
block.replaceChildren(profileImage, profileContent); | ||
} |
Oops, something went wrong.