menu button on the right side, with all required adjustements
This commit is contained in:
Thibault Duplessis
parent
2b6712775c
commit
e80e504840
|
|
@ -1,7 +1,8 @@
|
|||
@(me: User, playing: Boolean)(implicit ctx: Context)
|
||||
<a id="user_tag" class="toggle toggle_auth link"><span data-icon="u">@me.username</span></a>
|
||||
<a id="user_tag" class="toggle toggle_auth link">@me.username</a>
|
||||
<div class="links dropdown">
|
||||
<a href="@routes.User.show(me.username)" class="blank_if_play"><span class="text" data-icon="r">@trans.profile()</span></a>
|
||||
<a href="@routes.Message.inbox(page=1)"><span class="text" data-icon="e">@trans.inbox()</span></a>
|
||||
<a href="@routes.Pref.form"@if(playing){ target="_blank"}><span class="text" data-icon="%">@trans.preferences()</span></a>
|
||||
<a href="@routes.Auth.logout"><span class="text" data-icon="w">@trans.logOut()</span></a>
|
||||
@if(isGranted(_.StaffForum)) {
|
||||
|
|
|
|||
|
|
@ -2,36 +2,6 @@
|
|||
|
||||
<div class="inner">
|
||||
<div class="body">
|
||||
<div class="menu">
|
||||
<section>
|
||||
<h2>Play</h2>
|
||||
<a href="/?any#hook">@trans.createAGame()</a>
|
||||
<a href="@routes.Tournament.home">@trans.tournament()</a>
|
||||
<a href="@routes.Simul.home">Simul</a>
|
||||
<a href="@routes.Tv.index">Lichess TV</a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Learn</h2>
|
||||
<a href="@routes.Puzzle.home">@trans.training()</a>
|
||||
<a href="@routes.Opening.home">@trans.openings()</a>
|
||||
<a href="@routes.Coordinate.home">@trans.coordinates()</a>
|
||||
<a href="@routes.Video.index">Video library</a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Community</h2>
|
||||
<a href="@routes.User.list">@trans.players()</a>
|
||||
<a href="@routes.Team.home()">@trans.teams()</a>
|
||||
<a href="@routes.ForumCateg.index">@trans.forum()</a>
|
||||
<a href="@routes.QaQuestion.index()">@trans.questionsAndAnswers()</a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Tools</h2>
|
||||
<a href="@routes.Editor.index">@trans.boardEditor()</a>
|
||||
<a href="@routes.UserAnalysis.index">@trans.analysis()</a>
|
||||
<a href="@routes.Importer.importGame">@trans.importGame()</a>
|
||||
<a href="@routes.Game.search()">@trans.advancedSearch()</a>
|
||||
</section>
|
||||
</div>
|
||||
@ctx.me.map { me =>
|
||||
<div class="user">
|
||||
<section><h2>@me.username</h2></section>
|
||||
|
|
@ -70,6 +40,36 @@
|
|||
</section>
|
||||
</div>
|
||||
}
|
||||
<div class="menu">
|
||||
<section>
|
||||
<h2>Play</h2>
|
||||
<a href="/?any#hook">@trans.createAGame()</a>
|
||||
<a href="@routes.Tournament.home">@trans.tournament()</a>
|
||||
<a href="@routes.Simul.home">Simul</a>
|
||||
<a href="@routes.Tv.index">Lichess TV</a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Learn</h2>
|
||||
<a href="@routes.Puzzle.home">@trans.training()</a>
|
||||
<a href="@routes.Opening.home">@trans.openings()</a>
|
||||
<a href="@routes.Coordinate.home">@trans.coordinates()</a>
|
||||
<a href="@routes.Video.index">Video library</a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Community</h2>
|
||||
<a href="@routes.User.list">@trans.players()</a>
|
||||
<a href="@routes.Team.home()">@trans.teams()</a>
|
||||
<a href="@routes.ForumCateg.index">@trans.forum()</a>
|
||||
<a href="@routes.QaQuestion.index()">@trans.questionsAndAnswers()</a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Tools</h2>
|
||||
<a href="@routes.Editor.index">@trans.boardEditor()</a>
|
||||
<a href="@routes.UserAnalysis.index">@trans.analysis()</a>
|
||||
<a href="@routes.Importer.importGame">@trans.importGame()</a>
|
||||
<a href="@routes.Game.search()">@trans.advancedSearch()</a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a href="/mobile">Mobile App</a> ı
|
||||
|
|
|
|||
|
|
@ -1,30 +1,15 @@
|
|||
@()
|
||||
@* inline to avoid animation on page load on firefox *@
|
||||
<style type="text/css">
|
||||
#ham-plate {
|
||||
position: relative;
|
||||
width: 1005px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#hamburger {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -16px;
|
||||
z-index: 5001;
|
||||
display: block;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
width: 64px;
|
||||
height: 58px;
|
||||
transform: scale(0.85);
|
||||
-webkit-transform: scale(0.85);
|
||||
transition: opacity 0.13s, transform 0.75s, left 1s;
|
||||
transition: transform 0.75s, left 1s;
|
||||
}
|
||||
#hamburger:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
#hamburger *:before,
|
||||
#hamburger *:after {
|
||||
|
|
|
|||
|
|
@ -61,16 +61,44 @@ chessground: Boolean = true)(body: Html)(implicit ctx: Context)
|
|||
<button type="submit">Accessibility: @ctx.blindMode.fold("Disable", "Enable") blind mode</button>
|
||||
</form>
|
||||
<div id="site_description">@trans.freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents()</div>
|
||||
<div id="ham-plate">
|
||||
<div id="hamburger">
|
||||
<div class="top"></div>
|
||||
<svg version="1.1" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
|
||||
<path id="ham-circle" fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,32h32c0,0,11.723-0.306,10.75-11 c-0.25-2.75-1.644-4.971-2.869-7.151C50.728,7.08,42.767,2.569,33.733,2.054C33.159,2.033,32.599,2,32,2C15.432,2,2,15.432,2,32 c0,16.566,13.432,30,30,30c16.566,0,30-13.434,30-30C62,15.5,48.5,2,32,2S1.875,15.5,1.875,32"/>
|
||||
</svg>
|
||||
<div class="bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="top" class="@ctx.is3d.fold("is3d", "is2d")">
|
||||
<div id="ham-plate">
|
||||
<div id="hamburger">
|
||||
<div class="top"></div>
|
||||
<svg version="1.1" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
|
||||
<path id="ham-circle" fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,32h32c0,0,11.723-0.306,10.75-11 c-0.25-2.75-1.644-4.971-2.869-7.151C50.728,7.08,42.767,2.569,33.733,2.054C33.159,2.033,32.599,2,32,2C15.432,2,2,15.432,2,32 c0,16.566,13.432,30,30,30c16.566,0,30-13.434,30-30C62,15.5,48.5,2,32,2S1.875,15.5,1.875,32"/>
|
||||
</svg>
|
||||
<div class="bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lichess_language fright">
|
||||
<a class="toggle link" href="#">@langName(lang)</a>
|
||||
<form action="@routes.I18n.select" method="POST" class="language_links dropdown" data-url="@staticUrl("trans/refs.json")?v=@assetVersion">
|
||||
<li><a href="@routes.I18n.contribute">Help translate Lichess!</a></li>
|
||||
</form>
|
||||
</div>
|
||||
@ctx.me.map { me =>
|
||||
<div class="auth fright">
|
||||
@auth.userDropdown(me, playing)
|
||||
</div>
|
||||
<div id="message_notifications_parent" class="message_notifications fright @if(ctx.nbMessages == 0) {none}">
|
||||
<a id="message_notifications_tag" class="toggle link" data-href="@routes.Message.preview">
|
||||
<span data-icon="e"></span>
|
||||
<span id="nb_messages" class="new_messages unread">@ctx.nbMessages</span>
|
||||
</a>
|
||||
<div id="message_notifications" class="links dropdown">
|
||||
<div id="message_notifications_display" class="content"></div>
|
||||
<div class="title"><a href="@routes.Message.inbox(page=1)">@trans.inbox() »</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="challenge_notifications fright">
|
||||
<a id="challenge_notifications_tag" class="toggle link none">
|
||||
<span data-icon="U"></span>
|
||||
<span id="nb_challenges" class="new_challenges unread">0</span>
|
||||
</a>
|
||||
<div id="challenge_notifications" class="links dropdown"></div>
|
||||
</div>
|
||||
}
|
||||
@if(!zen) {
|
||||
<div id="sound_control" class="fright">
|
||||
<button id="sound_state" class="a link available hint--bottom-left">
|
||||
|
|
@ -94,36 +122,6 @@ chessground: Boolean = true)(body: Html)(implicit ctx: Context)
|
|||
<span data-icon="v"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="lichess_language fright">
|
||||
<a class="toggle link text" href="#">
|
||||
<span data-icon="u">@langName(lang)</span>
|
||||
</a>
|
||||
<form action="@routes.I18n.select" method="POST" class="language_links dropdown" data-url="@staticUrl("trans/refs.json")?v=@assetVersion">
|
||||
<li><a href="@routes.I18n.contribute">Help translate Lichess!</a></li>
|
||||
</form>
|
||||
</div>
|
||||
@ctx.me.map { me =>
|
||||
<div class="auth fright">
|
||||
@auth.userDropdown(me, playing)
|
||||
</div>
|
||||
<div id="message_notifications_parent" class="message_notifications fright">
|
||||
<a id="message_notifications_tag" class="toggle link" data-href="@routes.Message.preview">
|
||||
<span data-icon="e"></span>
|
||||
<span id="nb_messages" class="new_messages@if(ctx.nbMessages > 0) { unread}">@ctx.nbMessages</span>
|
||||
</a>
|
||||
<div id="message_notifications" class="links dropdown">
|
||||
<div id="message_notifications_display" class="content"></div>
|
||||
<div class="title"><a href="@routes.Message.inbox(page=1)">@trans.inbox() »</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="challenge_notifications fright">
|
||||
<a id="challenge_notifications_tag" class="toggle link none">
|
||||
<span data-icon="U"></span>
|
||||
<span id="nb_challenges" class="new_challenges unread">0</span>
|
||||
</a>
|
||||
<div id="challenge_notifications" class="links dropdown"></div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@if(!zen) {
|
||||
@defining(reportNbUnprocessed) { nb =>
|
||||
|
|
|
|||
|
|
@ -410,7 +410,7 @@ lichess.storage = {
|
|||
$('#chat').chat("append", msg);
|
||||
},
|
||||
nbm: function(e) {
|
||||
$('#nb_messages').text(e || "0").toggleClass("unread", e > 0);
|
||||
$('#nb_messages').text(e || "0").parent().parent().toggle(e > 0);
|
||||
},
|
||||
redirect: function(o) {
|
||||
setTimeout(function() {
|
||||
|
|
@ -959,25 +959,14 @@ lichess.storage = {
|
|||
$('.glowing').toggleClass('glow');
|
||||
}, 2000);
|
||||
|
||||
$('#hamburger').click(function() {
|
||||
$('#ham-plate').click(function() {
|
||||
document.body.classList.toggle('fpmenu');
|
||||
});
|
||||
if (location.hash === '#fpmenu') $('#ham-plate').click();
|
||||
Mousetrap.bind('esc', function() {
|
||||
$('#hamburger').click();
|
||||
$('#ham-plate').click();
|
||||
return false;
|
||||
});
|
||||
(function(key) {
|
||||
if (!lichess.storage.get(key)) {
|
||||
var $help = $('<span class="help">' +
|
||||
'← Click the menu icon or press the <escape> key!' +
|
||||
'</span>');
|
||||
$('#ham-plate').append($help.fadeIn(2000));
|
||||
$('#hamburger').click(function() {
|
||||
$help.remove();
|
||||
lichess.storage.set(key, 1);
|
||||
});
|
||||
}
|
||||
})('ham-' + document.body.getAttribute('data-user'));
|
||||
Mousetrap.bind('g h', function() {
|
||||
location.href = '/';
|
||||
});
|
||||
|
|
|
|||
|
|
@ -506,13 +506,7 @@ html {
|
|||
body {
|
||||
font: 12px'Noto Sans', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
|
||||
color: #707070;
|
||||
background: #eee;
|
||||
background-image: -moz-linear-gradient(top, #d7d7d7 0%, #eeeeee 116px);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7d7d7), color-stop(116px, #eeeeee));
|
||||
background-image: -webkit-linear-gradient(top, #d7d7d7 0%, #eeeeee 116px);
|
||||
background-image: -ms-linear-gradient(top, #d7d7d7 0%, #eeeeee 116px);
|
||||
background-image: linear-gradient(to bottom, #d7d7d7 0%, #eeeeee 116px);
|
||||
background-repeat: no-repeat;
|
||||
background: #eee no-repeat linear-gradient(to bottom, #d7d7d7 0%, #eeeeee 116px);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
a,
|
||||
|
|
@ -563,7 +557,7 @@ strong {
|
|||
}
|
||||
body > div.content {
|
||||
width: 1005px;
|
||||
margin: 36px auto 30px auto;
|
||||
margin: 30px auto 30px auto;
|
||||
}
|
||||
body.fpmenu > div.content {
|
||||
display: none;
|
||||
|
|
@ -571,10 +565,33 @@ body.fpmenu > div.content {
|
|||
#top {
|
||||
position: relative;
|
||||
height: 24px;
|
||||
width: 1005px;
|
||||
margin: 0 auto;
|
||||
padding: 5px 70px 0 0;
|
||||
box-sizing: border-box;
|
||||
z-index: 5001;
|
||||
}
|
||||
body.fpmenu #top {
|
||||
display: none;
|
||||
#ham-plate {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
margin-left: 30px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.16), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: pointer;
|
||||
transition: top 0.13s;
|
||||
}
|
||||
#ham-plate:hover {
|
||||
top: -3px;
|
||||
}
|
||||
body.fpmenu #ham-plate {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
#site_description {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
|
|
@ -916,19 +933,18 @@ body.offline #nb_connected_players {
|
|||
#top .fright {
|
||||
float: right;
|
||||
}
|
||||
body.fpmenu #top {
|
||||
height: 0;
|
||||
}
|
||||
body.fpmenu #top .fright {
|
||||
display: none;
|
||||
}
|
||||
.unread {
|
||||
padding: 1px 5px 1px 4px;
|
||||
font-weight: bold;
|
||||
border-radius: 2px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
#top .new_messages,
|
||||
#top .new_challenges {
|
||||
display: none;
|
||||
}
|
||||
#top .unread {
|
||||
display: inline;
|
||||
}
|
||||
#top .shown a.toggle {
|
||||
background: #fff;
|
||||
}
|
||||
|
|
@ -978,13 +994,15 @@ body.fpmenu #fpmenu {
|
|||
}
|
||||
#fpmenu .user,
|
||||
#fpmenu .anon {
|
||||
width: 402px;
|
||||
margin-left: 620px;
|
||||
float: left;
|
||||
width: 400px;
|
||||
border-right: 1px solid #cfcfcf;
|
||||
padding: 0 40px 40px 0;
|
||||
}
|
||||
#fpmenu .perf {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
width: 45%;
|
||||
width: 49%;
|
||||
margin: 18px 0;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
|
@ -1073,16 +1091,13 @@ body.fpmenu #fpmenu {
|
|||
text-decoration: none;
|
||||
}
|
||||
#fpmenu .menu {
|
||||
float: left;
|
||||
width: 500px;
|
||||
border-right: 1px solid #cfcfcf;
|
||||
margin-left: 20px;
|
||||
padding-bottom: 40px;
|
||||
width: 540px;
|
||||
margin-left: 540px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#fpmenu .menu section {
|
||||
float: left;
|
||||
width: 250px;
|
||||
width: 50%;
|
||||
}
|
||||
#fpmenu section a {
|
||||
color: #d59120;
|
||||
|
|
@ -1137,17 +1152,22 @@ body.fpmenu #fpmenu {
|
|||
#fpmenu .body {
|
||||
padding-left: 13%;
|
||||
}
|
||||
#fpmenu .menu {
|
||||
#fpmenu .user {
|
||||
display: none;
|
||||
}
|
||||
#fpmenu .anon {
|
||||
border: none;
|
||||
float: none;
|
||||
margin: auto;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
#fpmenu .user,
|
||||
#fpmenu .anon {
|
||||
#fpmenu .menu {
|
||||
margin: auto;
|
||||
width: 500px;
|
||||
}
|
||||
body.fpmenu #top {
|
||||
width: calc(100% - 25px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 440px) {
|
||||
#fpmenu .body {
|
||||
|
|
@ -1310,7 +1330,6 @@ form.wide textarea {
|
|||
#top a.toggle {
|
||||
display: block;
|
||||
float: left;
|
||||
padding-left: 4px;
|
||||
}
|
||||
#top a.toggle,
|
||||
#top #sound_state {
|
||||
|
|
@ -1519,11 +1538,13 @@ body #themepicker div.is3d,
|
|||
#sound_control {
|
||||
margin-right: 5px;
|
||||
transition: 0.13s;
|
||||
position: relative;
|
||||
}
|
||||
#sound_control .dropdown {
|
||||
width: 40px;
|
||||
background: none!important;
|
||||
padding: 5px 0 20px 0;
|
||||
left: -2px;
|
||||
}
|
||||
#sound_control.sound_state_on:hover .dropdown {
|
||||
display: block;
|
||||
|
|
|
|||
Loading…
Reference in a new issue