new banner pitching Firefox Beta (bug 800654, bug 813737, bug 813805)

This commit is contained in:
Chris Van 2012-11-26 14:00:50 -08:00
Родитель e096dbe251
Коммит eadc93819e
14 изменённых файлов: 206 добавлений и 113 удалений

134
media/css/mkt/banners.less Normal file
Просмотреть файл

@ -0,0 +1,134 @@
@import 'lib';
.incompatible-browser {
.box-shadow(0 -1px 0 @dark-gray inset);
.transition(~'.2s opacity, .2s visibility, .2s top');
background: #292f33;
margin: 0 auto -95px;
opacity: 0;
position: relative;
top: -95px;
visibility: hidden;
z-index: 1;
&.active {
margin-bottom: 0;
opacity: 1;
top: 50px;
visibility: visible;
}
div {
background: url(../../img/mkt/icons/firefox-beta.png) 8px 66% no-repeat;
background-size: auto 75px;
height: 95px;
margin: 0 auto;
max-width: 600px;
position: relative;
width: 100%;
}
a {
display: block;
height: 100%;
position: absolute;
top: 0;
text-decoration: none;
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
max-width: 75%;
}
.helper {
// This lets us vertically center them inline-blocks.
height: 100%;
width: 0;
}
.download {
color: #c3d0d9;
line-height: 1.3;
padding: 0 10px 0 90px;
b {
color: #33c2ff;
display: block;
font-weight: normal;
}
&:hover {
color: lighten(#c3d0d9, 10%);
b {
color: lighten(#33c2ff, 10%);
text-decoration: underline;
}
}
}
.close {
.hidetext;
right: 0;
width: 32px;
z-index: 4;
&:before {
.gradient(~'top, rgba(11,12,13,0), rgba(117, 127, 133, 0.35) 35%, rgba(117, 127, 133, 0.35) 65%, rgba(11,12,13,0) 100%');
content: "";
display: block;
height: 100%;
width: 1px;
z-index: 3;
position: absolute;
right: 31px;
}
&:after {
content: "";
background: url(../../img/mkt/icons/close-2x.png) 50% 50% no-repeat;
background-size: auto 16px;
display: block;
margin: -18px auto 0;
height: 100%;
width: 100%;
z-index: 2;
position: absolute;
}
&:hover {
.header-hover;
}
&:active {
.header-active;
}
}
}
@media (min-width: @tablet) {
.incompatible-browser {
div {
background-position: 15px 66%;
}
.download {
font-size: 120%;
padding-left: 98px;
.span {
max-width: 350px;
}
}
.close {
width: 50px;
&:before {
right: 49px;
}
&:after {
background-size: auto 21px;
}
}
}
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (min--moz-device-pixel-ratio: 1.5),
screen and (min--moz-device-pixel-ratio: 1.5)
screen and (min-device-pixel-ratio: 1.5) {
.incompatible-browser {
div {
background-image: url(../../img/mkt/icons/firefox-beta-2x.png);
}
.close:after {
background-image: url(../../img/mkt/icons/close-2x.png);
}
}
}

Просмотреть файл

@ -163,13 +163,11 @@ body.login[data-page-type=notice] #site-header.no-consumer h1 {
width: 20px;
}
&:hover b {
background-image: -moz-linear-gradient(top, fade(#000, 0%), fade(#000, 25%) 25%, fade(#000, 25%) 75%, fade(#000, 0%) 100%);
background-image: -webkit-linear-gradient(top, fade(#000, 0%), fade(#000, 25%) 25%, fade(#000, 25%) 75%, fade(#000, 0%) 100%);
.header-hover;
}
&:active b {
background-image: -moz-linear-gradient(top, fade(#000, 0%), fade(#000, 35%) 25%, fade(#000, 35%) 75%, fade(#000, 0%) 100%);
background-image: -webkit-linear-gradient(top, fade(#000, 0%), fade(#000, 35%) 25%, fade(#000, 35%) 75%, fade(#000, 0%) 100%);
}
.header-active;
}
}
&.home {
width: 29px;

Просмотреть файл

@ -23,9 +23,13 @@
@3col: 400px;
@4col: 600px;
@7col: 672px;
@10col: 1024px;
@tablet: 600px;
@not-tablet: @4col - 1;
@desktop: 672px;
@not-desktop: @desktop - 1;
@10col: 1024px;
// Colors
@ -230,6 +234,15 @@
animation: @animation;
}
.gradient(@gradient) {
background-image: -webkit-gradient(@gradient);
background-image: -webkit-linear-gradient(@gradient);
background-image: -moz-linear-gradient(@gradient);
background-image: -ms-linear-gradient(@gradient);
background-image: -o-linear-gradient(@gradient);
background-image: linear-gradient(@gradient);
}
.gradient-two-color(@color1, @color2) {
background-color: @color2;
background-image: -webkit-gradient(linear, left bottom, left top, from(@color1), to(@color2));
@ -240,7 +253,6 @@
background-image: linear-gradient(@color1, @color2);
}
.gradient-two-color-with-image(@color1, @color2, @image) {
background: @color2;
background: @image, -webkit-gradient(linear, left bottom, left top, from(@color1), to(@color2));
@ -337,3 +349,15 @@
text-decoration: none;
}
}
.header-hover() {
background-image: -moz-linear-gradient(top, fade(#000, 0%), fade(#000, 25%) 25%, fade(#000, 25%) 75%, fade(#000, 0%) 100%);
background-image: -webkit-linear-gradient(top, fade(#000, 0%), fade(#000, 25%) 25%, fade(#000, 25%) 75%, fade(#000, 0%) 100%);
background-image: linear-gradient(top, fade(#000, 0%), fade(#000, 25%) 25%, fade(#000, 25%) 75%, fade(#000, 0%) 100%);
}
.header-active() {
background-image: -moz-linear-gradient(top, fade(#000, 0%), fade(#000, 35%) 25%, fade(#000, 35%) 75%, fade(#000, 0%) 100%);
background-image: -webkit-linear-gradient(top, fade(#000, 0%), fade(#000, 35%) 25%, fade(#000, 35%) 75%, fade(#000, 0%) 100%);
background-image: linear-gradient(top, fade(#000, 0%), fade(#000, 35%) 25%, fade(#000, 35%) 75%, fade(#000, 0%) 100%);
}

Просмотреть файл

@ -114,68 +114,6 @@ body .loading-fragment {
}
}
.incompatible-browser {
.box-shadow(0 -1px 0 #000 inset, 0 1px 0 rgba(0,0,0,.65));
.transition(~'.2s opacity, .2s visibility, .2s top');
background: @black;
margin: 0 auto -55px;
opacity: 0;
padding: 0;
position: relative;
top: -55px;
visibility: hidden;
z-index: 1;
div {
background: @dark-gray url(../../img/mkt/icons/aurora.png) 5px 60% no-repeat;
background-size: auto 30px;
display: table;
margin: 0 auto;
min-height: 55px;
max-width: 600px;
}
&.active {
margin-bottom: 0;
opacity: 1;
top: 50px;
visibility: visible;
}
a {
display: table-cell;
height: 50px;
text-decoration: none;
vertical-align: middle;
}
.download {
color: #ccc;
display: table-cell;
line-height: 1.3;
padding: 0 10px 0 45px;
text-align: left;
vertical-align: middle;
b {
color: @link-bright;
}
&:hover {
color: #fff;
b {
color: lighten(@link-bright, 10%);
text-decoration: underline;
}
}
}
.close {
background: #666;
color: #333;
font-size: 22px;
text-align: center;
width: 30px;
&:hover {
background: #ccc;
color: #000;
}
}
}
#site-header, #page {
min-width: 320px;
> section {

Двоичные данные
media/img/mkt/icons/close-2x.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 2.0 KiB

Двоичные данные
media/img/mkt/icons/close.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.5 KiB

Двоичные данные
media/img/mkt/icons/firefox-beta-2x.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 35 KiB

Двоичные данные
media/img/mkt/icons/firefox-beta.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 24 KiB

19
media/js/mkt/banners.js Normal file
Просмотреть файл

@ -0,0 +1,19 @@
(function() {
if (!z.capabilities.localStorage || !localStorage.seen_beta_pitch) {
$('.incompatible-browser').addClass('active');
}
// Clicking cancel should dismiss notification boxes.
z.body.on('click', '.incompatible-browser .close', function() {
if (z.capabilities.localStorage) {
localStorage.seen_beta_pitch = '1';
}
$('.incompatible-browser').removeClass('active');
}).on('click', '.incompatible.button', _pd(function(e) {
if (z.capabilities.localStorage) {
delete localStorage.seen_beta_pitch;
}
$('.incompatible-browser').addClass('active');
}));
})();

Просмотреть файл

Просмотреть файл

@ -77,31 +77,6 @@ $(document).ready(function() {
});
// If we're inside the Marketplace app, open external links in the Browser.
z.page.on('click', 'a.external, a[rel=external]', function() {
if (z.capabilities.chromeless) {
$(this).attr('target', '_blank');
}
});
if (!localStorage.seen_aurora_pitch) {
$('.incompatible-browser').addClass('active');
}
// Clicking cancel should dismiss notification boxes.
z.body.on('click', '.incompatible-browser .close', function() {
if (z.capabilities.localStorage) {
localStorage.seen_aurora_pitch = '1';
}
$(this).closest('.incompatible-browser').removeClass('active');
}).on('click', '.incompatible.button', _pd(function(e) {
if (z.capabilities.localStorage) {
delete localStorage.seen_aurora_pitch;
}
$('.incompatible-browser').addClass('active');
}));
z.page.on('fragmentloaded', function() {
z.apps = {};
if (z.capabilities.webApps) {

Просмотреть файл

@ -144,3 +144,11 @@ $('html').ajaxSuccess(function(event, xhr, ajaxSettings) {
$('form.go').change(function() {
this.submit();
});
// If we're inside the Marketplace app, open external links in the Browser.
$(document).on('click', 'a.external, a[rel=external]', function() {
if (z.capabilities.chromeless) {
$(this).attr('target', '_blank');
}
});

Просмотреть файл

@ -81,6 +81,7 @@ CSS = {
'css/mkt/reset.less',
'css/mkt/typography.less',
'css/mkt/site.less',
'css/mkt/banners.less',
'css/common/invisible-upload.less',
'css/common/forms.less',
'css/mkt/forms.less',
@ -233,6 +234,7 @@ JS = {
'js/zamboni/truncation.js',
'js/common/keys.js',
'js/mkt/capabilities.js',
'js/mkt/banners.js',
'js/impala/serializers.js',
'js/mkt/fragments.js',
'js/mkt/navigation.js',

Просмотреть файл

@ -73,28 +73,23 @@
{% if not allow_installs() and not request.GAIA %}
<div class="incompatible-browser incompatible-mobile">
<div>
<a href="http://www.mozilla.org/mobile/aurora/" class="download" target="_blank">
{% trans %}
You must use Firefox Aurora on your Android phone to install Firefox apps.
<b>Learn more</b>
{% endtrans %}
<a href="{{ 'https://market.android.com/details?id=org.mozilla.firefox_beta' if request.MOBILE else 'https://www.mozilla.org/en-US/mobile/beta/' }}" class="download" target="_blank">
<span class="helper"></span>
<span>
{% if request.MOBILE %}
{% trans %}
You must use Firefox Beta to install Firefox apps. <b>Download</b>
{% endtrans %}
{% else %}
{% trans %}
You must use Firefox Beta on your Android phone to install Firefox apps. <b>Learn more</b>
{% endtrans %}
{% endif %}
</span>
</a>
<a href="#" class="close">&times;</a>
<a href="#" class="close" title="{{ _('Close') }}">{{ _('Close') }}</a>
</div>
</div>
{# TODO: Uncomment when we bring back desktop app installation.
<div class="incompatible-browser incompatible-desktop">
<div>
<a href="http://www.mozilla.org/firefox/aurora/" class="download" target="_blank">
{% trans %}
You must use Firefox Aurora to install Firefox apps.
<b>Learn more</b>
{% endtrans %}
</a>
<a href="#" class="close">&times;</a>
</div>
</div>
#}
{% endif %}
<div id="container">