Changing heading-top token to mobile-heading-top

adobecom · Apr 10, 2024 · 267e3da · 267e3da
1 parent 79a1623
commit 267e3da
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 20 deletions.
diff --git a/creativecloud/blocks/interactive-metadata/interactive-metadata.css b/creativecloud/blocks/interactive-metadata/interactive-metadata.css
@@ -17,16 +17,6 @@
   margin: 0;
 }
 
-.interactive-enabled.heading-top  h1,
-.interactive-enabled.heading-top  h2,
-.interactive-enabled.heading-top  h3,
-.interactive-enabled.heading-top  h4,
-.interactive-enabled.heading-top  h5,
-.interactive-enabled.heading-top  h6,
-.interactive-enabled .foreground .image .mobile-top-title {
-  display: none;
-}
-
 .interactive-enabled .foreground.container .image {
   flex-direction: column;
 }
@@ -269,7 +259,17 @@
     width: 100%;
   }
 
-  .interactive-enabled.heading-top .foreground .image .mobile-top-title {
+  .interactive-enabled.mobile-heading-top  h1,
+  .interactive-enabled.mobile-heading-top  h2,
+  .interactive-enabled.mobile-heading-top  h3,
+  .interactive-enabled.mobile-heading-top  h4,
+  .interactive-enabled.mobile-heading-top  h5,
+  .interactive-enabled.mobile-heading-top  h6,
+  .interactive-enabled .foreground .image .mobile-heading-top {
+    display: none;
+  }
+
+  .interactive-enabled.mobile-heading-top .foreground .image .mobile-heading-top {
     display: block;
     margin-bottom: 24px;
     font-size: 36px;
@@ -279,13 +279,8 @@
 }
 
 @media screen and (min-width: 600px) {
-  .interactive-enabled.heading-top  h1,
-  .interactive-enabled.heading-top  h2,
-  .interactive-enabled.heading-top  h3,
-  .interactive-enabled.heading-top  h4,
-  .interactive-enabled.heading-top  h5,
-  .interactive-enabled.heading-top  h6 {
-    display: block;
+  .interactive-enabled .foreground .image .mobile-heading-top {
+    display: none;
   }
 
   .interactive-enabled .foreground.container .image > p:first-child {

diff --git a/creativecloud/blocks/interactive-metadata/interactive-metadata.js b/creativecloud/blocks/interactive-metadata/interactive-metadata.js
@@ -196,11 +196,11 @@ function decorateEnticementArrow(aa) {
 }
 
 function decorateMobileHeading(intEnb) {
-  if (!intEnb.classList.contains('heading-top')) return;
+  if (!intEnb.classList.contains('mobile-heading-top')) return;
   const h = intEnb.querySelector('.text').querySelector('h1, h2, h3, h4, h5, h6');
   if (!h) return;
   const htxt = h.textContent;
-  const hTxtTop = createTag('div', { class: 'mobile-top-title' }, htxt);
+  const hTxtTop = createTag('div', { class: 'mobile-heading-top' }, htxt);
   intEnb.querySelector('.image').prepend(hTxtTop);
 }