Skip to content

Commit

Permalink
Social changes and other changes in agent profile block
Browse files Browse the repository at this point in the history
  • Loading branch information
piyushjindal committed May 24, 2024
1 parent 5905f7e commit bb3015e
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 42 deletions.
69 changes: 42 additions & 27 deletions blocks/agent-profile/agent-profile.css
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,86 @@
.agent-profile {
.agent-profile.block {
display: flex;
padding: 0 1rem;
}

.agent-profile .profile-image img {
.agent-profile.block .profile-image img {
width: 9.375rem;
height: 11.875rem;
}

.agent-profile .profile-content .contact-me {
.agent-profile.block .profile-content .contact-me {
margin-top: 1.5rem;
}

.agent-profile .profile-content {
.agent-profile.block .profile-content {
padding-left: 1.5rem;
font-size: var(--body-font-size-s);
}

.agent-profile .profile-content .name {
.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 .profile-content .designation,
.agent-profile .profile-content .license-number {
.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 .profile-content .social>a {
margin-right: 1rem;
.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 .profile-content .email a,
.agent-profile .profile-content .website a {
.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;
}

.agent-profile .profile-content .contact-me a {
.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: 1.6px;
letter-spacing: var(--letter-spacing-m);
text-transform: uppercase;
padding: 0.5rem 1rem;
text-decoration: none;
}

.agent-profile .profile-content .contact-me a:hover {
.agent-profile.block .profile-content .contact-me a:hover {
color: var(--primary-light);
background-color: var(--primary-color);
}

.agent-profile .profile-content .website,
.agent-profile .profile-content .email {
.agent-profile.block .profile-content .website,
.agent-profile.block .profile-content .email {
margin-bottom: 0.25rem;
}

.agent-profile .profile-content .phone {
.agent-profile.block .profile-content .phone {
font-size: var(--body-font-size-xs);
}

.agent-profile .profile-content .phone li {
.agent-profile.block .profile-content .phone li {
margin-bottom: 0.25rem;
}

@media (min-width: 1200px) {
.agent-profile-container {
main .section.agent-profile-container {
position: relative;
}

.agent-profile-wrapper {
main .section.agent-profile-container .agent-profile-wrapper {
position: absolute;
display: flex;
left: auto;
Expand All @@ -87,28 +93,37 @@
background-color: var(--white);
}

.agent-profile {
.agent-profile.block {
position: relative;
line-height: var(--line-height-m);
line-height: var(--line-height-s);
}

.agent-profile .profile-image img {
.agent-profile.block .profile-image img {
width: 13.125rem;
height: 15.625rem;
}

.agent-profile .profile-content .phone {
.agent-profile.block .profile-content .phone {
font-size: var(--body-font-size-s);
margin-top: 2px;
line-height: var(--line-height-m);
}

.agent-profile .profile-content .email a,
.agent-profile .profile-content .website a {
.agent-profile.block .profile-content .email a,
.agent-profile.block .profile-content .website a {
font-size: var(--body-font-size-xs);
}

.agent-profile .profile-content {
.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;
}
}
66 changes: 51 additions & 15 deletions blocks/agent-profile/agent-profile.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import { getMetadata } from '../../scripts/aem.js';
import { decorateIcons, getMetadata } from '../../scripts/aem.js';
import {
a, div, h1, ul, li, img,
a, div, h1, ul, li, img, span,
} from '../../scripts/dom-helpers.js';

const getPhoneDiv = () => {
let phoneDiv;
let phoneUl;

if (getMetadata('agent-direct-phone')) {
if (getMetadata('direct-phone')) {
phoneUl = ul({});
phoneUl.append(li({}, 'Direct: ', getMetadata('agent-direct-phone')));
phoneUl.append(li({}, 'Direct: ', getMetadata('direct-phone')));
}

if (getMetadata('agent-office-phone')) {
if (getMetadata('office-phone')) {
phoneUl = phoneUl || ul({});
phoneUl.append(li({}, 'Office: ', getMetadata('agent-office-phone')));
phoneUl.append(li({}, 'Office: ', getMetadata('office-phone')));
}

if (phoneUl) {
Expand All @@ -28,10 +28,11 @@ const getPhoneDiv = () => {

const getWebsiteDiv = () => {
let websiteDiv;
const websiteUrl = getMetadata('agent-website');
const websiteUrl = getMetadata('website');

if (websiteUrl) {
const anchor = a({ href: websiteUrl, class: 'button', title: 'my website' }, 'my website');
const text = 'my website';
const anchor = a({ href: websiteUrl, title: text, 'aria-label': text }, text);
websiteDiv = div({ class: 'website' }, anchor);
}

Expand All @@ -40,29 +41,56 @@ const getWebsiteDiv = () => {

const getEmailDiv = () => {
let emailDiv;
const agentEmail = getMetadata('agent-email');
const agentEmail = getMetadata('email');

if (agentEmail) {
const anchor = a({ href: `mailto:${agentEmail}`, class: 'button', title: agentEmail }, 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('agent-photo');
const agentPhoto = getMetadata('photo');
return div({ class: 'profile-image' }, img({ src: agentPhoto }));
};

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('agent-name'))),
div({ class: 'designation' }, getMetadata('agent-designation')),
div({ class: 'license-number' }, getMetadata('agent-license-number')),
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);
Expand All @@ -78,6 +106,14 @@ export default async function decorate(block) {
profileContent.append(phoneDiv);
}

profileContent.append(div({ class: 'contact-me' }, a({ href: '#', class: 'button' }, 'Contact Me')));
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);
}

0 comments on commit bb3015e

Please sign in to comment.