code enhancement

adobecom · Apr 11, 2024 · 6b4f9d8 · 6b4f9d8
1 parent ba7a7c9
commit 6b4f9d8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 23 deletions.
diff --git a/creativecloud/blocks/interactive-marquee/interactive-marquee.js b/creativecloud/blocks/interactive-marquee/interactive-marquee.js
@@ -7,20 +7,13 @@ function decorateText(el, createTag) {
   const headings = el.querySelectorAll('h1, h2, h3, h4, h5, h6');
   const heading = headings[headings.length - 1];
   const config = typeSizes;
-  const screenSize = window.matchMedia('(max-width: 600px)');
-  const moveTextToParent = (screen, headingEl, textEl) => {
-    if (screen.matches) {
-      el.insertAdjacentElement('afterEnd', textEl);
-    } else {
-      headingEl.insertAdjacentElement('afterEnd', textEl);
-    }
-  };
   const decorate = (headingEl, typeSize) => {
     headingEl.classList.add(`heading-${typeSize[0]}`);
     const bodyEl = headingEl.nextElementSibling;
     bodyEl?.classList.add(`body-${typeSize[1]}`);
     bodyEl?.nextElementSibling?.classList.add(`body-${typeSize[1]}`, 'pricing');
-    moveTextToParent(screenSize, headingEl, bodyEl);
+    const bodyElClone = bodyEl?.cloneNode(true);
+    if (bodyEl) { el.insertAdjacentElement('afterEnd', bodyElClone); }
     const sib = headingEl.previousElementSibling;
     if (sib) {
       const className = sib.querySelector('img, .icon') ? 'icon-area' : `detail-${typeSize[2]}`;
@@ -33,9 +26,6 @@ function decorateText(el, createTag) {
     iconAreaElements?.classList.add('icon-area');
     iconText.innerText = (iconAreaElements.textContent.trim());
     iconText.previousSibling.textContent = '';
-    screenSize.addEventListener('change', () => {
-      moveTextToParent(screenSize, headingEl, bodyEl);
-    });
   };
   decorate(heading, config);
 }

diff --git a/creativecloud/blocks/interactive-marquee/milo-marquee.css b/creativecloud/blocks/interactive-marquee/milo-marquee.css
@@ -116,6 +116,11 @@
   line-height: 0;
 }
 
+.interactive-marquee > .container > .body-xl {
+  display: none;
+  order:3;
+}
+
 @media screen and (min-width: 600px) {
   .interactive-marquee .background .mobile-only,
   .interactive-marquee .background .desktop-only {
@@ -194,20 +199,17 @@
 
 @media screen and (max-width: 600px) {
   .interactive-marquee .text {
-    display: flex;
-    order: 1;
-  }
-
-  .interactive-marquee .body-xl {
-    display: flex;
-    order: 3;
+    margin: 0;
+    order: 0;
   }
 
-  .interactive-marquee .interactive-container {
-    order: 2;
+  .interactive-marquee .text 
+  p.body-xl:nth-last-child(2) {
+    display: none;
   }
 
-  .interactive-marquee .foreground {
-    padding: var(--spacing-xs) 0;
+  .interactive-marquee > .container > .body-xl {
+    display:flex;
+    order:3;
   }
 }