Permalink
Browse files

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

  • Loading branch information...
1 parent 03dec64 commit 4e5e7831602f8ca1234512d91213a19a2a9bfe0d @sgarrity sgarrity committed May 3, 2012
@@ -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
@@ -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'),
@@ -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);
+}
+
+
+/* }}} */
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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
@@ -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',

0 comments on commit 4e5e783

Please sign in to comment.