require grid support, preparing for v2
Thibault Duplessis
parent
c2addca2a4
commit
ea14b5b2d3
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
|
|
@ -0,0 +1,115 @@
|
|||
<div id="browser-upgrade">
|
||||
<style>
|
||||
#browser-upgrade {
|
||||
position: relative;
|
||||
font-size: 1.2em;
|
||||
width: 100%;
|
||||
background: hsl(37, 74%, 48%);
|
||||
color: #fff;
|
||||
}
|
||||
#browser-upgrade .close {
|
||||
font-family: monospace;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
color: #fff;
|
||||
}
|
||||
#browser-upgrade article {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1em 0;
|
||||
}
|
||||
#browser-upgrade .diagnostic {
|
||||
margin-right: 2rem;
|
||||
text-align: right;
|
||||
}
|
||||
#browser-upgrade h1 {
|
||||
font-size: 2.5em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#browser-upgrade .browsers {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
#browser-upgrade .browser,
|
||||
#browser-upgrade .browser:hover,
|
||||
#browser-upgrade .browser:visited {
|
||||
border-radius: 3px;
|
||||
padding: 1rem;
|
||||
flex: 0 0 50%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
#browser-upgrade .browser:hover {
|
||||
background: hsl(209, 79%, 53%);
|
||||
}
|
||||
#browser-upgrade .browser span {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
/* background: url(//lichess1.org/assets/images/browsers-bg.png) no-repeat; */
|
||||
background: url(//lv1-a.org/assets/images/browsers-bg.png) no-repeat;
|
||||
background-size: auto 160px;
|
||||
}
|
||||
#browser-upgrade .chrome span {
|
||||
background-position: 0 0;
|
||||
}
|
||||
#browser-upgrade .chrome:hover span {
|
||||
background-position: 0 -80px;
|
||||
}
|
||||
#browser-upgrade .firefox span {
|
||||
background-position: -80px 0;
|
||||
}
|
||||
#browser-upgrade .firefox:hover span {
|
||||
background-position: -80px -80px;
|
||||
}
|
||||
#browser-upgrade .footer {
|
||||
background: hsl(37, 74%, 38%);
|
||||
padding: 1em;
|
||||
text-align: right;
|
||||
}
|
||||
#browser-upgrade .footer *,
|
||||
#browser-upgrade .footer *:hover,
|
||||
#browser-upgrade .footer *:visited {
|
||||
margin-left: 1em;
|
||||
color: #fff;
|
||||
}
|
||||
#browser-upgrade .footer a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
<a class="close" title="Close">X</a>
|
||||
<article>
|
||||
<div class="diagnostic">
|
||||
<h1>Outdated browser</h1>
|
||||
<p>You will need a better browser to continue using Lichess.</p>
|
||||
<p>We recommend installing Firefox or Chrome:</p>
|
||||
</div>
|
||||
<div class="browsers">
|
||||
<a class="firefox browser" href="http://www.mozilla.org/firefox/new/">
|
||||
<span></span>
|
||||
FIREFOX
|
||||
</a>
|
||||
<a class="chrome browser" href="https://www.google.com/chrome/browser/desktop/">
|
||||
<span></span>
|
||||
CHROME
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
<div class="footer">
|
||||
<span>The latest versions of Opera, Safari and Edge also work.</span>
|
||||
<span>|</span>
|
||||
<a href="#">Why this change?</a>
|
||||
<span>|</span>
|
||||
<a href="#">I can't get a better browser</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -405,6 +405,7 @@ body {
|
|||
overflow-x: hidden;
|
||||
cursor: default;
|
||||
}
|
||||
@supports (display: grid) { body { --grid: 1; } }
|
||||
body.no-select {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
|
|
|||
|
|
@ -164,8 +164,8 @@ lichess.topMenuIntent = function() {
|
|||
suggestion: function(o) {
|
||||
var tag = opts.tag || 'a';
|
||||
return '<' + tag + ' class="ulpt user_link' + (o.online ? ' online' : '') + '" ' + (tag === 'a' ? '' : 'data-') + 'href="/@/' + o.name + '">' +
|
||||
'<i class="line' + (o.patron ? ' patron' : '') + '"></i>' + (o.title ? '<span class="title">' + o.title + '</span> ' : '') + o.name +
|
||||
'</' + tag + '>';
|
||||
'<i class="line' + (o.patron ? ' patron' : '') + '"></i>' + (o.title ? '<span class="title">' + o.title + '</span> ' : '') + o.name +
|
||||
'</' + tag + '>';
|
||||
}
|
||||
}
|
||||
}).on('typeahead:render', function() {
|
||||
|
|
@ -606,15 +606,49 @@ lichess.topMenuIntent = function() {
|
|||
return false;
|
||||
});
|
||||
|
||||
(function() {
|
||||
var state = lichess.storage.get('grid');
|
||||
var shown = false;
|
||||
var show = function() {
|
||||
if (shown) return;
|
||||
shown = true;
|
||||
$.get(lichess.assetUrl('oops/browser.html'), function(html) {
|
||||
$('body').prepend(html);
|
||||
$('#browser-upgrade .close').click(function() {
|
||||
$('#browser-upgrade').remove();
|
||||
schedule();
|
||||
});
|
||||
testSoon();
|
||||
});
|
||||
};
|
||||
var testSoon = function() {
|
||||
setTimeout(function() {
|
||||
if (getComputedStyle(document.body).getPropertyValue('--grid%%%%%%%%%%%%%%%%%%%%%%%%%%%%')) {
|
||||
$('#browser-upgrade').remove();
|
||||
schedule();
|
||||
}
|
||||
else {
|
||||
lichess.storage.set('grid', 'bad');
|
||||
show();
|
||||
}
|
||||
}, 3000)
|
||||
};
|
||||
var schedule = function() {
|
||||
lichess.storage.set('grid', Date.now() + 1000 * 3600 * 24 * 7);
|
||||
};
|
||||
if (state == 'bad') show();
|
||||
else if (isNaN(state) || state < Date.now()) testSoon();
|
||||
})();
|
||||
|
||||
if (window.Fingerprint2) setTimeout(function() {
|
||||
var t = Date.now()
|
||||
new Fingerprint2({
|
||||
excludeJsFonts: true
|
||||
}).get(function(res) {
|
||||
$i = $('#signup-fp-input');
|
||||
if ($i.length) $i.val(res);
|
||||
else $.post('/auth/set-fp/' + res + '/' + (Date.now() - t));
|
||||
});
|
||||
new Fingerprint2({
|
||||
excludeJsFonts: true
|
||||
}).get(function(res) {
|
||||
$i = $('#signup-fp-input');
|
||||
if ($i.length) $i.val(res);
|
||||
else $.post('/auth/set-fp/' + res + '/' + (Date.now() - t));
|
||||
});
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue