Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Initial setup of Firefox Channel page in bedrock (Bug 731678)

  • Loading branch information...
commit 4e5e7831602f8ca1234512d91213a19a2a9bfe0d 1 parent 03dec64
@sgarrity sgarrity authored
View
89 apps/firefox/templates/firefox/channel.html
@@ -0,0 +1,89 @@
+{% extends "/firefox/base.html" %}
+
+{% block page_title %}Download Firefox Aurora or Beta & Help Determine the Next Firefox{% endblock %}
+{% block body_id %}channel{% endblock %}
+
+{% block site_css %}
+ {{ css('firefox_channel') }}
+{% endblock %}
+
+{% block content %}
+
+<div id="main-content" class="pager pager-with-tabs pager-cleartype-fix">
+
+ <ul id="toggler-container" class="pager-tabs">
+ <li id="beta-link"><a href="{{ php_url('/firefox/beta/') }}"><img src="{{ media('/img/firefox/channel/toggler-beta.png') }}" id="toggler-logo-beta" /></a></li>
+ <li id="firefox-link"><a href="{{ php_url('/firefox/') }}"><img src="{{ media('/img/firefox/channel/toggler-firefox.png') }}" id="toggler-logo-firefox" /></a></li>
+ <li id="aurora-link"><a href="{{ php_url('/firefox/aurora/') }}"><img src="{{ media('/img/firefox/channel/toggler-aurora.png') }}" id="toggler-logo-aurora" /></a></li>
+ </ul>
+
+ <a href="#" id="carousel-left"></a>
+ <a href="#" id="carousel-right"></a>
+
+ <div class="pager-content">
+
+ <div id="beta">
+ <script>
+ document.getElementById('beta').id = 'page-beta';
+ </script>
+ <h3 class="channel-title channel-title-beta">Firefox Beta</h3>
+ <div class="pager pager-with-tabs pager-cleartype-fix">
+ <h2>The latest features in a more stable environment</h2>
+ <div id="contents-beta" class="pager-content">
+ <div class="desktop" id="beta-desktop">
+ <p class="more"><a href="/<?=$lang?>/firefox/beta/">Learn More <span>»</span></a></p>
+ </div>
+ <div class="mobile" id="beta-mobile">
+ <p class="more"><a href="/<?=$lang?>/mobile/beta/">Learn More <span>»</span></a></p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div id="firefox">
+ <script>
+ document.getElementById('firefox').id = 'page-firefox';
+ </script>
+ <h3 class="channel-title channel-title-firefox">Firefox</h3>
+ <div class="pager pager-with-tabs pager-cleartype-fix">
+ <h2>Tried, tested and used by millions around the world</h2>
+ <div id="contents-firefox" class="pager-content">
+ <div class="desktop" id="firefox-desktop">
+ <p class="more"><a href="/<?=$lang?>/firefox/">Learn More <span>»</span></a></p>
+ </div>
+ <div class="mobile" id="firefox-mobile">
+ <p class="more"><a href="/<?=$lang?>/mobile/">Learn More <span>»</span></a></p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div id="aurora">
+ <script>
+ document.getElementById('aurora').id = 'page-aurora';
+ </script>
+ <h3 class="channel-title channel-title-aurora">Aurora</h3>
+ <div class="pager pager-with-tabs pager-cleartype-fix">
+ <h2>The newest innovations in an experimental environment</h2>
+ <div id="contents-aurora" class="pager-content">
+ <div class="desktop" id="aurora-desktop">
+ <p class="more"><a href="/<?=$lang?>/firefox/aurora/">Learn More <span>»</span></a></p>
+ </div>
+ <div class="mobile" id="aurora-mobile">
+ <p class="more"><a href="/<?=$lang?>/mobile/aurora/">Learn More <span>»</span></a></p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+</div><!-- end #main-content div -->
+
+{% endblock %}
+
+{% block js %}
+{{ js('firefox_channel') }}
+{% endblock %}
+
+{% block email_form %}{% endblock %}
View
1  apps/firefox/urls.py
@@ -7,6 +7,7 @@
urlpatterns = patterns('',
page('firefox/central', 'firefox/central.html'),
+ page('firefox/channel', 'firefox/channel.html'),
page('firefox/customize', 'firefox/customize.html'),
page('firefox/features', 'firefox/features.html'),
page('firefox/fx', 'firefox/fx.html'),
View
183 media/css/firefox/channel.less
@@ -0,0 +1,183 @@
+@import "template.less";
+/* {{{ Main Feature */
+
+#channel #main-feature {
+ padding-top: 60px;
+ position: relative;
+ height: 190px;
+ text-align: center;
+ -webkit-transition: all 0.6s ease-in-out;
+ -moz-transition: all 0.6s ease-in-out;
+}
+
+#channel #main-feature h2 {
+ line-height: 0.9;
+ font-size: 68px;
+ -webkit-transition: all 0.6s ease-in-out;
+ -moz-transition: all 0.6s ease-in-out;
+ font-family: 'open sans', sans-serif;
+ letter-spacing: -0.02em;
+ font-weight: bold;
+ font-style: normal;
+ text-transform: uppercase;
+}
+
+.darkbg #main-feature p,
+.darkbg #main-feature h2 {
+ color: #fff;
+}
+
+#channel #main-feature h2 span {
+}
+
+#channel #main-feature p {
+ font-style: italic;
+ color: #6b6b6b;
+ font-size: 24px;
+ margin-bottom: 30px;
+ -webkit-transition: all 0.6s ease-in-out;
+ -moz-transition: all 0.6s ease-in-out;
+}
+
+.darkbg#channel #main-feature p {
+ color: #ffbb38;
+}
+
+
+#channel #footer {
+ margin-top: 50px;
+}
+
+#channel #sub-footer {
+ display: none;
+}
+
+#toggler-container {
+ margin: 0 auto;
+ padding: 0;
+ width: 900px;
+ position: relative;
+ height: 225px;
+ list-style-type: none;
+ display: block;
+}
+
+#toggler-container li {
+ list-style-type: none;
+ display: block;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ top: 25px;
+ -webkit-transition: all 0.6s ease-in-out;
+ -moz-transition: all 0.6s ease-in-out;
+}
+
+#toggler-container li a {
+ display: block;
+ position: relative;
+ top: 0;
+ -webkit-transition: all 0.1s ease-in-out;
+ -moz-transition: all 0.1s ease-in-out;
+}
+
+#toggler-container li img {
+ height: 150px;
+ width: 150px;
+ -webkit-transition: all 0.6s ease-in-out;
+ -moz-transition: all 0.6s ease-in-out;
+}
+
+#toggler-container li a:hover {
+ top: -5px;
+}
+
+
+/* Default styles */
+
+.pager-tabs #beta-link { left: 335px; z-index: 3; top: 0; }
+.pager-tabs #aurora-link { left: 110px; z-index: 1; }
+.pager-tabs #firefox-link { left: 635px; z-index: 2; }
+
+.pager-tabs #beta-link img {
+ height: 225px;
+ width: 225px;
+}
+
+/* Selected styles */
+
+.pager-selected-firefox #beta-link { left: 110px; z-index: 1; }
+.pager-selected-firefox #aurora-link { left: 635px; z-index: 2; }
+
+.pager-selected-beta #aurora-link { left: 110px; z-index: 1; }
+.pager-selected-beta #firefox-link { left: 635px; z-index: 2; }
+
+.pager-selected-aurora #firefox-link { left: 110px; z-index: 1; }
+.pager-selected-aurora #beta-link { left: 635px; z-index: 2; }
+
+.pager-selected-firefox #firefox-link,
+.pager-selected-beta #beta-link,
+.pager-selected-aurora #aurora-link {
+ top: 0;
+ left: 335px;
+ z-index: 3;
+}
+
+.pager-selected-firefox #firefox-link a:hover,
+.pager-selected-beta #beta-link a:hover,
+.pager-selected-aurora #aurora-link a:hover {
+ top: 0;
+}
+
+/* To override default image styles */
+
+.pager-selected-firefox #beta-link,
+.pager-selected-aurora #beta-link {
+ top: 25px;
+}
+
+.pager-selected-firefox #beta-link img,
+.pager-selected-aurora #beta-link img {
+ width: 150px;
+ height: 150px;
+}
+
+.pager-selected-firefox #firefox-link img,
+.pager-selected-beta #beta-link img,
+.pager-selected-aurora #aurora-link img {
+ height: 225px;
+ width: 225px;
+}
+
+#carousel-left,
+#carousel-right {
+ position: absolute;
+ display: block;
+ left: 0;
+ top: 70px;
+ height: 80px;
+ width: 78px;
+ background: url(/media/img/firefox/channel/carousel-arrows.png) 0 0 no-repeat;
+}
+
+#carousel-right {
+ left: auto;
+ right: 0;
+ background-position: 0 -100px;
+}
+
+body.darkbg,
+body.darkbg #outer-wrapper {
+ background-color: #000;
+ background-image: url(/img/covehead/channel/bg-dark.jpg);
+ background-repeat: repeat-x;
+ color: #d3d3d3;
+}
+
+
+body.darkbg#channel #wrapper {
+ background-image: url(/img/covehead/channel/bg-carousel-dark.jpg);
+}
+
+
+/* }}} */
View
BIN  media/img/firefox/channel/carousel-arrows.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/firefox/channel/toggler-aurora.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/firefox/channel/toggler-beta.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  media/img/firefox/channel/toggler-firefox.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
53 media/js/firefox/channel.js
@@ -0,0 +1,53 @@
+
+$(document).ready(function() {
+ var pager = Mozilla.Pager.rootPagers[0];
+ var selected_href = false;
+
+ function redirect(a) {
+ var href = a.href;
+
+ if(href.indexOf('#beta') != -1) {
+ window.location = '/firefox/beta/';
+ }
+ else if(href.indexOf('#aurora') != -1) {
+ window.location = '/firefox/aurora/';
+ }
+ else if(href.indexOf('#firefox') != -1) {
+ window.location = '/firefox/';
+ }
+ }
+
+ pager.\$container.bind('changePage', function(e, tab) {
+ if (pager.currentPage.id == 'aurora') {
+ \$('body').addClass('darkbg');
+ } else {
+ \$('body').removeClass('darkbg');
+ }
+
+ $('.pager-tabs a').unbind('click.outgoing');
+ $('.pager-tabs a.selected').bind('click.outgoing', function() {
+ redirect(this);
+ });
+ });
+
+ \$('#carousel-left').click(function(e) {
+ e.preventDefault();
+ pager.prevPageWithAnimation();
+ });
+
+ \$('#carousel-right').click(function(e) {
+ e.preventDefault();
+ pager.nextPageWithAnimation();
+ });
+
+ // init
+ if (pager.currentPage.id == 'aurora') {
+ \$('body').addClass('darkbg');
+ } else {
+ \$('body').removeClass('darkbg');
+ }
+
+ $('.pager-tabs a.selected').bind('click.outgoing', function() {
+ redirect(this);
+ });
+});
View
7 settings/base.py
@@ -82,6 +82,9 @@ def JINJA_CONFIG():
'firefox': (
'css/firefox/template.less',
),
+ 'firefox_channel': (
+ 'css/firefox/channel.less',
+ ),
'firefox_central': (
'css/sandstone/video.less',
'css/firefox/central.less',
@@ -204,6 +207,10 @@ def JINJA_CONFIG():
'js/firefox/central.js',
'js/mozilla-pager.js',
),
+ 'firefox_channel': (
+ 'js/mozilla-pager.js',
+ 'js/firefox/channel.js',
+ ),
'firefox_customize': (
'js/mozilla-video-tools.js',
'js/firefox/customize.js',
Please sign in to comment.
Something went wrong with that request. Please try again.