Bug 870502: Fix contribute form JS and tidy up newsletter CSS

* Tidy up some more newsletter CSS
* Address minor JS review comments

bedrock/firefox/templates/firefox/os/index.html

@@ -408,16 +408,6 @@
   <div id="email-form-wrapper">
     <div id="email-form-content" class="modal-content">
       <div class="content">
-        <div id="footer-email-thanks">
-          <h3>{{ _('Thanks! Please check your inbox to confirm your subscription.') }}</h3>
-          <p>
-            {% trans %}
-              You'll receive an email from mozilla@e.mozilla.org to confirm your subscription.
-              If you don't see it, check your spam filter. You must confirm your subscription to receive our newsletter.
-            {% endtrans %}
-          </p>
-        </div>
-
         {{ email_newsletter_form('mozilla-and-you,os', _('Sign up for our monthly newsletter')) }}
       </div>
     </div>

bedrock/mozorg/templates/mozorg/contribute.html

@@ -64,12 +64,12 @@
         <div id="footer-email-errors" class="hidden">
           <ul class="errorlist"></ul>
         </div>
-        <form action="{{ url('newsletter.subscribe') }}" method="post" id="newsletter-form">
+        <form id="newsletter-form" class="newsletter-form footer-newsletter-form" action="{{ url('newsletter.subscribe') }}" method="post">
           {{ newsletter_form.newsletters|safe }}
           <input type="hidden" name="source_url" value="{{ request.build_absolute_uri() }}">
           <p>{{_('Sign up for a weekly newsletter that is full of community news and contribution opportunities.')}}</p>
           <div class="field field-email">{{ field_with_attrs(newsletter_form.email, placeholder=_('YOUR EMAIL HERE'))|safe }}</div>
-          <div class="form-details">
+          <div id="form-details">
             <div class="field field-country">{{ newsletter_form.country|safe }}</div>
             <div class="field field-format">{{ newsletter_form.fmt|safe }}</div>
             <div class="field field-privacy">{{ newsletter_form.privacy|safe }}</div>
@@ -78,7 +78,7 @@
           <div class="field form-submit"><input id="footer_email_submit" name="test-submit" type="submit" value="{{_('Subscribe')}}" class="button"></div>
           <div id="newsletter-spinner" class="hidden"></div>
         </form>
-        <div id="newsletter-form-thankyou" class="thank billboard newsletter-form">
+        <div id="newsletter-form-thankyou" class="thank newsletter-form">
           {{ email_form_thankyou() }}
         </div>
       </aside>

media/css/firefox/australis/australis-page-common.less

@@ -334,23 +334,24 @@ header[role="banner"],
     }
 }
 
-#newsletter-form-thankyou {
+.newsletter-form.thank {
     padding: @baseLine;
-    width: 940px;
-}
-
-#footer-email-errors .errorlist {
-    padding: (@baseLine / 2) @baseLine;
+    margin: (@baseLine * 2) auto;
     width: 940px;
 }
 
 #whatsnew {
     .footer-newsletter-form,
-    #newsletter-form-thankyou {
+    .newsletter-form.thank {
         margin: @baseLine auto 170px auto;
     }
 }
 
+#footer-email-errors .errorlist {
+    padding: (@baseLine / 2) @baseLine;
+    width: 940px;
+}
+
 footer[role="contentinfo"] {
     width: 980px;
     margin: (@baseLine * 2) auto (@baseLine * 4) auto;

media/css/firefox/desktop/common.less

@@ -87,8 +87,8 @@ html[dir="rtl"] {
     z-index: 1;
 }
 
-#newsletter-form,
-#newsletter-form-thankyou {
+.footer-newsletter-form,
+.newsletter-form.thank {
     background: transparent;
     border-bottom: none;
     box-shadow: none;
@@ -98,11 +98,6 @@ html[dir="rtl"] {
     a:visited {
         color: #fff;
     }
-
-    #subscribe-wrapper.columned .form-contents {
-        float: none;
-        width: auto;
-    }
 }
 
 //override JS inline color style for spin.js

media/css/firefox/mobile-sms.less

@@ -230,12 +230,8 @@
   height: auto;
 }
 
-#newsletter-form-thankyou {
-    display: none;
-}
-
-#newsletter-form,
-#newsletter-form-thankyou {
+.footer-newsletter-form,
+.newsletter-form.thank {
   background: #fafafa;
   overflow: hidden;
   clear: both;
@@ -334,9 +330,9 @@ a.mozilla-video-control-overlay .label img {
     padding-top: 0;
   }
 
-  #newsletter-form,
-  #newsletter-form-thankyou {
-    margin: 0 -10px;
+  .footer-newsletter-form,
+  .newsletter-form.thank {
+    margin: (@baseLine * 2) -10px 0;
     padding: 15px;
   }
 

media/css/firefox/os/firefox-os.less

@@ -1278,10 +1278,6 @@ html[lang="pl"] {
   }
 }
 
