[fix bug 1014680] Move Australis Onboarding Sync button above fold

bedrock/firefox/templates/firefox/australis/firstrun-tour.html

@@ -136,17 +136,19 @@
 {% endblock %}
 
 {% block sync_content %}
+  <div class="sync-content">
     <header>
       <h2>{{ _('Have Firefox on another device?') }}</h2>
       <p>{{ _('You don’t have to start over. Access your history, bookmarks and more.')}}</p>
     </header>
-    {% include 'firefox/includes/sync-animation.html' %}
-    <div class="sync-content">
-      <div class="sync-cta">
-        <button class="button">{{ _('Get started with Sync') }}</button>
-        <small>{{ _('Create an account from the menu panel') }}</small>
-      </div>
+    <div class="sync-cta">
+      <button class="button">{{ _('Get started with Sync') }}</button>
+      <small>{{ _('Create an account from the menu panel') }}</small>
     </div>
+  </div>
+  <div class="sync-anim-wrapper">
+    {% include 'firefox/includes/sync-animation.html' %}
+  </div>
 {% endblock %}
 
 {% block aside_content %}

bedrock/firefox/templates/firefox/australis/tour-base.html

@@ -60,23 +60,25 @@ data-has-tour="True"
       </section>
       <section class="share separator">
         <div class="inner-container">
-          <header>
-            <h2>{{ _('What kind of Web do you want?') }}</h2>
-            <p>{{ _('When you use Firefox, you help shape the future of the Web.')}}</p>
-          </header>
           <div class="share-icons">
             <div class="disc heart"></div>
             <div class="disc eye"></div>
             <div class="disc check"></div>
           </div>
-          <div class="share-cta">
-            <a href="https://webwewant.mozilla.org/#video" class="button more" target="_blank" title="{{ _('Opens new window') }}">
-              {{ _('Share your vision') }}
-            </a>
+          <div class="share-content">
+            <header>
+              <h2>{{ _('What kind of Web do you want?') }}</h2>
+              <p>{{ _('When you use Firefox, you help shape the future of the Web.')}}</p>
+            </header>
+            <div class="share-cta">
+              <a href="https://webwewant.mozilla.org/#video" class="button more" target="_blank" title="{{ _('Opens new window') }}">
+                {{ _('Share your vision') }}
+              </a>
+            </div>
           </div>
+          <div class="rays red"></div>
+          <div class="rays green"></div>
         </div>
-        <div class="rays red"></div>
-        <div class="rays green"></div>
       </section>
     </div>
     <aside class="separator">

bedrock/firefox/templates/firefox/australis/whatsnew-tour.html

@@ -141,17 +141,19 @@
 {% endblock %}
 
 {% block sync_content %}
+  <div class="sync-content">
     <header>
       <h2>{{ _('Keep your Firefox in Sync') }}</h2>
       <p>{{ _('Access your bookmarks, passwords and more from any device.')}}</p>
     </header>
-    {% include 'firefox/includes/sync-animation.html' %}
-    <div class="sync-content">
-      <div class="sync-cta">
-        <button class="button">{{ _('Get started with Sync') }}</button>
-        <small>{{ _('Create an account from the menu panel') }}</small>
-      </div>
+    <div class="sync-cta">
+      <button class="button">{{ _('Get started with Sync') }}</button>
+      <small>{{ _('Create an account from the menu panel') }}</small>
     </div>
+  </div>
+  <div class="sync-anim-wrapper">
+    {% include 'firefox/includes/sync-animation.html' %}
+  </div>
 {% endblock %}
 
 {% block aside_content %}

bedrock/settings/base.py

@@ -265,7 +265,7 @@ MINIFY_BUNDLES = {
             'css/firefox/australis/australis-ui-tour.less',
             'css/firefox/australis/australis-page-common.less',
             'css/firefox/sync-animation.less',
-            'css/firefox/australis/australis-page-parallel.less',
+            'css/firefox/australis/australis-page-stacked.less',
         ),
         'firefox_whatsnew': (
             'css/sandstone/video.less',

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

@@ -4,8 +4,14 @@
 
 @import "../../sandstone/sandstone.less";
 
+html,
+body {
+    height: 100%;
+}
+
 #outer-wrapper {
     overflow: hidden;
+    min-height: 100%;
 }
 
 #wrapper {
