Work on download buttons

apps/mozorg/templates/mozorg/download_button_base.html

@@ -0,0 +1,44 @@
+<aside id="{{ id }}" class="download-button {% block class %}download-button-large{% endblock %}">
+  {% block noscript %}
+  <noscript>
+    {% include "mozorg/download_button_dumb.html" %}
+  </noscript>
+  {% endblock %}
+
+  {% block unsupported %}
+  <ul class="unsupported-download">
+    {% include "mozorg/download_button_dumb.html" %}    
+  </ul>
+  {% endblock %}
+
+  {% block contents %}
+  <ul class="download-list">
+    {% for build in builds %}
+    <li class="{{ build.platform }}">
+      <a class="download-link download-{{ product }}"
+         href="{{ build.download_link }}">
+        <span class="download-content">
+          <span class="download-title">Firefox</span>
+          Free Download
+          <span class="download-info">
+            <span class="download-version">
+              {{ version }} for {{ build.platform_pretty }}
+            </span>  
+            <span class="download-lang">{{ locale_name }}</span>
+          </span>
+        </span>
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+  {% endblock %}
+
+  {% block small_print %}
+  <small class="download-other">
+    <a href="{{ php_url('/firefox/all.html') }}">{{ ___('Systems & Languages') }}</a> | 
+    <a href="">{{ ___('What’s New') }}</a> | 
+    <a href="{{ php_url('/legal/privacy/firefox.html') }}">{{ ___('Privacy') }}</a>
+  </small>
+  {% endblock %}
+
+</aside>

apps/mozorg/templates/mozorg/download_button_large.html

@@ -1,38 +1 @@
-<div id="{{ id }}">
-  <noscript>
-    {% include "mozorg/download_button_dumb.html" %}
-  </noscript>
-
-  <ul class="unsupported-download">
-    {% include "mozorg/download_button_dumb.html" %}    
-  </ul>
-
-  <ul class="home-download">
-    {% for build in builds %}
-    <li class="{{ build.platform }}">
-      <a class="download-link download-{{ product }}"
-         href="{{ build.download_link }}">
-        <span class="download-content">
-          <span class="download-title">
-            Firefox
-            <img class="download-arrow" alt="" src="/media/img/home/download-arrow.png">
-          </span>
-          Free Download
-          <span class="download-info">
-            <span class="download-version">
-              {{ version }} for {{ build.platform_pretty }}
-            </span>
-            <em class="download-lang">{{ locale_name }}</em>
-          </span>
-        </span>
-      </a>
-    </li>
-    {% endfor %}
-  </ul>
-
-  <div class="download-other">
-    <a href="{{ php_url('/firefox/all.html') }}">{{ ___('All Systems & Languages') }}</a> | 
-    <a href="{{ php_url('/legal/privacy/firefox.html') }}">{{ ___('Privacy Policy') }}</a>
-  </div>
-
-</div>
+{% extends "/mozorg/download_button_base.html" %}

apps/mozorg/templates/mozorg/download_button_mobile.html

@@ -1,4 +1,4 @@
-<div id="{{ id }}">
+<div id="{{ id }}" class="download-button">
   <div class="home-download beta-download">
     <a href="{{ download_link }}"
        class="download-link download-firefox"
@@ -15,9 +15,9 @@
       </span>
       <img src="/media/img/covehead/channel/icon-mobile.png" alt="" />
     </a>
-    <div class="download-other">
+    <small class="download-other">
       <a href="/{{ LANG }}/mobile/platforms/">Supported devices</a>  | 
       <a href="/{{ LANG }}/legal/privacy/firefox.html">Privacy Policy</a>
-    </div>
+    </small>
   </div>
 </div>

apps/mozorg/templates/mozorg/download_button_small.html

@@ -1,13 +1,10 @@
-<div id="{{ id }}">
-  <noscript>
-   {% include "mozorg/download_button_dumb.html" %}
-  </noscript>
+{% extends "/mozorg/download_button_base.html" %}
 
-  <ul class="unsupported-download">
-    {% include "mozorg/download_button_dumb.html" %}    
-  </ul>
+{% block class %}download-button-small{% endblock %}">
 
-  <ul class="home-download">
+{% block contents %}
+  
+  <ul class="download-list">
     {% for build in builds %}
     <li class="{{ build.platform }}">
       <a class="download-link download-{{ product }}"
@@ -21,8 +18,4 @@
     {% endfor %}
   </ul>
 
-  <p class="download-other">
-    <a href="/{{ LANG }}/legal/privacy/firefox.html" class="ancillaryLink">Privacy Policy</a> |
-    <a href="/{{ LANG }}/firefox/all.html" class="ancillaryLink">Other Systems and Languages</a>
-  </p>
-</div>
+{% endblock %}

apps/mozorg/templates/mozorg/firefox-security.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "base-firefox.html" %}
 
 {% block page_title %}Mozilla Firefox Web Browser — Safe Web Browsing{% endblock %}
 {% block body_id %}firefox-security{% endblock %}
@@ -7,15 +7,18 @@
   {{ css('firefox-security') }}
 {% endblock %}
 
-{% block site_header_logo %}
-<h1><img src="/media/img/sandstone/header-mozilla-slate.png" alt="mozilla"></h1>
-{% endblock %}
-
 {% block content %}
 
+
 <div id="main-feature">
   <h1 class="center">Firefox Helps You <span class="huge">Stay Safe</span></h1>
