Merge pull request #229 from hlxsites/219-office-agents

219 office agents
hlxsites · May 13, 2024 · bfebb6d · bfebb6d
2 parents ed11129 + 9a03af2
commit bfebb6d
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 22 deletions.
diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css
@@ -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;
@@ -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;
@@ -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);
+  }
+}
diff --git a/blocks/offices/offices.css b/blocks/offices/offices.css
@@ -2,8 +2,14 @@
   padding-bottom: 32px;
 }
 
-.offices.block .title {
+.offices.block .title h4 {
   padding: 2em 0;
+  font-size: var(--heading-font-size-m);
+  line-height: var(--line-height-s);
+  letter-spacing: var(--letter-spacing-s);
+  color: var(--primary-color);
+  font-weight: var(--font-weight-bold);
+  text-align: center;
 }
 
 .offices.block .cards-list .cards-item {
@@ -14,7 +20,7 @@
 }
 
 .offices.block.agents .cards-list .cards-item {
-  display: inline-block;
+  flex-direction: row;
   width: 100%;
   border-bottom: 1px solid var(--grey);
   padding: 16px 0;
@@ -26,38 +32,60 @@
 
 .offices.block .cards-list .cards-item .card-image {
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
+}
+
+.offices.block .cards-list .cards-item .card-image p {
+  position: absolute;
+  bottom: 0;
+  background-color: var(--white);
+  padding: 8px 8px 9px 0;
+  margin: 0;
+  width: 66.67%;
+  color: var(--body-color);
+  font-size: var(--body-font-size-xxs);
+  line-height: var(--line-height-xs);
+  letter-spacing: var(--letter-spacing-m);
+  text-transform: uppercase;
+  font-weight: var(--font-weight-bold);
 }
 
 .offices.block.agents .cards-list .cards-item .card-image {
   display: inline-block;
   width: 33%;
+  height: 100%;
 }
 
 .offices.block .cards-list .cards-item .card-image picture {
   display: block;
   position: relative;
   height: 100%;
   width: 100%;
+  padding-bottom: 75%;
+}
+
+.offices.block.agents .cards-list .cards-item .card-image picture {
+  padding-bottom: unset;
 }
 
 .offices.block .cards-list .cards-item .card-image img {
   position: absolute;
   bottom: 0;
   left: 0;
-  object-fit: cover;
   object-position: center;
   width: 100%;
   height: 100%;
+  object-fit: cover;
+}
+
+.offices.block.agents .cards-list .cards-item .card-image img {
+  object-fit: contain;
+  position: relative;
 }
 
 .offices.block.agents .cards-list .cards-item .card-body {
   display: inline-block;
   width: 66%;
-  padding-left: 15px;
+  padding-left: 10px;
 }
 
 .offices.block.agents .cards-list .cards-item .card-body .name {
@@ -97,13 +125,46 @@
 
 .offices.block .cards-list .cards-item .card-body .button-container {
   margin-top: auto;
-  height: 40px;
+  text-align: center;
 }
 
-@media (min-width: 900px) {
+@media (min-width: 576px) {
+  .offices.block.agents .cards-list {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 20px
+  }
+
   .offices.block.agents .cards-list .cards-item,
   .offices.block.agents .cards-list .cards-item:first-of-type {
     border: none;
+    display: flex;
+    flex-direction: column;
+    width: 16.66%;
+    min-width: 200px;
+    max-width: 248px;
+    flex-grow: 1;
+  }
+
+  .offices.block.agents .cards-list .cards-item .card-image {
+    padding-bottom: 15px;
+    width: 100%;
+  }
+
+  .offices.block.agents .cards-list .cards-item .card-image picture {
+    height: auto;
+    width: 100%;
+    min-width: 180px;
+    min-height: 225px;
+  }
+
+  .offices.block.agents .cards-list .cards-item .card-body {
+    width: 100%;
+    padding-left: unset;
+  }
+
+  .offices.block .cards-list .cards-item .card-body .button-container {
+    text-align: left;
   }
 }
 

diff --git a/blocks/offices/offices.js b/blocks/offices/offices.js
@@ -11,7 +11,6 @@ function buildOfficeCards(list, data) {
     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);
@@ -43,17 +42,19 @@ 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);
+  const filteredData = data.filter((item) => toClassName(item.office) === toClassName(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);
+    const tmpImage = item.image ? item.image : '/media/images/no-profile-image.png';
+    const pic = document.createElement('picture');
+    const image = document.createElement('img');
+    pic.append(image);
+    image.src = tmpImage;
+    image.loading = 'eager';
+    cardImage.append(pic);
     cardsItem.append(cardImage);
     const cardBody = document.createElement('div');
     cardBody.className = 'card-body';