Bug 1108632 Implement Firefox OS CES landing page

bedrock/firefox/templates/firefox/os/tv.html

@@ -0,0 +1,83 @@
+{# 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 page_title_prefix %}{{ _('Firefox OS — ') }}{% endblock %}
+{% block page_title %}{{ _('Beyond smartphones — Bringing the power of the Web to Panasonic TVs') }}{% endblock %}
+{% block page_desc %}{{ _('Built entirely using HTML5 and other open Web standards, Firefox OS is free from the rules and restrictions of existing proprietary platforms.') }}{% endblock %}
+{% block body_id %}firefox-os-tv{% endblock %}
+{% block body_class %}firefox-os-tv blueprint{% endblock %}
+
+
+{% block site_css %}
+  {{ css('firefox_os_tv') }}
+{% endblock %}
+
+{% block site_header_nav %}{% endblock %}
+
+{% block site_header_logo %}
+  <h2><a href="{{ url('firefox.os.index') }}">
+  {{ high_res_img('img/firefox/os/devices/tv/logo.png', {'alt': 'Firefox OS', 'width': '221', 'height': '67'}) }}</a></h2>
+{% endblock %}
+
+{% block content %}
+
+<div class="main-feature">
+  <h1>{{_('Firefox OS comes to TVs')}}</h1>
+  <h2>{{ _('We’re bringing the power of the Web to Panasonic televisions later this year.') }}</h2>
+</div>
+
+<div id="main-content">
+
+  <div class="pager pager-auto-init pager-with-nav pager-with-tabs pager-no-history" id="mozilla-pager-1">
+
+    <div class="tv">
+      <div class="pager-content" id="mozilla-pager-tv-pages">
+        <div id="tv1" class="pager-page">
+          {{ high_res_img('img/firefox/os/devices/tv/screen1.jpg', {'alt': _('Screenshot'), 'width': '796', 'height': '448'}) }}
+        </div>
+        <div id="tv2" class="pager-page">
+          {{ high_res_img('img/firefox/os/devices/tv/screen2.jpg', {'alt': _('Screenshot'), 'width': '796', 'height': '448'}) }}
+        </div>
+        <div id="tv3" class="pager-page">
+          {{ high_res_img('img/firefox/os/devices/tv/screen3.jpg', {'alt': _('Screenshot'), 'width': '796', 'height': '448'}) }}
+        </div>
+        <div id="tv4" class="pager-page">
+          {{ high_res_img('img/firefox/os/devices/tv/screen4.jpg', {'alt': _('Screenshot'), 'width': '796', 'height': '448'}) }}
+        </div>
+      </div>
+    </div>
+
+    <ol class="pager-tabs">
+      <li>
+        <a href="#tv1"><img src="{{ media('img/firefox/os/devices/tv/screen1.jpg') }}" alt="{{ _('Screenshot') }}"></a>
+      </li>
+      <li>
+        <a href="#tv2"><img src="{{ media('img/firefox/os/devices/tv/screen2.jpg') }}" alt="{{ _('Screenshot') }}"></a>
+      </li>
+      <li>
+        <a href="#tv3"><img src="{{ media('img/firefox/os/devices/tv/screen3.jpg') }}" alt="{{ _('Screenshot') }}"></a>
+      </li>
+      <li>
+        <a href="#tv4"><img src="{{ media('img/firefox/os/devices/tv/screen4.jpg') }}" alt="{{ _('Screenshot') }}"></a>
+      </li>
+    </ol>
+
+  </div>
+
+  <p class="details">
+    {{ _('It’s not just a phone operating system on a bigger screen.') }}
+    {{ _('It’s a whole new experience that brings your television to life and gives you a new level of choice and control.') }}
+  </p>
+
+</div>
+
+{% endblock %}
+
+{% block js %}
+  {{ js('firefox_os_tv') }}
+{% endblock %}
+
+{% block email_form %}{% endblock %}

bedrock/firefox/urls.py

@@ -12,6 +12,7 @@
 import bedrock.releasenotes.views
 from bedrock.releasenotes import version_re
 
+from waffle.decorators import waffle_switch
 
 latest_re = r'^firefox(?:/(?P<version>%s))?/%s/$'
 firstrun_re = latest_re % (version_re, 'firstrun')
@@ -75,6 +76,8 @@
 
     page('mwc', 'firefox/os/mwc-2014-preview.html'),
     page('firefox/os/devices', 'firefox/os/devices.html'),
+    page('firefox/os/devices/tv', 'firefox/os/tv.html',
+        decorators=waffle_switch('firefox-os-tv')),
 
     page('firefox/independent', 'firefox/independent.html'),
 

bedrock/settings/base.py

@@ -343,6 +343,11 @@ def JINJA_CONFIG():
         'firefox_os_mwc_2014_preview_ie7': (
             'css/firefox/os/mwc-2014-preview-ie7.less',
         ),
+        'firefox_os_tv': (
+            'css/sandstone/sandstone-resp.less',
+            'css/firefox/template-resp.less',
+            'css/firefox/os/tv.less',
+        ),
         'firefox_releases_index': (
             'css/sandstone/sandstone-resp.less',
             'css/firefox/template-resp.less',
@@ -772,6 +777,9 @@ def JINJA_CONFIG():
             'js/firefox/mwc-2014-map.js',
             'js/firefox/os/mwc-2014-preview.js',
         ),
+        'firefox_os_tv': (
+            'js/base/mozilla-pager.js',
+        ),
         'firefox_faq': (
             'js/base/mozilla-accordion.js',
             'js/base/mozilla-accordion-gatrack.js',

media/css/firefox/os/tv.less

@@ -0,0 +1,205 @@
+// 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";
+
+/* Template */
+
+body {
+    background: #005189 url(/media/img/sandstone/grain.png);
+}
+
+.blueprint #outer-wrapper {
+    /* fallback for older browsers */
+    background: url(/media/img/firefox/os/devices/tv/bg-screen.jpg) no-repeat center top;
+    background:
+        url('/media/img/firefox/os/devices/tv/bg-screen.jpg') no-repeat center top,
+        url('/media/img/firefox/os/devices/tv/bg-gradient.png') repeat-x;
+}
+
+/* Title section */
+
+.main-feature {
+    text-align: center;
+    h1 {
+        .font-size(74px);
+        margin: (@baseLine * 2) 10% @baseLine;
+    }
+    h2 {
+        .font-size(32px);
+        margin: @baseLine 20% (@baseLine * 2);
+        line-height: 1.2;
+    }
+}
+
+.details {
+    margin: auto 16%;
+    text-align: center;
+    .open-sans-light();
+    .font-size(24px);
+}
+
+/* TV Screens */
+
+.tv {
+    position: relative;
+    background: #222;
+    border: 22px solid #000;
+    border-radius: 4px;
+    text-align: center;
+    img {
+        display: block;
+        margin: auto;
+        height: auto;
+        .border-box();
+    }
+}
+
+.js img[data-high-res] {
+    display: block; // override display:inline; from sandstone
+}
+
+
+/* Screenshot pager */
+
+.pager  {
+    position: relative;
+    margin: 10px 60px;
+    &:before {
+        /* Glare effect over TV frame and screenshot */
+        content: ' '; // no-break space;
+        z-index: 2;
+        background: url(/media/img/firefox/os/devices/tv/screen-glare.png);
+        .background-size(100% auto);
+        background-repeat: no-repeat;
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: block;
+        border-radius: 4px;
+        width: 100%;
+        height: 492px; // match aspect ratio of TV frame
+    }
+}
+
+.pager-nav-links-wrapper {
+    button {
+        z-index: 6;
+        position: absolute;
+        top: 50%;
+        margin-top: -26px; // for vertical centering
+        left: -100px;
+        &.pager-next {
+            left: auto;
+            right: -100px;
+        }
+    }
+}
+
+.pager-nav-page-number {
+    display: none;
+}
+
+.pager-nav-links-wrapper {
+    button {
+        .at2x('/media/img/firefox/os/devices/tv/pager-right.png', 55px, 55px);
+        background-repeat: no-repeat;
+        background-position: 0 0;
+        .background-size(100% auto);
+        background-color: transparent;
+        height: 55px;
+        width: 55px;
+        border: 0;
+        margin: 0;
+        padding: 0;
+        opacity: .75;
+        cursor: pointer;
+        .image-replaced();
+        .transition();
+        &.pager-prev {
+            .at2x('/media/img/firefox/os/devices/tv/pager-left.png', 55px, 55px);
+        }
+        &:hover {
+            opacity: 1;
+        }
+        &[disabled],
+        &[disabled]:hover {
+            opacity: .25;
+            cursor: default;
+        }
+    }
+}
+
+.pager-tabs {
+    margin: @baseLine auto (@baseLine * 2);
+    position: relative;
+    z-index: 5;
+    text-align: center;
+    li {
+        display: inline-block;
+        width: 140px;
+        max-width: 20%;
+        margin: auto 2%;
+        list-style-type: none;
+    }
+    img {
+        width: 100%;
+        display: block;
+        border-radius: 4px;
+        border: 2px solid transparent;
+        .transition();
+    }
+    .selected img {
+        border-color: #80bae5;
+    }
+}
+
+/* Tablet Layout: 760px */
+@media only screen and (min-width: @breakTablet) and (max-width: @breakDesktop) {
+    .main-feature {
+        h1 {
+            .font-size(52px);
+            margin-top: @baseLine;
+            margin-bottom: @baseLine;
+        }
+        h2 {
+            .font-size(26px);
+        }
+    }
+    .pager:before { height: 356px }
+}
+
+/* Mobile layout: 320px */
+@media only screen and (max-width: @breakTablet) {
+    #masthead {
+       h2 {
+            padding-top: @baseLine * 2;
+        }
+    }
+    .main-feature {
+        h1 {
+            .font-size(42px);
+            margin: @baseLine auto;
+        }
+        h2 {
+            .font-size(26px);
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+    .pager {
+        margin: 10px; // Turn off left/right space left for next/prev buttons
+    }
+    .pager-nav-links-wrapper { display: none; }
+    .pager:before { height: 178px }
+    .details {
+        .font-size(18px);
+        margin: auto;
+    }
+}
+
+/* Wide Mobile Layout: 480px */
+@media only screen and (min-width: @breakMobileLandscape) and (max-width: @breakTablet) {
+    .pager:before { height: 244px }
+}