-  <a href="#" class="button top-right">Download Firefox</a>
+  {{ download_button('download', 'small') }}
+
+  <script src="/media/js/download.js"></script>
+  <script type="text/javascript">
+    offerBestDownloadLink('download');
+    offerBestDownloadLink('download2');
+  </script>
 </div>
 
 <nav class="menu-bar billboard">

media/css/firefox/security.less

@@ -1,18 +1,20 @@
-@import "../sandstone/sandstone.less";
-
-#wrapper {
-    background-color: #eee;
-    background-image: url(/media/img/sandstone/bg-slate.png);
-}
+@import "template.less";
 
 section.container {
-    border-bottom: 1px dotted @borderColor;
+    border-top: 1px dotted @borderColor;
+    padding-top: @baseLine * 2;
     padding-bottom: @baseLine * 2;
-    margin-bottom: @baseLine * 2;
 }
 
-section.container:last-child {
-    border-bottom: 0;
+section.container#privacy {
+    border-top: 0;
+    padding-top: 0;
+}
+
+#download {
+    position: absolute;
+    top: -@baseLine * 2;
+    right: 0;
 }
 
 a,

media/css/firefox/template.less

@@ -0,0 +1,7 @@
+@import "../sandstone/sandstone.less";
+
+#wrapper {
+    background-color: #eee;
+    background-image: url(/media/img/firefox/template/bg.png);
+}
+

media/css/sandstone/buttons.less

@@ -1,3 +1,5 @@
+// General buttons
+
 .button,
 .button:link,
 .button:visited {
@@ -24,7 +26,7 @@
         text-decoration: none;
         .transition();
     }
-    
+
     &:active {
         .box-shadow(@buttonShadowActive);
         color: @buttonTextColor;
@@ -73,3 +75,116 @@
     }
 
 }
+
+
+// Product download buttons
+
+.download-button .unsupported-download {
+    display: none;
+}
+
+.download-button {
+    .inline-block;
+    ul {
+        margin: 0 0 4px 0;
+        li {
+            list-style-type: none;
+        }
+    }
+}
+
+.download-button .download-link {
+    .button;
+    cursor: pointer;
+    padding: 0;
+    height: 95px;
+    margin-left: 50px;
+    text-align: inherit;
+    .download-content {
+        display: block;
+        position: relative;
+        margin-left: -50px;
+        padding-left: 65px;
+        padding-right: 24px;
+        background: url(/media/img/sandstone/buttons/firefox-large.png) 0 0 no-repeat;
+        height: 95px;
+        padding: 12px 12px 0 112px;
+    }
+    .download-title {
+        display: block;
+        font-family: georgia, "Bitstream Charter", serif;
+        font-size: 26px;
+        letter-spacing: -0.02em;
+        padding-right: 32px;
+        background: url(/media/img/sandstone/buttons/arrow-large.png) no-repeat 100% 0;
+    }
+    .download-info {
+        display: block;
+        color: #346012;
+        padding-right: 32px;
+        padding-top: 2px;
+        font-size: 12px;
+        line-height: 100%;
+        text-shadow: none;
+    }
+}
+
+.download-button-large .download-link {
+    line-height: @baseLine;
+    font-size: 16px;
+    .border-radius(6px);
+}
+
+.download-button-small .download-link {
+    height: 48px;
+    .download-title {
+        .inline-block;
+        vertical-align: middle;
+        font-size: 24px;
+        background: url(/media/img/sandstone/buttons/arrow-small.png) no-repeat 100% 50%;
+        padding-right: 20px;
+        padding-bottom: 4px;
+        margin-right: 5px;
+    }
+    .download-content {
+        margin-left: -25px;
+        background-image: url(/media/img/sandstone/buttons/firefox-small.png);
+        height: 52px;
+        padding: 0 24px 0 65px;
+    }
+}
+
+
+// OS detection
+
+li.os_linux,
+li.os_windows,
+li.os_osx,
+li.os_android { display: none; }
+
+ul.os_linux li.os_linux,
+ul.os_windows li.os_windows,
+ul.os_osx li.os_osx,
+ul.os_android li.os_android,
+noscript li.os_linux,
+noscript li.os_windows,
+noscript li.os_osx,
+noscript li.os_android{
+    display: block;
+}
+
+
+// Small print
+
+.download-button small.download-other {
+    .open-sans;
+    display: block;
+    font-size: 11px;
+    text-align: right;
+    color: @textColorLight;
+
+    a:link,
+    a:visited {
+        color: #999;
+    }
+}

media/js/download.js

@@ -70,13 +70,13 @@ function offerBestDownloadLink(tagId) {
     if (parent) {
         switch (gPlatform) {
             case PLATFORM_WINDOWS:
-                setDownloadListClass(parent, 'home-download', 'os_windows');
+                setDownloadListClass(parent, 'download-list', 'os_windows');
                 break;
             case PLATFORM_LINUX:
-                setDownloadListClass(parent, 'home-download', 'os_linux');
+                setDownloadListClass(parent, 'download-list', 'os_linux');
                 break;
             case PLATFORM_MACOSX:
-                setDownloadListClass(parent, 'home-download', 'os_osx');
+                setDownloadListClass(parent, 'download-list', 'os_osx');
                 break;
             default:
                 setDownloadListClass(parent, 'unsupported-download', 'show');

templates/base-firefox.html

@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+
+{% block site_css %}
+  {{ css('firefox') }}
+{% endblock %}
+
+{% block site_header_logo %}
+<h1><img src="{{ MEDIA_URL }}img/firefox/template/header-logo.png" alt="Mozilla Firefox"></h1>
+{% endblock %}
+