Bug 870502: Add newsletter thank you CSS animation

mozilla · Aug 20, 2014 · c40970e · c40970e
1 parent 0af9f8a
commit c40970e
Show file tree

Hide file tree

Showing 18 changed files with 324 additions and 161 deletions.
diff --git a/bedrock/base/templates/macros.html b/bedrock/base/templates/macros.html
@@ -5,8 +5,8 @@
 {% macro mozorg_newsletter_form() %}
   {# Note: This form differs from the email_newsletter_form() that appears on most pages;
     The global form submits to bedrock, this one submits to sendto.mozilla.org #}
-<aside class="billboard footer-newsletter-form newsletter-form">
-  <form id="mozorg-newsletter-form" method="post" action="https://sendto.mozilla.org/page/s/sign-up-for-mozilla">
+<aside>
+  <form id="mozorg-newsletter-form" class="billboard footer-newsletter-form newsletter-form" method="post" action="https://sendto.mozilla.org/page/s/sign-up-for-mozilla">
     <h3>{{ _('Get Mozilla updates') }}</h3>
 
     <div class="form-contents">

diff --git a/bedrock/mozorg/templates/mozorg/home.html b/bedrock/mozorg/templates/mozorg/home.html
@@ -267,11 +267,13 @@ <h4><strong>{{_('Different by&nbsp;design')}}</strong></h4>
   <section class="extra">
     <div class="container">
 
+    <div id="newsletter-container">
       {% if request.locale != 'en-US' %}
         {{ email_newsletter_form() }}
       {% else %}
         {{ mozorg_newsletter_form() }}
       {% endif %}
+    </div>
 
     {% if request.locale in settings.PRESS_BLOGS %}
 

diff --git a/bedrock/newsletter/templates/newsletter/includes/form.html b/bedrock/newsletter/templates/newsletter/includes/form.html
@@ -74,12 +74,13 @@ <h3>{{ title|d(_('Get Firefox news'), true) }}</h3>
     <div class="form-submit">
       <input type="submit" id="footer_email_submit"
              value="{{ _('Sign me up') }} »" class="button">
-      <div id="newsletter-spinner" class="hidden">LOADING</div>
 
       <p class="form-details">
         <small>{{ _('We will only send you Mozilla-related information.') }}</small>
       </p>
     </div>
+
+    <div id="newsletter-spinner" class="hidden"></div>
   </form>
   <div id="newsletter-form-thankyou" class="thank billboard newsletter-form">
     {{ email_form_thankyou() }}

diff --git a/bedrock/settings/base.py b/bedrock/settings/base.py
@@ -439,7 +439,6 @@ def JINJA_CONFIG():
         ),
         'common': (
             'js/libs/jquery-1.11.0.min.js',
-            'js/libs/jquery.velocity.min.js',
             'js/libs/spin.min.js',
             'js/base/global.js',
             'js/newsletter/form.js',
@@ -448,7 +447,6 @@ def JINJA_CONFIG():
         ),
         'common-resp': (
             'js/libs/jquery-1.11.0.min.js',
-            'js/libs/jquery.velocity.min.js',
             'js/libs/spin.min.js',
             'js/base/global.js',
             'js/newsletter/form.js',
@@ -489,7 +487,6 @@ def JINJA_CONFIG():
         ),
         'firefox': (
             'js/libs/jquery-1.11.0.min.js',
-            'js/libs/jquery.velocity.min.js',
             'js/libs/spin.min.js',
             'js/base/global.js',
             'js/newsletter/form.js',
@@ -503,7 +500,6 @@ def JINJA_CONFIG():
         ),
         'firefox-resp': (
             'js/libs/jquery-1.11.0.min.js',
-            'js/libs/jquery.velocity.min.js',
             'js/libs/spin.min.js',
             'js/base/global.js',
             'js/newsletter/form.js',
@@ -650,7 +646,6 @@ def JINJA_CONFIG():
         ),
         'mozorg-resp': (
             'js/libs/jquery-1.11.0.min.js',
-            'js/libs/jquery.velocity.min.js',
             'js/libs/spin.min.js',
             'js/base/global.js',
             'js/newsletter/form.js',
@@ -754,7 +749,6 @@ def JINJA_CONFIG():
         ),
         'newsletter_form': (
             'js/libs/jquery-1.11.0.min.js',
-            'js/libs/jquery.velocity.min.js',
             'js/libs/spin.min.js',
             'js/newsletter/form.js',
         ),

diff --git a/media/css/firefox/australis/australis-page-common.less b/media/css/firefox/australis/australis-page-common.less
@@ -332,15 +332,23 @@ header[role="banner"],
         padding: .4em 1em;
         font-size: 18px;
     }
-    &.thank {
-        h3 {
-            margin-bottom: @baseLine;
-        }
-    }
 }
 
-#whatsnew .footer-newsletter-form {
-    margin: @baseLine auto 170px auto;
+#newsletter-form-thankyou {
+    padding: @baseLine;
+    width: 940px;
+}
+
+#footer-email-errors .errorlist {
+    padding: (@baseLine / 2) @baseLine;
+    width: 940px;
+}
+
+#whatsnew {
+    .footer-newsletter-form,
+    #newsletter-form-thankyou {
+        margin: @baseLine auto 170px auto;
+    }
 }
 
 footer[role="contentinfo"] {

diff --git a/media/css/firefox/desktop/common.less b/media/css/firefox/desktop/common.less
@@ -87,18 +87,29 @@ html[dir="rtl"] {
     z-index: 1;
 }
 
-.footer-newsletter-form {
+#newsletter-form,
+#newsletter-form-thankyou {
     background: transparent;
     border-bottom: none;
     box-shadow: none;
     padding: 0;
 
+    a:link,
+    a:visited {
+        color: #fff;
+    }
+
     #subscribe-wrapper.columned .form-contents {
         float: none;
         width: auto;
     }
 }
 
