move firefly marquee specific css to different file

adobecom · Nov 20, 2023 · 02b7806 · 02b7806
1 parent 3dc9166
commit 02b7806
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 108 deletions.
diff --git a/creativecloud/blocks/interactive-marquee/interactive-marquee.js b/creativecloud/blocks/interactive-marquee/interactive-marquee.js
@@ -77,6 +77,7 @@ export default async function init(el) {
     case el.classList.contains('firefly'): {
       interactiveInit(el);
       loadStyle('/creativecloud/features/interactive-elements/interactive-elements.css');
+      loadStyle('/creativecloud/features/firefly/firefly-interactive.css');
       const { default: setInteractiveFirefly } = await import('../../features/firefly/firefly-interactive.js');
       setInteractiveFirefly(el);
       break;

diff --git a/creativecloud/features/firefly/firefly-interactive.css b/creativecloud/features/firefly/firefly-interactive.css
@@ -0,0 +1,113 @@
+.hide {
+  display: none
+}
+
+/* Firefly interactive components position */
+.firefly-prompt {
+  position: absolute;
+  top: 16px;
+  margin-left: 16px;
+  margin-right: 16px;
+}
+
+.genfill-promptbar {
+  position: absolute;
+  top: 24px;
+  margin-left: 16px;
+  height: 30px;
+  display: flex;
+}
+
+.interactive-marquee .media {
+  top: 72px;
+}
+
+@media screen and (min-width: 1200px) {
+  /* Firefly interactive components position */
+  .firefly-prompt {
+    top: 40px;
+    margin-left: 40px;
+    margin-right: 40px;
+  }
+
+  .genfill-promptbar {
+    top: 56px;
+    margin-left: 40px;
+    height: 50px;
+  }
+}
+
+@media (min-width: 600px) and (max-width: 1199px) {
+  /* Firefly interactive components position */
+  .firefly-prompt {
+    top: 32px;
+    margin-left: 32px;
+    margin-right: 32px;
+  }
+
+  .genfill-promptbar {
+    top: 40px;
+    margin-left: 32px;
+    height: 40px;
+  }
+
+  .firefly-selectortray {
+    top: 0;
+    margin-left: 42px;
+    margin-right: 42px;
+    width: 80%;
+  }
+
+  .interactive-marquee .text {
+    margin: 122px 0 0 auto;
+  }
+}
+
+@media (max-width: 600px) {
+  /* Selector Tray */
+  .firefly-selectortray {
+    min-width: 110%;
+    margin-left: -22px;
+    margin-right: 16px;
+    justify-content: center;
+    margin-top: -8px;
+  }
+
+  .interactive-marquee .text {
+    margin: 106px 0 0 auto;
+  }
+}
+
+/* Selector Tray position for firefly marquee */
+@media screen and (max-width: 1799px) and (min-width: 1650px) {
+  .firefly-selectortray {
+    top: 144px;
+    position: absolute;
+    right: calc(50% - 370px);
+  }
+}
+
+@media screen and (max-width: 1649px) and (min-width: 1438px) {
+  .firefly-selectortray {
+    top: 144px;
+    position: absolute;
+    right: calc(50% - 320px);
+  }
+}
+
+@media screen and (max-width: 1437px) and (min-width: 1200px) {
+  .firefly-selectortray {
+    top: 144px;
+    position: absolute;
+    right: calc(50% - 280px);
+  }
+}
+
+@media screen and (min-width: 1800px) {
+  .firefly-selectortray {
+    top: 144px;
+    position: absolute;
+    right: calc(50% - 407px);
+  }
+}
+
diff --git a/creativecloud/features/firefly/firefly-susi.js b/creativecloud/features/firefly/firefly-susi.js
@@ -5,7 +5,7 @@ const { getConfig } = await import(`${miloLibs}/utils/utils.js`);
 const config = getConfig();
 const fireflyprod = 'https://firefly.adobe.com';
 const fireflystage = 'https://firefly-stage.corp.adobe.com';
-const env = window.origin.includes(config.prodDomains[1]) ? 'prod' : 'stage';
+const env = window.origin.includes(config.prodDomains[0]) ? 'prod' : 'stage';
 
 export function redirectWithParam() {
   const url = new URL(window.location.href);

diff --git a/creativecloud/features/interactive-elements/interactive-elements.css b/creativecloud/features/interactive-elements/interactive-elements.css
@@ -1,27 +1,3 @@
-.hide {
-  display: none
-}
-
-/* Firefly interactive components position */
-.firefly-prompt {
-  position: absolute;
-  top: 16px;
-  margin-left: 16px;
-  margin-right: 16px;
-}
-
-.genfill-promptbar {
-  position: absolute;
-  top: 24px;
-  margin-left: 16px;
-  height: 30px;
-  display: flex;
-}
-
-.interactive-marquee .media {
-  top: 72px;
-}
-
 /* Prompt Bar */
 .promptbar {
   height: 30px;
@@ -177,19 +153,6 @@
 }
 
 @media screen and (min-width: 1200px) {
-  /* Firefly interactive components position */
-  .firefly-prompt {
-    top: 40px;
-    margin-left: 40px;
-    margin-right: 40px;
-  }
-
-  .genfill-promptbar {
-    top: 56px;
-    margin-left: 40px;
-    height: 50px;
-  }
-
   /* Prompt Bar */
   .promptbar {
     height: 50px;
@@ -276,26 +239,6 @@
 }
 
 @media (min-width: 600px) and (max-width: 1199px) {
-  /* Firefly interactive components position */
-  .firefly-prompt {
-    top: 32px;
-    margin-left: 32px;
-    margin-right: 32px;
-  }
-
-  .genfill-promptbar {
-    top: 40px;
-    margin-left: 32px;
-    height: 40px;
-  }
-
-  .firefly-selectortray {
-    top: 0;
-    margin-left: 42px;
-    margin-right: 42px;
-    width: 80%;
-  }
-
   /* Prompt Bar */
   .promptbar {
     height: 40px;
@@ -373,61 +316,11 @@
     text-align: center;
     width: 100%;
   }
-
-  .interactive-marquee .text {
-    margin: 122px 0 0 auto;
-  }
 }
 
 @media (max-width: 600px) {
-  /* Selector Tray */
-  .firefly-selectortray {
-    min-width: 110%;
-    margin-left: -22px;
-    margin-right: 16px;
-    justify-content: center;
-    margin-top: -8px;
-  }
-
   .button-text {
     text-align: center;
     width: 100%;
   }
-
-  .interactive-marquee .text {
-    margin: 106px 0 0 auto;
-  }
-}
-
-/* Selector Tray position for firefly marquee */
-@media screen and (max-width: 1799px) and (min-width: 1650px) {
-  .firefly-selectortray {
-    top: 144px;
-    position: absolute;
-    right: calc(50% - 370px);
-  }
-}
-
-@media screen and (max-width: 1649px) and (min-width: 1438px) {
-  .firefly-selectortray {
-    top: 144px;
-    position: absolute;
-    right: calc(50% - 320px);
-  }
-}
-
-@media screen and (max-width: 1437px) and (min-width: 1200px) {
-  .firefly-selectortray {
-    top: 144px;
-    position: absolute;
-    right: calc(50% - 280px);
-  }
-}
-
-@media screen and (min-width: 1800px) {
-  .firefly-selectortray {
-    top: 144px;
-    position: absolute;
-    right: calc(50% - 407px);
-  }
 }