Show footer newsletter details on email field focus (Fixes #15311) (#…

…15415)
mozilla · Oct 31, 2024 · d203fae · d203fae
1 parent 53f3613
commit d203fae
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/bedrock/newsletter/templates/newsletter/includes/form.html b/bedrock/newsletter/templates/newsletter/includes/form.html
@@ -66,6 +66,7 @@ <h4 class="mzp-c-newsletter-subtitle">{{ subtitle }}</h4>
       {{ field_with_attrs(form.email, placeholder=placeholder, class='mzp-js-email-field')|safe }}
 
       <div id="newsletter-details" class="mzp-c-newsletter-details">
+        <div class="mzp-c-newsletter-details-inner">
         {% if include_country %}
           {{ form.country.label_tag() }}
           <p>{{ form.country|safe }}</p>
@@ -96,6 +97,7 @@ <h4 class="mzp-c-newsletter-subtitle">{{ subtitle }}</h4>
             <input type="checkbox" id="privacy" name="privacy" required aria-required="true" data-testid="newsletter-privacy-checkbox"> {{ ftl('newsletter-form-im-okay-with-mozilla', url=url('privacy.notices.websites')) }}
           </label>
         </p>
+        </div>
       </div>
 
       <p class="mzp-c-form-submit">

diff --git a/media/css/m24/components/footer-newsletter.scss b/media/css/m24/components/footer-newsletter.scss
@@ -8,6 +8,12 @@ $max-footer-content-width: $content-max;
     border-bottom: 4px solid $m24-color-light-gray;
 }
 
+// hide details for JS users
+// (displayed when email field is focused)
+.js .mzp-c-newsletter-details {
+    @include hidden;
+}
+
 // newsletter form
 .moz24-newsletter-container {
     @include container;
@@ -179,7 +185,7 @@ $max-footer-content-width: $content-max;
         }
     }
 
-    .mzp-c-newsletter-details {
+    .mzp-c-newsletter-details-inner {
         max-width: 100%;
 
         @media(min-width: $screen-lg) {