Skip to content

Commit

Permalink
Merge branch 'main' into feature/savedprops
Browse files Browse the repository at this point in the history
  • Loading branch information
@kailasnadh790
kailasnadh790 committed May 14, 2024
2 parents 1a60fb0 + bfebb6d commit 3f1c394
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 193 deletions.
52 changes: 1 addition & 51 deletions blocks/cards/cards.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,54 +98,14 @@
margin: 8px 0 24px;
}

.cards.block .cards-list .cards-item .card-body a.name {
text-decoration: none;
font-family: var(--font-family-secondary);
font-size: var(--body-font-size-l);
line-height: var(--line-height-s);
color: var(--body-color);
}

.cards.block .cards-list .cards-item .card-body div.title,
.cards.block .cards-list .cards-item .card-body div.teamname,
.cards.block .cards-list .cards-item .card-body div.phone,
.cards.block .cards-list .cards-item .card-body div.license {
font-size: var(--body-font-size-xxs);
font-weight: 600;
line-height: var(--line-height-m);
letter-spacing: var(--letter-spacing-m);
text-transform: uppercase;
color: var(--body-color);
padding: 1em 0;
}

.cards.block .cards-list .cards-item .card-body div.teamname {
font-weight: 700;
letter-spacing: normal;
text-transform: none;
}

.cards.block .cards-list .cards-item .card-body div.phone,
.cards.block .cards-list .cards-item .card-body div.license {
font-weight: var(--font-weight-normal);
text-transform: none;
letter-spacing: normal;
padding: 0;
}

.tertiary-background .cards.block .cards-list .cards-item .card-image p {
background-color: var(--tertiary-color);
}

.cards.block .cards-list .cards-item .card-body {
flex-grow: 1;
}

.cards.block .cards-list .cards-item .card-body .button-container {
margin-top: auto;
margin: 16px 0 0 ;
height: 40px;
display: flex;
align-self: flex-end;
}

/* Icons variation */
Expand Down Expand Up @@ -292,16 +252,6 @@
margin-bottom: 20px;
}

.cards.block.agents .cards-list {
flex-flow: row wrap;
}

.cards.block.agents .cards-list .cards-item {
flex: 0 0 20%;
margin-bottom: 20px;
min-width: 220px;
}

.cards.block.cards-1-cols .cards-list .cards-item .card-image {
max-height: 500px;
}
Expand Down
131 changes: 11 additions & 120 deletions blocks/cards/cards.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import {
createOptimizedPicture,
toClassName,
} from '../../scripts/aem.js';
import { phoneFormat } from '../../scripts/util.js';
export default function decorate(block) {
const cards = [...block.children];

// Check for a title row
if (!block.classList.contains('shade-icon') && block.children[0].children.length === 1) {
const wrapper = cards.shift();
const title = wrapper.children[0];
title.classList.add('title');
wrapper.remove();
block.prepend(title);
}

function buildCards(block, cards) {
const list = document.createElement('div');
list.classList.add('cards-list');
block.append(list);
Expand Down Expand Up @@ -50,117 +55,3 @@ function buildCards(block, cards) {
});
}
}

function buildOfficeCards(list, data) {
data.forEach((item) => {
const cardsItem = document.createElement('div');
cardsItem.className = 'cards-item';
const cardImage = document.createElement('div');
cardImage.className = 'card-image';
const image = createOptimizedPicture(item.image, item.location, true);
image.style = 'padding-bottom: 75%';
const type = document.createElement('p');
type.innerText = item.type;
cardImage.append(image, type);
cardsItem.append(cardImage);
const cardBody = document.createElement('div');
cardBody.className = 'card-body';
const location = document.createElement('h3');
location.innerText = item.location;
const address = document.createElement('p');
address.innerHTML = item.address;
address.innerHTML += `<br/>${item.cityStateZip}`;
address.innerHTML += `<br/>Office: ${phoneFormat(item.phone)}`;
if (item.fax) address.innerHTML += `<br/>Office Fax: ${phoneFormat(item.fax)}`;
const contact = document.createElement('p');
contact.innerHTML = `<b>${item.contactName}</b>`;
contact.innerHTML += `<br/>${item.contactTitle}`;
contact.innerHTML += `<br/>${item.contactPhone}`;
contact.innerHTML += `<br/>${item.contactEmail}`;
const contactBtn = document.createElement('p');
contactBtn.className = 'button-container';
contactBtn.innerHTML = `<a href="/offices/${toClassName(item.location)}" title="Visit Us" class="button">Visit Us</a>`;
cardBody.append(location, address, contact, contactBtn);
cardsItem.append(cardBody);
list.append(cardsItem);
});
}

