Merge pull request mozilla#3507 from jpetto/bug-1217229-mobile-fx-dow…

…nload-page

[fix bug 1217229] Create stand-alone Fx mobile download page.

bedrock/firefox/templates/firefox/mobile-download.html

@@ -0,0 +1,78 @@
+{# 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/. -#}
+
+{% extends "firefox/base-resp.html" %}
+
+{% block extra_meta %}<meta name="robots" content="noindex">{% endblock %}
+
+{% block page_title %}{{_('Download Firefox for Android and iOS')}}{% endblock %}
+
+{#- This will appear as <meta property="og:description"> which can be used for social share -#}
+{% block page_og_desc %}
+  {{_('Firefox is non-profit, non-corporate, non-compromised. Choosing Firefox isn’t just choosing a browser. It’s a vote for personal freedom.')}}
+{% endblock %}
+
+{#- This will appear as <meta property="og:image"> which can be used for social share -#}
+{% block page_image %}
+  {{ static('img/firefox/firefox-independent-1200.jpg') }}
+{% endblock %}
+
+{% block body_id %}firefox-mobile-download{% endblock %}
+
+{% block site_header_nav %}{% endblock %}
+{% block site_header_logo %}
+  <h2>{{ high_res_img('firefox/new/header-firefox.png', {'alt': _('Firefox for mobile'), 'width': '223', 'height': '84'}) }}</h2>
+{% endblock %}
+
+{% block site_css %}
+  {% stylesheet 'firefox_mobile_download' %}
+{% endblock %}
+
+{% block content %}
+
+<main role="main">
+  <div id="main-feature">
+    <div class="row">
+      <img src="{{ static('img/firefox/new/firefox-logo.png') }}" alt="Firefox" />
+      <h1 class="large" id="main-headline">
+        {{ _('Get Firefox everywhere') }}
+      </h1>
+    </div>
+  </div>{#-- /#main-feature --#}
+
+  <section id="stage">
+    <div id="scene">
+      <div id="thankyou" tabindex="0">
+        {{ _('Add it to your Android and iOS devices.') }}
+      </div>
+
+      <div class="mobile-download-buttons">
+        <ul>
+          <li class="android">
+            <a rel="external" href="{{ settings.GOOGLE_PLAY_FIREFOX_LINK }}">
+              {{ high_res_img('firefox/android/btn-google-play.png', {'alt': _('Get it on Google Play'), 'width': '129', 'height': '45', 'l10n': True}) }}
+            </a>
+          </li>
+          <li class="ios">
+            <a href="{{ settings.APPLE_APPSTORE_FIREFOX_LINK }}&amp;ct=mozorg-heartbeat_landing-button">
+              <img src="{{ l10n_img('firefox/ios/btn-app-store.svg') }}" alt="{{ _('Download on the App Store') }}" width="152" height="45">
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <div id="mobile-device-lineup"></div>
+    </div>
+  </section>
+</main>
+
+{% endblock %}
+
+{% block email_form %}{% endblock %}
+
+{% block site_footer %}
+  {% include 'firefox/includes/simple_footer.html' %}
+{% endblock %}
+
+{% block js %}{% endblock %}

bedrock/firefox/urls.py

@@ -48,6 +48,7 @@
     page('firefox/android/all', 'firefox/android/all.html'),
     page('firefox/android/faq', 'firefox/android/faq.html'),
     page('firefox/ios', 'firefox/ios.html'),
+    page('firefox/mobile-download', 'firefox/mobile-download.html'),
     page('firefox/os/faq', 'firefox/os/faq.html'),
     page('firefox/products', 'firefox/family/index.html'),
     page('firefox/private-browsing', 'firefox/private-browsing.html'),

bedrock/settings/static_media.py

@@ -401,6 +401,15 @@
         ),
         'output_filename': 'css/firefox_ios-bundle.css',
     },
+    'firefox_mobile_download': {
+        'source_filenames': (
+            'css/sandstone/sandstone-resp.less',
+            'css/tabzilla/tabzilla-static.less',
+            'css/base/simple_footer-resp.less',
+            'css/firefox/mobile-download.less',
+        ),
+        'output_filename': 'css/firefox_mobile_download.css',
+    },
     'firefox_new': {
         'source_filenames': (
             'css/sandstone/sandstone-resp.less',

etc/httpd/global.conf

@@ -716,6 +716,9 @@ RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/pocket(/?)$ /b/$1firefox/pocket$2 [P
 # bug 1136436
 RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/ios(/?)$ /b/$1firefox/ios$2 [PT]
 
+# bug 1217229
+RewriteRule ^/(\w{2,3}(?:-\w{2})?/)?firefox/mobile-download(/?)$ /b/$1firefox/mobile-download$2 [PT]
+
 # bug 1205632
 RewriteRule ^(/js/language(/.*)?)$ /b$1 [PT]
 

media/css/firefox/mobile-download.less

@@ -0,0 +1,212 @@
+// 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/.
+
+@import "../sandstone/lib.less";
+
+.sky #outer-wrapper {
+    background: #eaeff2;
+    background: -webkit-radial-gradient(center, ellipse cover, rgba(234,239,242,1) 0%, rgba(212,221,228,.4) 60%),
+                -webkit-linear-gradient(top, rgba(202,225,244,1) 0%, rgba(125,185,232,0) 100%);
+    background: radial-gradient(ellipse at center, rgba(234,239,242,1) 0%,rgba(212,221,228,.5) 50%),
+                linear-gradient(to bottom, rgba(202,225,244,1) 0%,rgba(125,185,232,0) 100%);
+
+    &:after {
+        z-index: 0;
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        background: url(/media/img/firefox/new/bg-noise.png);
+    }
+}
+
+#wrapper {
+    width: 980px;
+    padding: 0 10px 0 10px;
+    z-index: 1;
+}
+
+#main-feature {
+    margin-top: 14px;
+    padding-bottom: 20px;
+
+    img {
+        display: none;
+    }
+}
+
+#main-headline {
+    margin: 12px 50px;
+    text-align: center;
+    .font-size(60px);
+    .transition(opacity 0.2s ease);
+
+    span {
+        white-space: nowrap;
+    }
+}
+
+html[lang|="en"] #main-headline span:first-child {
+    display: inline-block;
+    width: 100%;
+}
+
+#scene {
+    padding: 0;
+    .font-size(14px);
+}
+
+#thankyou {
+    background: none;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    color: @textColorPrimary;
+    .open-sans-light();
+    .font-size(22px);
+    &:focus {
+        outline: none;
+    }
+}
+
+.mobile-download-buttons {
+    padding-top: @baseLine / 2;
+    text-align: center;
+
+    ul {
+        display: block;
+        margin: @baseLine auto (@baseLine * 2);
+        padding: 0;
+        list-style: none;
+        width: 361px;
+        .clearfix();
+    }
+
+    li {
+        float: left;
+        margin: 0 @baseLine;
+        height: 45px;
+
+        // ie8 seems to need widths set to display properly
+        &.android {
+            width: 129px;
+        }
+
+        &.ios {
+            width: 152px;
+        }
+    }
+
+    a {
+        display: block;
+    }
+}
+
+#mobile-device-lineup {
+    height: 302px;
+    background: url(/media/img/firefox/new/scene2-mobile-promo-device-lineup.png) center center no-repeat;
+}
+
+// page will be en-US only for a time, so hiding the lang chooser
+.footer-lang {
+    display: none;
+}
+
+/* Tablet Layout: 760px */
+@media only screen and (max-width: @breakDesktop) {
+    #wrapper {
+        width: 760px;
+        padding: 0;
+    }
+
+    #main-headline {
+        margin: 12px 0;
+        .font-size(55px);
+    }
+}
+
+/* Mobile layout: 320px */
+@media only screen and (max-width: @breakTablet) {
+    #wrapper {
+        width: 320px;
+        padding: 0;
+    }
+
+    #colophon {
+        .primary {
+            text-align: left;
+
+            li {
+                display: block;
+                margin-left: 0;
+
+                a, a:link, a:visited {
+                    display: block;
+                    border-left: none;
+                    border-top: 1px dotted @textColorLight;
+                    padding: 10px;
+                }
+
+                &:first-child a {
+                    border: 0;
+                }
+            }
+        }
+    }
+
+    #masthead h2 {
+        display: none;
+    }
+
+    #main-feature {
+        margin: 0;
+        padding: 0 10px;
+
+        .row {
+            .clearfix;
+            width: 300px;
+            margin: 0 auto;
+        }
+
+        img {
+            display: block;
+            margin: 0 auto;
+        }
+    }
+
+    #main-headline {
+        margin: 12px 0;
+        .font-size(36px);
+        letter-spacing: -1px;
+    }
+
+    #scene {
+        .font-size(12px);
+    }
+
+    #thankyou {
+        margin: (@baseLine / 2) 0 @baseLine;
+        .font-size(18px);
+        letter-spacing: auto;
+    }
+
+    .mobile-download-buttons {
+        padding-top: 0;
+
+        ul {
+            margin-bottom: @baseLine;
+            width: auto;
+        }
+
+        li {
+            float: none;
+            margin: 0 auto (@baseLine / 2);
+        }
+    }
+
+    #mobile-device-lineup {
+        display: none;
+    }
+}