Hide CSAT by default

Only display the CSAT if the script to handle its interactions was properly loaded (i.e. not blocked by an adblocker).
mozilla · Feb 23, 2022 · 0b41cb9 · 0b41cb9
1 parent fdf3ec3
commit 0b41cb9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/static/js/analytics.js b/static/js/analytics.js
@@ -130,9 +130,9 @@ function setSurveyedCookie() {
 function analyticsSurveyLogic() {
   const csatWrapperEl = document.querySelector(".js-csat-wrapper");
   if (!isGoogleAnalyticsAvailable()) {
-    csatWrapperEl.remove();
     return;
   }
+  csatWrapperEl.classList.add("is-visible");
 
   const csatQuestionEl = document.querySelector(".js-csat-question");
   const csatFollowupEl = document.querySelector(".js-csat-followup");

diff --git a/static/scss/partials/header.scss b/static/scss/partials/header.scss
@@ -435,12 +435,18 @@ header {
 }
 
 .c-csat-wrapper {
-    display: none;
     padding: $spacing-md 0;
     background-color: $color-purple-90;
     color: $color-white;
     position: relative;
     text-align: center;
+    display: none;
+
+    @media screen and #{$mq-md} {
+        &.is-visible {
+            display: flex;
+        }
+    }
 
     & > div {
         display: flex;
@@ -451,10 +457,6 @@ header {
         width: 100%;
     }
 
-    @media screen and #{$mq-md} {
-        display: flex;
-    }
-
     .is-hidden {
         display: none;
     }