function buildAgentCards(list, data) {
const { pathname } = window.location;
const parts = pathname.split('/');
const pageName = parts[parts.length - 1];
const filteredData = data.filter((item) => item.office.toLowerCase() === pageName);
filteredData.forEach((item) => {
const cardsItem = document.createElement('div');
cardsItem.className = 'cards-item';
const cardImage = document.createElement('div');
cardImage.className = 'card-image';
const tmpImage = 'https://main--hsf-commonmoves--hlxsites.hlx.page/media/images/no-profile-image.png';
const image = createOptimizedPicture(tmpImage, item.name, true);
image.style = 'padding-bottom: 75%';

cardImage.append(image);
cardsItem.append(cardImage);
const cardBody = document.createElement('div');
cardBody.className = 'card-body';
const nameLink = document.createElement('a');
nameLink.className = 'name';
nameLink.href = item.profile;
nameLink.innerText = item.name;
const title = document.createElement('div');
title.className = 'title';
title.innerText = item.title;
const team = document.createElement('div');
team.className = 'teamname';
team.innerText = item.team;
const phone = document.createElement('div');
phone.className = 'phone';
phone.innerText = phoneFormat(item.phone);
const license = document.createElement('div');
license.className = 'license';
license.innerText = item.license;
const contactBtn = document.createElement('p');
contactBtn.className = 'button-container';
contactBtn.innerHTML = `<a href="${item.profile}" title="Agent Detail" class="button">Agent Detail</a>`;
cardBody.append(nameLink, title, team, phone, license, contactBtn);
cardsItem.append(cardBody);
list.append(cardsItem);
});
}

async function fetchIndex(url) {
const response = await fetch(url);
const json = await response.json();
return json.data;
}

export default async function decorate(block) {
const cards = [...block.children];

// Check for a title row
if (!block.classList.contains('shade-icon') && block.children[0].children.length === 1) {
const wrapper = cards.shift();
const title = wrapper.children[0];
title.classList.add('title');
wrapper.remove();
block.prepend(title);
}
// Check for JSON data
if (cards.length === 1 && cards[0].children.length === 1) {
const link = cards.shift();
const url = new URL(link.querySelector('a[href]').href);
const jsonData = await fetchIndex(url.href);
link.remove();
const list = document.createElement('div');
list.classList.add('cards-list');
block.append(list);
if (url.searchParams.has('sheet')) {
buildAgentCards(list, jsonData);
} else {
buildOfficeCards(list, jsonData);
}
} else {
buildCards(block, cards);
}
}
57 changes: 52 additions & 5 deletions blocks/columns/columns.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,30 @@
padding: 5px;
}

.columns.block.office h2 {
font-size: var(--heading-font-size-l);
}

.columns.block.office #location {
text-transform: uppercase;
font-weight: var(--font-weight-bold);
line-height: var(--line-height-m);
letter-spacing: var(--letter-spacing-m);
}

.columns.block p {
margin-bottom: 20px;
}

.columns.block.office div div p:first-of-type {
font-size: var(--body-font-size-s);
margin: 16px 0;
}

.columns.block.office > div > div:nth-child(2) > p:not(.button-container) {
line-height: var(--line-height-xs);
margin: 8px 0;
}

.columns > div > div {
order: 1;
Expand All @@ -45,11 +69,7 @@

}

.columns.block p {
margin-bottom: 20px;
}

@media (min-width: 900px) {
@media (min-width: 600px) {
.columns > div {
align-items: flex-start;
flex-direction: unset;
Expand All @@ -60,5 +80,32 @@
flex: 1;
order: unset;
}

.columns.block.office > div > div {
align-self: end;
}

.columns.block.office > div > div:first-of-type {
flex: 0 0 58.33%;
max-width: 58.33%;
border-right: 1px solid var(--secondary-medium-grey);
}

.columns.columns-2-cols.office > div > div:first-of-type {
margin-bottom: unset;
}

.columns.block.office > div > div:last-child .button-container a {
width: 100%;
}
}

@media (min-width: 900px) {
.columns.block.office h2 {
font-size: var(--heading-font-size-xxl);
}

.columns.block.office div div p:first-of-type {
font-size: var(--body-font-size-m);
}
}
Loading

0 comments on commit 3f1c394

Please sign in to comment.