-#footer-email-thanks {
-  display: none;
-}
-
 .footer-newsletter-form {
   width: @widthDesktop - (@gridGutterWidth * 4);
   margin: 0 auto @baseLine auto;
@@ -1294,16 +1290,16 @@ html[lang="pl"] {
   }
 }
 
+.newsletter-form.thank {
+  border: none;
+  box-shadow: none;
+}
+
 #footer-email-errors {
   width: @widthDesktop - (@gridGutterWidth * 2);
   margin: 0 auto;
 }
 
-#newsletter-form-thankyou {
-    border: none;
-    box-shadow: none;
-}
-
 // JS specific styles for signup and get phone modal content
 .js {
   #signup-toggle-icon {
@@ -1601,7 +1597,7 @@ html[lang="en-US"].js {
   }
   .footer-newsletter-form,
   #footer-email-errors,
-  #newsletter-form-thankyou {
+  .newsletter-form.thank {
     width: @widthTablet - (@gridGutterWidth * 6);
   }
   .js {

media/css/mozorg/contribute.less

@@ -186,6 +186,8 @@ header {
 }
 
 #newsletter-form {
+    position: relative;
+
     .field {
         padding: 5px 0;
         margin-bottom: 10px;
@@ -199,6 +201,10 @@ header {
     }
 }
 
+#footer-email-errors {
+    margin-bottom: @baseLine;
+}
+
 .js #newsletter-form .form-details {
     display: none;
 }

media/css/mozorg/home.less

@@ -375,7 +375,7 @@
     background-color: #fff !important;
 }
 
-#newsletter-form-thankyou {
+.newsletter-form.thank {
     h3 {
         color: #fff;
         text-shadow: none;

media/css/sandstone/oldIE.less

@@ -576,15 +576,14 @@ img {
     }
 }
 
-.footer-newsletter-form.thank h3 {
-    width: auto;
-    margin: auto;
-    padding: 0;
-    float: none;
-}
-
-#newsletter-form-thankyou {
+.footer-newsletter-form.thank {
     display: none;
+    h3 {
+        width: auto;
+        margin: auto;
+        padding: 0;
+        float: none;
+    }
 }
 
 .js {

media/css/sandstone/sandstone-resp.less

@@ -870,6 +870,7 @@ nav.menu-bar {
 }
 
 .newsletter-form.thank {
+    display: none;
     overflow: hidden;
     h3 {
         width: auto;
@@ -904,10 +905,6 @@ nav.menu-bar {
     padding-bottom: @baseLine / 2;
 }
 
-#newsletter-form-thankyou {
-    display: none;
-}
-
 #newsletter-spinner {
     display: none;
     position: absolute;

media/css/sandstone/sandstone.less

@@ -613,6 +613,7 @@ nav.menu-bar {
 }
 
 .newsletter-form.thank {
+    display: none;
     overflow: hidden;
     h3 {
         width: auto;
@@ -647,10 +648,6 @@ nav.menu-bar {
     padding-bottom: @baseLine / 2;
 }
 
-#newsletter-form-thankyou {
-    display: none;
-}
-
 #newsletter-spinner {
     display: none;
     position: absolute;

media/js/mozorg/contribute-faces.js

@@ -119,11 +119,6 @@
         }
     });
 
-    $('#newsletter-form input, #newsletter-form select').focus(function() {
-        $('#newsletter-form .form-details').slideDown();
-    });
-
-
     // Track interest form submissions
     $('#help-form').on('submit', function(e) {
         e.preventDefault();
@@ -136,18 +131,6 @@
         );
     });
 
-    // Track newsletter form submissions
-    $('#newsletter-form').on('submit', function(e) {
-        e.preventDefault();
-        var $form = $(this);
-        $form.unbind('submit');
-
-        gaTrack(
-            ['_trackEvent', '/contribute Page Interactions', 'submit', 'Newsletter Registration'],
-            function() { $form.submit(); }
-        );
-    });
-
     // Track opportunity links
     $('#opportunities a').on('click', function(e) {
         e.preventDefault();

media/js/newsletter/form.js

@@ -123,12 +123,12 @@ $(function () {
         $errorlist.empty();
 
         // have to collect data before disabling inputs
-        var data = $self.serialize();
+        var formData = $self.serialize();
         disable_form();
 
         $.ajax($self.attr('action'), {
             'method': 'post',
-            'data': data,
+            'data': formData,
             'dataType': 'json'
         }).done(function (data) {
             if (data.success) {
@@ -165,7 +165,6 @@ $(function () {
             $errorlist.append('<li>An unknown error occurred. Please try again later</li>');
             $errors.show();
             enable_form();
-            $self.removeClass('loading');
         });
 
         function disable_form() {