+//override JS inline color style for spin.js
+#newsletter-spinner .spinner > div > div {
+    background-color: #fff !important;
+}
+
 // force dl button links to be white in blue bg footer
 #subscribe-download-wrapper .download-button small.download-other {
     color: #fff;

diff --git a/media/css/firefox/mobile-sms.less b/media/css/firefox/mobile-sms.less
@@ -230,7 +230,12 @@
   height: auto;
 }
 
-.footer-newsletter-form {
+#newsletter-form-thankyou {
+    display: none;
+}
+
+#newsletter-form,
+#newsletter-form-thankyou {
   background: #fafafa;
   overflow: hidden;
   clear: both;
@@ -329,7 +334,8 @@ a.mozilla-video-control-overlay .label img {
     padding-top: 0;
   }
 
-  .footer-newsletter-form {
+  #newsletter-form,
+  #newsletter-form-thankyou {
     margin: 0 -10px;
     padding: 15px;
   }

diff --git a/media/css/firefox/os/firefox-os.less b/media/css/firefox/os/firefox-os.less
@@ -1299,6 +1299,11 @@ html[lang="pl"] {
   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 {
@@ -1594,11 +1599,10 @@ html[lang="en-US"].js {
       width: 400px;
     }
   }
-  .footer-newsletter-form {
-    width: @widthTablet - (@gridGutterWidth * 4);
-  }
-  #footer-email-errors {
-    width: @widthTablet;
+  .footer-newsletter-form,
+  #footer-email-errors,
+  #newsletter-form-thankyou {
+    width: @widthTablet - (@gridGutterWidth * 6);
   }
   .js {
     #get-firefox-os.scroller-on {
@@ -1894,7 +1898,7 @@ html[lang="en-US"].js {
     width: @widthMobileLandscape - (@gridGutterWidth * 2);
   }
   #footer-email-errors {
-    width: @widthMobileLandscape - @gridGutterWidth;
+    width: auto;
   }
   .js {
     .modal-content {
@@ -2106,7 +2110,7 @@ html[lang="en-US"].js {
     width: @widthMobile - (@gridGutterWidth * 2);
   }
   #footer-email-errors {
-    width: @widthMobile - @gridGutterWidth;
+    width: auto;
   }
   .bg-soccer {
     background: url('/media/img/firefox/os/bg/480/soccer.jpg') no-repeat center center;

diff --git a/media/css/mozorg/contact-spaces.less b/media/css/mozorg/contact-spaces.less
@@ -63,6 +63,12 @@
     margin-right: auto;
 }
 
+#footer-email-errors {
+    width: @widthDesktop;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 #map {
     background: rgba(149, 211, 241, .5);
     width: 100%;
@@ -604,6 +610,10 @@
         width: @widthTablet - (@gridGutterWidth * 2);
     }
 
+    #footer-email-errors {
+        width: @widthTablet;
+    }
+
     .page-head {
         padding-top: 20px;
 
@@ -685,6 +695,10 @@
         width: @widthMobile - (@gridGutterWidth * 2);
     }
 
+    #footer-email-errors {
+        width: @widthMobile;
+    }
+
     #masthead,
     .newsletter-form {
         width: @widthMobile - @gridGutterWidth;
@@ -833,6 +847,10 @@
         width: @widthMobileLandscape - @gridGutterWidth;
     }
 
+    #footer-email-errors {
+        width: @widthMobileLandscape;
+    }
+
     .entry-space .card {
         padding-bottom: 235px;
 

diff --git a/media/css/mozorg/home.less b/media/css/mozorg/home.less
@@ -316,18 +316,28 @@
     }
 }
 
-
+#newsletter-container {
+    .span(4);
+    float: right;
+}
 
 // @Newsletter form
 .newsletter-form {
-    .span(4);
-    float: right;
+    width: auto;
     background: transparent;
     padding: 0;
     border: 0;
     box-shadow: none;
 }
 
+#footer-email-errors {
+    width: auto;
+
+    .errorlist {
+        margin-bottom: @baseLine;
+    }
+}
+
 .footer-newsletter-form {
     h3 {
         font-size: 34px;
@@ -360,8 +370,20 @@
     }
 }
 
+//override JS inline color style for spin.js
+#newsletter-spinner .spinner > div > div {
+    background-color: #fff !important;
+}
+
+#newsletter-form-thankyou {
+    h3 {
+        color: #fff;
+        text-shadow: none;
+    }
+}
+
 .html-rtl {
-    .newsletter-form {
+    #newsletter-container {
         float: left;
     }
 
@@ -592,7 +614,6 @@
 
     #masthead,
     .container,
-    .newsletter-form,
     .mission,
     .pillars {
         width: (@widthTablet - (@gridGutterWidth * 2));
@@ -648,12 +669,12 @@
         }
     }
 
-    .extra .newsletter-form {
+    #newsletter-container {
         .span_narrow(5);
         float: right;
     }
 
-    .html-rtl .extra .newsletter-form {
+    .html-rtl  #newsletter-container {
         float: left;
     }
 
@@ -695,7 +716,6 @@
 
     #masthead,
     .container,
-    .newsletter-form,
     .pillars {
         width: (@widthMobile - @gridGutterWidth);
     }
@@ -824,7 +844,7 @@
         margin: 0 10px @baseLine;
     }
 
-    .extra .newsletter-form {
+    #newsletter-container {
         width: auto;
         float: none;
         margin: 0 10px @baseLine;