зеркало из https://github.com/mozilla/bedrock.git
Initial setup of Firefox Channel page in bedrock (Bug 731678)
This commit is contained in:
Steven Garrity
Родитель
03dec6461a
Коммит
4e5e783160
|
|
@ -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 %}
|
||||
|
|
@ -7,6 +7,7 @@ import views
|
|||
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
/* }}} */
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 5.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 62 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 57 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 60 KiB |
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
@ -82,6 +82,9 @@ MINIFY_BUNDLES = {
|
|||
'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 @@ MINIFY_BUNDLES = {
|
|||
'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',
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче