Merge pull request #1276 from adobecom/stage

Stage to Main
adobecom · Nov 16, 2024 · 6cc07c0 · 6cc07c0
2 parents d60226b + b1703d0
commit 6cc07c0
Show file tree

Hide file tree

Showing 5 changed files with 823 additions and 12 deletions.
diff --git a/express/blocks/discover-cards/discover-cards.css b/express/blocks/discover-cards/discover-cards.css
@@ -19,7 +19,6 @@ main .section .discover-cards {
 }
 .discover-cards .cards-container .card {
     min-width: 294px;
-    height: 427px;
     border: 1px solid white;
     border-radius: 16px;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
@@ -63,10 +62,6 @@ main .section .discover-cards {
     margin-top: 6px;
 }
 .discover-cards .card .button-container {
-    position: absolute;
-    bottom: 5px;
-    left: 6px;
-    right: 16px;
     text-align: left;
 }
 .discover-cards .card .button-container a {
@@ -86,7 +81,6 @@ main .section .discover-cards {
     .discover-cards .cards-container .card {
         min-width: 399px;
         max-width: 399px;
-        height: 478px;
     }
     .discover-cards .center-title h3 {
         font-size: 36px;
@@ -119,10 +113,6 @@ main .section .discover-cards {
     .discover-cards .cards-container .card:first-child {
         margin-left: 60px;
     }
-    .discover-cards .card .button-container {
-        bottom: 11px;
-        left: 13px;
-    }
 }
 
 @media (min-width: 1200px) {  

diff --git a/express/blocks/discover-cards/discover-cards.js b/express/blocks/discover-cards/discover-cards.js
@@ -1,5 +1,16 @@
-import { createTag } from '../../scripts/utils.js';
+import { createTag, yieldToMain } from '../../scripts/utils.js';
 import buildGallery from '../../features/gallery/gallery.js';
+import { debounce } from '../../scripts/hofs.js';
+
+async function syncMinHeights(groups) {
+  const maxHeights = groups.map((els) => els
+    .filter((e) => !!e)
+    .reduce((max, e) => Math.max(max, e.offsetHeight), 0));
+  await yieldToMain();
+  maxHeights.forEach((maxHeight, i) => groups[i].forEach((e) => {
+    if (e) e.style.minHeight = `${maxHeight}px`;
+  }));
+}
 
 export default async function decorate(block) {
   const firstChild = block.querySelector(':scope > div:first-child');
@@ -14,7 +25,7 @@ export default async function decorate(block) {
   });
 
   const cards = block.querySelectorAll(':scope > div:not(:first-child)');
-
+  const cardParagraphs = [[]];
   cards.forEach((card) => {
     card.classList.add('card');
 
@@ -28,6 +39,7 @@ export default async function decorate(block) {
         textHeader.classList.add('header');
         textBody.classList.add('body');
         element.classList.add('text-content');
+        cardParagraphs[0].push(element);
       }
 
       element.querySelector('picture img')?.classList.add('short');
@@ -41,6 +53,13 @@ export default async function decorate(block) {
 
   block.appendChild(cardsWrapper);
   await buildGallery(cards, cardsWrapper);
+  new IntersectionObserver((entries, obs) => {
+    obs.unobserve(block);
+    syncMinHeights(cardParagraphs);
+  }).observe(block);
+  window.addEventListener('resize', debounce(() => {
+    syncMinHeights(cardParagraphs);
+  }, 100));
 
   const imageSize = document.body.dataset.device === 'desktop' ? 'large' : 'small';
   block.style.backgroundImage = `

diff --git a/express/blocks/gen-ai-cards/gen-ai-cards.css b/express/blocks/gen-ai-cards/gen-ai-cards.css
@@ -68,6 +68,7 @@
 .gen-ai-cards.homepage .carousel-element.card {
   width: 292px;
   height: 396px;
+  flex-direction: column;
 }
 
 .gen-ai-cards .carousel-left-trigger ~ .card {
@@ -343,3 +344,21 @@ main .gen-ai-cards.homepage .carousel-container .carousel-fader-right.arrow-hidd
 }
 
 
+.gen-ai-cards.homepage .card .text-wrapper {
+  flex-grow: 1;
+}
+
+.gen-ai-cards.homepage .card .media-wrapper picture img {
+  width: 100%;
+}
+
+.gen-ai-cards.homepage .card .media-wrapper {
+  position: relative;
+}
+
+.gen-ai-cards.homepage .carousel-element.card {
+  height: unset;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}