[fix bug 1290313] update about page newsletter form

* Remove the photo mosaic from /about and /mission.
* Delete mosaic assets.
* Update tests.

bedrock/base/templates/base-resp.html

@@ -139,8 +139,6 @@
         </header>
       {% endblock %}
 
-      {% block mosaic %}{% endblock %}
-
       {% block messages %}
         {% if messages %}
           <ul class="messagelist billboard">

bedrock/mozorg/templates/mozorg/about.html

@@ -19,17 +19,11 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'mosaic_video' %}
-{% endblock %}
-
-{% block mosaic %}
-{% include "mozorg/mosaic-grid.html" %}
+  {% javascript 'about_video' %}
 {% endblock %}
 
 {% block content %}
-
 <article id="main-content">
-
   <h1 class="title-shadow-box">{{ _('Get to know Mozilla') }}</h1>
 
   <div class="content-wrapper">
@@ -125,9 +119,9 @@
   <aside id="newsletter-subscribe">
     <div class="content container">
     {% if LANG.startswith('en-') %}
-      {{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Love the Web?'), subtitle=_('Get the Mozilla newsletter and help us keep it open and free.'), button_class='light') }}
+      {{ email_newsletter_form(newsletters='mozilla-foundation', title=_('Sign up. Read up.<br> Make a difference.'), subtitle=_('Get the Mozilla newsletter and help us keep the Web free and open.'), button_class='red') }}
     {% else %}
-      {{ email_newsletter_form(button_class='light') }}
+      {{ email_newsletter_form(button_class='red') }}
     {% endif %}
     </div>
   </aside>

bedrock/mozorg/templates/mozorg/about/forums/cancellation.html

@@ -12,7 +12,7 @@
 {% endblock %}
 
 {% block article %}
-<h1 class="title-shadow-box">{{ self.page_title() }}</h1>
+<h1>{{ self.page_title() }}</h1>
 
 
 <h2 id="support-policy">{{ _('Support Newsgroups Cancellation Policy (mozilla.support.*)') }}</h2>

bedrock/mozorg/templates/mozorg/about/forums/etiquette.html

@@ -12,7 +12,7 @@
 {% endblock %}
 
 {% block article %}
-<h1 class="title-shadow-box">{{ self.page_title() }}</h1>
+<h1>{{ self.page_title() }}</h1>
 
 
 <h2 id="ground-rules">Ground Rules</h2>

bedrock/mozorg/templates/mozorg/about/forums/forums.html

@@ -12,7 +12,7 @@
 {% endblock %}
 
 {% block article %}
-<h1 class="title-shadow-box">{{ self.page_title() }}</h1>
+<h1>{{ self.page_title() }}</h1>
 
 <section class="lead-content">
 

bedrock/mozorg/templates/mozorg/about/manifesto.html

@@ -310,14 +310,14 @@
           {{ email_newsletter_form() }}
         </section>
       </div>
-      <div id="mosaic-group-1" class="ri-grid" data-loading="{{ static('img/mosaic/loading.gif') }}">
+      <div id="mosaic-group-1" class="ri-grid" data-loading="{{ static('img/mozorg/about/manifesto/mosaic/loading.gif') }}">
         <ul>
         {% for i in range(1, 40)|list|shuffle %}
           <li><a><img data-src="{{ static('img/mozorg/about/manifesto/mosaic/' ~ '%03d'|format(i) ~ '.jpg') }}" alt=""></a></li>
         {% endfor %}
         </ul>
       </div>
-      <div id="mosaic-group-2" class="ri-grid" data-loading="{{ static('img/mosaic/loading.gif') }}">
+      <div id="mosaic-group-2" class="ri-grid" data-loading="{{ static('img/mozorg/about/manifesto/mosaic/loading.gif') }}">
         <ul>
         {# The grid needs 36 + extra images to rotate. That's why there are some duplicated images. #}
         {% for i in range(30, 69)|list|shuffle %}

bedrock/mozorg/templates/mozorg/mission.html

@@ -13,7 +13,7 @@
 {% endblock %}
 
 {% block js %}
-  {% javascript 'mosaic_video' %}
+  {% javascript 'about_video' %}
 {% endblock %}
 
 {% block optimizely %}
@@ -22,10 +22,6 @@
   {% endif %}
 {% endblock %}
 
-{% block mosaic %}
-  {% include "mozorg/mosaic-grid.html" %}
-{% endblock %}
-
 {% block content %}
 <article id="main-content">
   <h1 class="title-shadow-box">{{ _('We’re building a better Internet') }}</h1>

bedrock/mozorg/templates/mozorg/mosaic-grid.html

@@ -1,11 +0,0 @@
-{# This Source Code Form is subject to the terms of the Mozilla Public
- # License, v. 2.0. If a copy of the MPL was not distributed with this
- # file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}
-
-<div id="mosaic" class="ri-grid" data-loading="{{ static('img/mosaic/loading.gif') }}">
-  <ul>
-  {% for i in range(1, 67) %}
-    <li><a><img src="{{ static('img/mosaic/' ~ '%03d'|format(i) ~ '.jpg') }}" alt=""></a></li>
-  {% endfor %}
-  </ul>
-</div>

bedrock/settings/static_media.py

@@ -11,9 +11,8 @@ PIPELINE_CSS = {
     'about': {
         'source_filenames': (
             'css/base/mozilla-video-poster.less',
-            'css/mozorg/about-base.less',
-            'css/mozorg/mosaic.less',
             'css/newsletter/moznewsletter-subscribe.less',
+            'css/mozorg/about-base.less',
         ),
         'output_filename': 'css/about-bundle.css',
     },
@@ -671,7 +670,6 @@ PIPELINE_CSS = {
     'mission': {
         'source_filenames': (
             'css/base/mozilla-video-poster.less',
-            'css/mozorg/mosaic.less',
             'css/mozorg/mission.less',
         ),
         'output_filename': 'css/mission-bundle.css',
@@ -1479,15 +1477,12 @@ PIPELINE_JS = {
         ),
         'output_filename': 'js/manifesto-bundle.js',
     },
-    'mosaic_video': {
+    'about_video': {
         'source_filenames': (
             'js/base/mozilla-video-poster.js',
-            'js/libs/modernizr.custom.26887.js',
-            'js/libs/jquery.transit.min.js',
-            'js/libs/jquery.gridrotator.js',
             'js/mozorg/about-video.js',
         ),
-        'output_filename': 'js/mosaic_video-bundle.js',
+        'output_filename': 'js/about_video-bundle.js',
     },
     'newsletter-mozilla': {
         'source_filenames': (

media/css/mozorg/about-base.less

@@ -30,17 +30,16 @@
 }
 
 #main-content {
+    .box-shadow(0 0 0 1px #fff inset);
+    .clearfix;
     .open-sans;
+    background: #fff;
+    border-bottom: 1px solid #ddd;
     display: block;
     margin: 100px auto @baseLine;
     padding-left: @gridGutterWidth;
     padding-right: @gridGutterWidth;
     position: relative;
-    .clearfix;
-    @shadow: 0 0 0 1px #fff inset;
-    .box-shadow(@shadow);
-    background: #fff;
-    border-bottom: 1px solid #ddd;
 
     .title-shadow-box {
         margin-right: 490px;
@@ -76,21 +75,24 @@
     .video {
         .span(6);
         float: right;
-        margin-top: -35px;
         margin-bottom: @baseLine;
+
         .moz-video-container video {
             width: 100%;
             height: auto;
             margin:0 auto;
         }
+
         p {
             margin: 10px 10px @baseLine;
             .font-size(.857em);
             font-style: italic;
         }
+
         .placeholder-img {
             margin-bottom: @baseLine;
         }
+
         .moz-video-button {
             background-image: url('/media/img/mozorg/about/poster-i-am.jpg');
         }
@@ -147,6 +149,69 @@ html[dir="rtl"] {
     }
 }
 
+// Newsletter form
+#newsletter-subscribe {
+    background: transparent none;
+    color: @textColorPrimary;
+    margin-top: 0;
+
+    .form-title {
+        background: transparent none;
+        position: relative;
+        text-align: center;
+
+        h3 {
+            .font-size(28px);
+            color: @mozillaRed;
+            font-weight: bold;
+            line-height: 1.25;
+        }
+
+        h4 {
+            .font-size(18px);
+            .open-sans;
+            color: @textColorSecondary;
+            line-height: 1.25;
+        }
+
+        &:before {
+            background: @mozillaRed url('/media/img/newsletter/mozorg-newsletter.svg') center center no-repeat;
+            .background-size(100px, 100px);
+            border-radius: 100%;
+            content: '';
+            display: block;
+            height: 150px;
+            left: 0;
+            position: absolute;
+            top: 0;
+            width: 150px;
+        }
+    }
+
+    a:link,
+    a:visited {
+        color: @linkBlue;
+    }
+
+    a:hover,
+    a:focus {
+        color: @linkBlueHover;
+    }
+
+    input[type='email'] {
+        border: 1px solid @borderColor;
+    }
+
+    #newsletter-form-thankyou {
+        color: @textColorPrimary;
+
+        h3 {
+            color: @textColorPrimary;
+        }
+    }
+}
+
+
 // Leadership
 .about-leadership .main-column h2 {
     padding-bottom: 15px;
@@ -294,6 +359,22 @@ html[dir="rtl"] {
 
     }
 
+    #newsletter-subscribe .form-title {
+        h3 {
+            .font-size(24px);
+        }
+
+        h4 {
+            .font-size(16px);
+        }
+
+        &:before {
+            width: 120px;
+            height: 120px;
+            .background-size(80px, 80px);
+        }
+    }
+
     html[dir="rtl"] {
         #main-content .title-shadow-box {
             margin-right: 0;
@@ -366,6 +447,16 @@ html[dir="rtl"] {
 
     }
 
+    #newsletter-subscribe .form-title {
+        padding-top: 150px;
+
+        &:before {
+            left: 50%;
+            top: -20px;
+            margin-left: -75px;
+        }
+    }
+
     html[dir="rtl"] {
         #main-content .title-shadow-box {
             margin-left: 0;

media/css/mozorg/mosaic.less

@@ -1,85 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-
-#mosaic {
-  width: 100%;
-  clear: both;
-}
-
-.js #main-content {
-  margin-top: 0;
-
-  .title-shadow-box {
-    margin-top: -95px;
-  }
-}
-
-.ri-grid {
-  margin: 0 auto;
-  position: relative;
-  height: auto;
-}
-
-.ri-grid-loading {
-  width: 100px;
-  height: 100px;
-  background: url(/media/img/mosaic/loading.gif) no-repeat center center;
-}
-
-.ri-grid ul {
-  list-style: none;
-  display: block;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-.ri-grid ul:before,
-.ri-grid ul:after {
-  content: '';
-  display: table;
-}
-
-.ri-grid ul:after {
-  clear: both;
-}
-
-.ri-grid ul {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-} 
-
-.ri-grid ul li {
-  -webkit-perspective: 400px;
-  -moz-perspective: 400px;
-  -o-perspective: 400px;
-  -ms-perspective: 400px;
-  perspective: 400px; 
-  margin: 0;
-  padding: 0;
-  float: left;
-  position: relative;
-  display: block;
-  overflow: hidden;
-  background: #000;
-}
-
-.ri-grid ul li a {
-  display: block;
-  outline: none;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  -webkit-background-size: 100% 100%;
-  -moz-background-size: 100% 100%;
-  -o-background-size: 100% 100%;
-  background-size: 100% 100%;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-color: #333;
-  -webkit-box-sizing: content-box;
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-}

media/css/sandstone/buttons.less

@@ -94,6 +94,17 @@ button.form-button {
     &.general {
         .font-size(@largeFontSize);
     }
+
+    &.red {
+        background-color: @mozRed;
+        color: @light;
+        border: 2px solid @mozRedBorder;
+
+        &:hover,
+        &:focus {
+            background-color: @mozRedHover;
+        }
+    }
 }
 
 /* All buttons not in a form context such as CTA and download buttons */

tests/functional/test_about.py

@@ -7,13 +7,6 @@ import pytest
 from pages.about import AboutPage
 
 
-@pytest.mark.smoke
-@pytest.mark.nondestructive
-def test_is_mosaic_displayed(base_url, selenium):
-    page = AboutPage(selenium, base_url).open()
-    assert page.is_mosaic_displayed
-
-
 @pytest.mark.smoke
 @pytest.mark.nondestructive
 def test_play_video(base_url, selenium):

tests/functional/test_mission.py

@@ -7,13 +7,6 @@ import pytest
 from pages.mission import MissionPage
 
 
-@pytest.mark.smoke
-@pytest.mark.nondestructive
-def test_is_mosaic_displayed(base_url, selenium):
-    page = MissionPage(selenium, base_url).open()
-    assert page.is_mosaic_displayed
-
-
 @pytest.mark.smoke
 @pytest.mark.nondestructive
 def test_play_video(base_url, selenium):

tests/pages/about.py

@@ -11,14 +11,9 @@ class AboutPage(BasePage):
 
     URL_TEMPLATE = '/{locale}/about'
 
-    _mosaic_locator = (By.ID, 'mosaic')
     _video_overlay_locator = (By.CSS_SELECTOR, '.moz-video-container .moz-video-button')
     _video_locator = (By.CSS_SELECTOR, '.moz-video-container video')
 
-    @property
-    def is_mosaic_displayed(self):
-        return self.is_element_displayed(*self._mosaic_locator)
-
     @property
     def is_video_overlay_displayed(self):
         return self.is_element_displayed(*self._video_overlay_locator)

tests/pages/mission.py

@@ -11,14 +11,9 @@ class MissionPage(BasePage):
 
     URL_TEMPLATE = '/{locale}/mission'
 
-    _mosaic_locator = (By.ID, 'mosaic')
     _video_overlay_locator = (By.CSS_SELECTOR, '.moz-video-container > .moz-video-button')
     _video_locator = (By.CSS_SELECTOR, '.moz-video-container > video')
 
-    @property
-    def is_mosaic_displayed(self):
-        return self.is_element_displayed(*self._mosaic_locator)
-
     @property
     def is_video_overlay_displayed(self):
         return self.is_element_displayed(*self._video_overlay_locator)