@@ -381,7 +387,7 @@ footer[role="contentinfo"] {
 html[dir="rtl"] {
     .sync button:before {
         margin-left: 0;
-         margin-right: -30px;
+        margin-right: -30px;
     }
 }
 

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

@@ -0,0 +1,175 @@
+// 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/.
+
+.main-container {
+    display: table;
+    width: 100%;
+    margin: 0 auto 20px auto;
+    border-spacing: 20px;
+    p {
+        width: 80%;
+        margin: 20px auto;
+    }
+}
+
+.sync {
+    display: table-row;
+    padding: 20px;
+    width: 100%;
+    header {
+        margin-top: 30px;
+    }
+    .inner-container {
+        padding: 20px;
+        overflow: hidden;
+    }
+}
+
+.sync-content {
+    float: left;
+    width: 440px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.sync-anim-wrapper {
+    position: relative;
+    float: right;
+    width: 440px;
+    margin: 20px 0 20px 0;
+}
+
+.sync-anim {
+    margin: 0 auto;
+}
+
+.sync-cta {
+    margin-bottom: 20px;
+}
+
+.hide-sync {
+    .sync {
+        display: none;
+    }
+    .share {
+        display: table-row;
+    }
+}
+
+.share {
+    display: none;
+    padding-top: 20px;
+    width: 100%;
+    background: #006ba2 url(/media/img/firefox/australis/glow/glow-bg-wide.png) top left no-repeat;
+    overflow: hidden;
+    .inner-container {
+        position: relative;
+        padding: 20px;
+        overflow: hidden;
+    }
+}
+
+.share-content {
+    float: right;
+    width: 440px;
+    text-align: center;
+    header {
+        margin-top: 30px;
+    }
+    .button {
+        margin-bottom: 20px;
+    }
+    z-index: 3;
+    transform: translate3d(0, 0, 0);
+}
+
+.no-js {
+    .main-container {
+        width: 100%;
+    }
+    .sync,
+    .share {
+        display: table-row;
+    }
+    .sync-anim {
+        background: url('/media/img/firefox/sync/composite.png?05-2014') top center no-repeat;
+        .device {
+            display: none;
+        }
+    }
+}
+
+.share-icons {
+    float: left;
+    width: 440px;
+    .disc {
+        top: 60px;
+        &.heart {
+            left: 150px;
+        }
+        &.eye {
+            left: 300px;
+        }
+        &.check {
+            left: 0;
+        }
+    }
+    z-index: 3;
+    transform: translate3d(0, 0, 0);
+}
+
+.rays {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 940px;
+    height: 251px;
+    background-image: url(/media/img/firefox/australis/glow/stacked-rays-sprite.png);
+    background-repeat: no-repeat;
+    &.red {
+        z-index: 2;
+        background-position: center top;
+        &.on {
+            animation: wobble 2s infinite;
+        }
+    }
+    &.green {
+        z-index: 1;
+        background-position: center bottom;
+        &.on {
+            animation: bobble 4s infinite;
+        }
+    }
+}
+
+.learn-more {
+    margin: 40px auto 170px auto;
+}
+
+html[dir="rtl"] {
+    .sync-content {
+        float: right;
+    }
+    .sync-anim-wrapper {
+        float: left;
+    }
+    .share-content {
+        float: left;
+    }
+    .share-icons {
+        float: right;
+        .disc {
+            left: auto;
+            &.heart {
+                right: 150px;
+            }
+            &.eye {
+                right: 300px;
+            }
+            &.check {
+                right: 0;
+            }
+        }
+    }
+}

media/js/firefox/australis/common.js

@@ -53,7 +53,7 @@
         }
     }, {
         triggerOnce: true,
-        offset: -100
+        offset: -20
     });
 
     function syncAnimation () {