Media with Text Block #180

blocks/v2-content-card/v2-content-card.js

@@ -2,7 +2,7 @@ import { createOptimizedPicture } from '../../scripts/lib-franklin.js';
 import {
   adjustPretitle, createElement, removeEmptyTags, variantsClassesToBEM,
 } from '../../scripts/common.js';
-import { createVideo, isVideoLink } from '../../scripts/video-helper.js';
+import { createVideo, getDynamicVideoHeight, isVideoLink } from '../../scripts/video-helper.js';
 
 const variantClasses = ['images-grid', 'images-grid-masonry', 'editorial'];
 
@@ -63,23 +63,7 @@ export default async function decorate(block) {
       parentElement.style.position = 'relative';
       parentElement.append(playbackControls);
 
-      // Get the element's height(use requestAnimationFrame to get actual height instead of 0)
-      requestAnimationFrame(() => {
-        const height = newVideo.offsetHeight - 60;
-        playbackControls.style.top = `${height.toString()}px`;
-      });
-
-      // Get the element's height on resize
-      const getVideoHeight = (entries) => {
-        // eslint-disable-next-line no-restricted-syntax
-        for (const entry of entries) {
-          const height = entry.target.offsetHeight - 60;
-          playbackControls.style.top = `${height.toString()}px`;
-        }
-      };
-
-      const resizeObserver = new ResizeObserver(getVideoHeight);
-      resizeObserver.observe(newVideo);
+      getDynamicVideoHeight(newVideo, playbackControls);
     }
 
     // Add wrapper around the text content

blocks/v2-media-with-tabs/v2-media-with-tabs.css

@@ -112,38 +112,28 @@ button.v2-media-with-tabs__tab:focus-visible {
   }
 
   .v2-media-with-tabs__header-section {
-    width: 50%;
+    max-width: 332px;
   }
 }
 
 @media screen and (min-width: 1200px) {
-  .section.v2-media-with-tabs-container .v2-media-with-tabs-wrapper {
-    width: 100%;
-    margin: 0;
-  }
-
   .v2-media-with-tabs {
-    padding: 0 64px 0 32px;
     flex-direction: row;
     gap: 48px;
   }
 
   .v2-media-with-tabs__images-section {
     order: 1;
-    width: 70%;
+    width: 100%;
   }
 
   .v2-media-with-tabs__texts-section {
     order: 2;
-    width: 30%;
+    max-width: 309px;
     justify-content: center;
   }
 
   /* media-right variant: images displayed on the right side */
-  .v2-media-with-tabs.v2-media-with-tabs--media-right {
-    padding: 0 32px 0 64px;
-  }
-
   .v2-media-with-tabs--media-right .v2-media-with-tabs__images-section {
     order: 2;
   }
@@ -158,9 +148,11 @@ button.v2-media-with-tabs__tab:focus-visible {
     text-wrap: balance;
   }
 
-  .v2-media-with-tabs__subtitle {
+  .v2-media-with-tabs__texts-section .v2-media-with-tabs__subtitle {
     margin-bottom: 48px;
     font-size: var(--f-body-2-font-size);
+    letter-spacing: var(--f-body-2-letter-spacing);
+    line-height: var(--f-body-2-line-height);
   }
 
   .v2-media-with-tabs__image img {
@@ -181,6 +173,7 @@ button.v2-media-with-tabs__tab:focus-visible {
   .v2-media-with-tabs__header-section {
     order: 1;
     width: 100%;
+    max-width: unset;
   }
 
 }

blocks/v2-media-with-tabs/v2-media-with-tabs.js

@@ -1,6 +1,11 @@
-import { createElement, unwrapDivs, variantsClassesToBEM } from '../../scripts/common.js';
-
-const variantClasses = ['media-right'];
+import {
+  addClassIfChildHasClass,
+  createElement,
+  unwrapDivs,
+  variantsClassesToBEM,
+} from '../../scripts/common.js';
+
+const variantClasses = ['media-right', 'expanded-width'];
 const blockName = 'v2-media-with-tabs';
 
 const handleChangeTab = (e) => {
@@ -25,6 +30,7 @@ const handleChangeTab = (e) => {
 
 export default function decorate(block) {
   variantsClassesToBEM(block.classList, variantClasses, blockName);
+  addClassIfChildHasClass(block, 'expanded-width');
 
   const content = block.querySelectorAll(':scope > div > div');
   const [header, list] = content;