[MWPW-131763] Variable Aside backgrounds based on media breakpoints (#…

…1162) * add requisite styles for aside bg breakpoint switching * clean up linting errors in decorate.js, simplify decorateBlockBg and better handle color backgrounds * update global decorateBlockBg, use in aside * autoBlock races with bg creation, defer to video * fix stylelint errors * update test markup to align w/ video auto-blocking * add coverage for variable CSS backgrounds * remove test src's, make bg decorator more readable * make global base bg styles, remove dupes from aside.css * add con-block bg styles to main styles file * regroup breakpoints when only two bgs are provided * reintroduce video decorator to support additional video types * update breakpoint classnames * revert previous commit * remove bg media min height --------- Co-authored-by: Honwai Wong <[email protected]>
adobecom · Sep 21, 2023 · d5bdb06 · d5bdb06
1 parent db1af1a
commit d5bdb06
Show file tree

Hide file tree

Showing 7 changed files with 207 additions and 208 deletions.
diff --git a/libs/blocks/aside/aside.css b/libs/blocks/aside/aside.css
@@ -20,45 +20,14 @@
   display: flex;
 }
 
-.aside .background {
-  overflow: hidden;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-
-.aside .background>div {
-  height: 100%;
-}
-
 .aside .split-image img,
-.aside .background img,
-.aside .split-image video,
-.aside .background video {
+.aside .split-image video {
   object-fit: cover;
   min-height: 700px;
   width: 100%;
   height: 100%;
 }
 
-.aside .background video {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.aside .background.has-video {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-}
-
 .aside.notification .background img {
   min-height: unset;
 }
@@ -80,42 +49,74 @@
   margin-bottom: var(--spacing-xxxl);
 }
 
+.aside .foreground.container .text {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .aside.split .foreground.container .text {
   margin: 0;
   max-width: var(--grid-container-width);
   padding: var(--spacing-xxxl) 0 var(--spacing-l) 0;
 }
 
-.aside.split.large .foreground.container .text {
-  padding: var(--spacing-l) 0 var(--spacing-xxxl) 0;
+.aside.notification .foreground.container .text {
+  max-width: none;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
-.aside .foreground.container .text {
+.aside .foreground.container .image {
+  position: relative;
+}
+
+.aside.simple .foreground.container .text {
+  margin-bottom: 80px;
+}
+
+.aside .foreground.container>div {
+  flex-grow: 1;
+  flex-basis: 0;
+  min-width: 0;
+}
+
+.aside.notification .foreground.container>div {
+  flex-basis: 100%;
+}
+
+.aside .foreground.container .image,
+.aside .foreground.container div:has(.milo-video) {
   display: flex;
-  flex-wrap: wrap;
 }
 
-.aside .foreground.container .image {
-  position: relative;
+.aside.inline .foreground.container .image,
+.aside.inline .foreground.container div:has(.milo-video),
+.aside.inline .foreground.container .text {
+  padding: 0;
 }
 
-.aside.notification .foreground.container .text {
-  max-width: none;
-  padding-top: 0;
-  padding-bottom: 0;
+.aside.split.large .foreground.container .text {
+  padding: var(--spacing-l) 0 var(--spacing-xxxl) 0;
+}
+
+.aside.split .icon-stack-area li,
+.aside.split .icon-stack-area li a {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-weight: bold;
 }
 
 .aside.notification .foreground.container .text a {
   white-space: nowrap;
 }
 
-.aside:not(.notification) .foreground.container .text > * {
+.aside:not(.notification) .foreground.container .text>* {
   width: 100%;
 }
 
 .aside .foreground.container .text .heading-xl {
-  margin: 0;
-  margin-bottom: var(--spacing-xs);
+  margin: 0 0 var(--spacing-xs);
 }
 
 .aside .foreground.container .text .body-m,
@@ -136,21 +137,6 @@
   align-items: center;
 }
 
-.aside .foreground.container > div {
-  flex-grow: 1;
-  flex-basis: 0;
-  min-width: 0;
-}
-
-.aside.notification .foreground.container > div {
-  flex-basis: 100%;
-}
-
-.aside .foreground.container .image,
-.aside .foreground.container div:has(.milo-video) {
-  display: flex;
-}
-
 .aside .foreground.container .icon-area {
   height: 56px;
   max-width: 234px;
@@ -186,13 +172,13 @@
   aspect-ratio: var(--aspect-ratio-standard);
 }
 
-.aside.split .icon-stack-area li img {
-  width: var(--icon-size-m);
+.aside.split .format img,
+.aside.split .format video {
   height: auto;
 }
 
-.aside.split .format img,
-.aside.split .format video {
+.aside.split .icon-stack-area li img {
+  width: var(--icon-size-m);
   height: auto;
 }
 
@@ -211,10 +197,6 @@
   object-position: left top;
 }
 
-.aside.simple .foreground.container .text {
-  margin-bottom: 80px;
-}
-
 .aside.simple .foreground.container .image {
   display: none;
 }
@@ -234,12 +216,6 @@
   z-index: 1;
 }
 
-.aside.inline .foreground.container .image,
-.aside.inline .foreground.container div:has(.milo-video),
-.aside.inline .foreground.container .text {
-  padding: 0;
-}
-
 .aside.split .background {
   position: relative;
 }
@@ -253,6 +229,10 @@
   display: none;
 }
 
+.aside.split .icon-stack-area li picture {
+  flex-shrink: 0;
+}
+
 .aside.notification .foreground.container img {
   display: block;
 }
@@ -312,7 +292,7 @@
   font-weight: normal;
 }
 
-.aside.notification .foreground.container .text .action-area > a {
+.aside.notification .foreground.container .text .action-area>a {
   margin-right: 0;
 }
 
@@ -368,6 +348,12 @@
   max-width: 1000px;
 }
 
+.aside.center:not(.notification) .foreground.container .text {
+  margin: 80px 0;
+  text-align: center;
+  padding: 0;
+}
+
 .aside.notification.center.small .foreground.container .text {
   text-align: left;
 }
@@ -423,7 +409,7 @@
 }
 
 .aside.notification.center.small .foreground.container .text,
-.aside.notification.center.small .foreground.container .text > * {
+.aside.notification.center.small .foreground.container .text>* {
   justify-content: flex-start;
 }
 
@@ -438,28 +424,10 @@
   list-style-type: none;
 }
 
-.aside.split .icon-stack-area li,
-.aside.split .icon-stack-area li a {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-weight: bold;
-}
-
-.aside.split .icon-stack-area li picture {
-  flex-shrink: 0;
-}
-
 .aside.center:not(.notification) .foreground.container {
   padding: 0;
 }
 
-.aside.center:not(.notification) .foreground.container .text {
-  margin: 80px 0;
-  text-align: center;
-  padding: 0;
-}
-
 .aside.center:not(.notification) .foreground.container .icon-area {
   max-width: 100%;
 }
@@ -576,7 +544,7 @@
   .aside.split .tablet-wide video {
     aspect-ratio: var(--aspect-ratio-wide);
   }
-  
+
   .aside.split .tablet-standard img,
   .aside.split .tablet-standard video {
     aspect-ratio: var(--aspect-ratio-standard);
@@ -593,7 +561,7 @@
 
   .aside .split-image .modal-img-link,
   .aside.split .split-image img,
-  .aside.split .split-image video  {
+  .aside.split .split-image video {
     width: 60.5vw;
     max-width: 56%;
     position: absolute;
@@ -780,8 +748,7 @@
   }
 
   .aside .foreground.container .text .heading-xl {
-    margin: 0;
-    margin-bottom: var(--spacing-xs);
+    margin: 0 0 var(--spacing-xs);
   }
 
   .aside.inline .foreground.container .text {
@@ -812,7 +779,7 @@
   .aside.split .desktop-wide video {
     aspect-ratio: var(--aspect-ratio-wide);
   }
-  
+
   .aside.split .desktop-standard img,
   .aside.split .desktop-standard video {
     aspect-ratio: var(--aspect-ratio-standard);

diff --git a/libs/blocks/aside/aside.js b/libs/blocks/aside/aside.js
@@ -14,7 +14,7 @@
 * Aside - v5.1
 */
 
-import { decorateBlockText, decorateIconStack, applyHoverPlay } from '../../utils/decorate.js';
+import { decorateBlockText, decorateIconStack, applyHoverPlay, decorateBlockBg } from '../../utils/decorate.js';
 import { createTag } from '../../utils/utils.js';
 
 // standard/default aside uses same text sizes as the split
@@ -84,30 +84,12 @@ function decorateVideo(container) {
   container.classList.add('has-video');
 }
 
-function decorateBlockBg(block, node) {
-  const viewports = ['mobile-only', 'tablet-only', 'desktop-only'];
-  const childCount = node.childElementCount;
-  const { children } = node;
-  node.classList.add('background');
-  if (childCount === 2) {
-    children[0].classList.add(viewports[0], viewports[1]);
-    children[1].classList.add(viewports[2]);
-  }
-  [...children].forEach((child, index) => {
-    if (childCount === 3) {
-      child.classList.add(viewports[index]);
-    }
-    decorateVideo(child);
-  });
-  if (!node.querySelector(':scope img') && !node.querySelector(':scope video')) {
-    block.style.background = node.textContent;
-    node.remove();
-  }
-}
-
 function decorateLayout(el) {
   const elems = el.querySelectorAll(':scope > div');
-  if (elems.length > 1) decorateBlockBg(el, elems[0]);
+  if (elems.length > 1) {
+    decorateBlockBg(el, elems[0]);
+    [...elems[0].children].forEach((child) => decorateVideo(child));
+  }
   const foreground = elems[elems.length - 1];
   foreground.classList.add('foreground', 'container');
   if (el.classList.contains('split')) decorateMedia(el);
@@ -149,6 +131,7 @@ function decorateLayout(el) {
 }
 
 export default function init(el) {
+  el.classList.add('con-block');
   const blockData = getBlockData(el);
   const blockText = decorateLayout(el);
   decorateBlockText(blockText, blockData);

diff --git a/libs/blocks/marquee/marquee.css b/libs/blocks/marquee/marquee.css
@@ -94,10 +94,6 @@
   top: 0;
 }
 
-.marquee .background .mobile-only.tablet-only {
-  display: block;
-}
-
 .marquee .background .tablet-only,
 .marquee .background .desktop-only {
   display: none;
@@ -429,7 +425,6 @@
     min-height: 360px;
   }
 
-  .marquee .background .mobile-only.tablet-only,
   .marquee .background .mobile-only,
   .marquee .background .tablet-only {
     display: none;

diff --git a/libs/blocks/marquee/marquee.js b/libs/blocks/marquee/marquee.js
@@ -35,8 +35,8 @@ const decorateBlockBg = (block, node) => {
   node.classList.add('background');
 
   if (childCount === 2) {
-    children[0].classList.add(viewports[0], viewports[1]);
-    children[1].classList.add(viewports[2]);
+    children[0].classList.add(viewports[0]);
+    children[1].classList.add(viewports[1], viewports[2]);
   }
 
   [...children].forEach(async (child, index) => {