Merge pull request #2074 from mozilla/bug-1003347-popup-share-button-cut-off

[fix bug 1003347] popup share button on the firefox download page cut off

bedrock/firefox/templates/firefox/new.html

@@ -132,12 +132,12 @@
       </div> <!-- /#scene1 -->
 
       <div class="scene" id="scene2">
+        <div class="share-wrapper">
+          {% include 'firefox/includes/social-share.html' %}
+        </div>
         <div class="thankyou" tabindex="0">
           {{_("Thanks for downloading Firefox!")}}
           {{_("As a non-profit, we’re free to innovate on your behalf without any pressure to compromise. You’re going to love the difference.")}}
-          <div class="share-wrapper">
-            {% include 'firefox/includes/social-share.html' %}
-          </div>
         </div>
 
         <ol class="installation">

media/css/firefox/new.less

@@ -82,7 +82,7 @@
 }
 
 .download-button-wrapper {
-    margin: 0 auto;
+    margin: 10px auto 0 auto;
     width: 280px;
 }
 
@@ -257,7 +257,7 @@ html.fxos {
 
 #main-feature {
     margin-top: 14px;
-    padding-bottom: 30px;
+    padding-bottom: 20px;
     h1.large {
         margin: 12px 50px;
         text-align: center;
@@ -347,7 +347,7 @@ html[lang|="en"] #main-feature h1.large span:first-child {
     position: relative;
     margin: 0 auto;
     width: 100%;
-    height: 400px;
+    height: 420px;
     overflow: hidden;
 }
 
@@ -374,7 +374,7 @@ html[lang|="en"] #main-feature h1.large span:first-child {
     .transition(bottom 0.4s ease 0.1s);
 
     &.scene2 {
-        bottom: -400px;
+        bottom: -420px;
         #scene2 { visibility: visible; }
     }
 }
@@ -386,7 +386,7 @@ html[lang|="en"] #main-feature h1.large span:first-child {
 .scene {
     position: absolute;
     left: 0;
-    height: 400px;
+    height: 420px;
     width: 100%;
     .clearfix;
     overflow: hidden;
@@ -397,7 +397,7 @@ html[lang|="en"] #main-feature h1.large span:first-child {
 }
 
 #scene2 {
-    top: -400px;
+    top: -420px;
     visibility: hidden;
 }
 
@@ -412,6 +412,7 @@ html[lang|="en"] #main-feature h1.large span:first-child {
 
 .share-wrapper {
     text-align: center;
+    margin-bottom: 10px;
 }
 
 .socialshare {
@@ -496,9 +497,9 @@ html[dir="rtl"] {
             }
         }
     }
+
     .socialshare {
-        display: block;
-        margin: 5px auto 0 0;
+        display: none;
     }
 }
 

media/js/firefox/new.js

@@ -107,7 +107,7 @@
                 $stage.addClass('stage-no-anim');
             }
 
-            var CSSbottom = (scene === 2) ? '-400px' : 0;
+            var CSSbottom = (scene === 2) ? '-420px' : 0;
             $stage.data('scene', scene);
             $('.scene').css('visibility', 'visible');
             if (!Modernizr.csstransitions && animate) {