new banner pitching Firefox Beta (bug 800654, bug 813737, bug 813805)
This commit is contained in:
Chris Van
Родитель
e096dbe251
Коммит
eadc93819e
|
|
@ -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,12 +163,10 @@ 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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 2.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 1.5 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 35 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 24 KiB |
|
|
@ -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">
|
||||
<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 Aurora on your Android phone to install Firefox apps.
|
||||
<b>Learn more</b>
|
||||
You must use Firefox Beta to install Firefox apps. <b>Download</b>
|
||||
{% endtrans %}
|
||||
</a>
|
||||
<a href="#" class="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">
|
||||
{% else %}
|
||||
{% trans %}
|
||||
You must use Firefox Aurora to install Firefox apps.
|
||||
<b>Learn more</b>
|
||||
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">×</a>
|
||||
<a href="#" class="close" title="{{ _('Close') }}">{{ _('Close') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
#}
|
||||
{% endif %}
|
||||
|
||||
<div id="container">
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче