diff --git a/public/stylesheets/analyse.css b/public/stylesheets/analyse.css index 4951655f4d..238a3c1dc6 100644 --- a/public/stylesheets/analyse.css +++ b/public/stylesheets/analyse.css @@ -33,7 +33,7 @@ div.analysis_menu > a.active { border-top: 1px solid #eee; } div.analysis_panels { - margin-top: 10px; + margin-top: -10px; } div.analysis_panels > div { width: 512px; @@ -98,21 +98,25 @@ div.game_control, div.continue { text-align: center; } +div.game_control { + width: 290px; + margin-left: -6px; +} div.continue { margin: 20px 0; } div.game_control a { - font-size: 16px; - height: 22px; + font-size: 12px; + height: 17px; + width: 12px; display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; - margin-left: -1px; - margin-right: -2px; + margin-right: -1px; } div.game_control .jumps { - margin-left: 1em; + margin-right: 1em; } .lichess_ground { height: 100%; @@ -120,7 +124,7 @@ div.game_control .jumps { .lichess_ground .replay { margin-left: 10px; width: 256px; - height: 100%; + height: calc(100% - 30px); overflow: auto; border: 1px solid #ccc; } @@ -215,7 +219,7 @@ div.underboard .center { padding: 0; } div.advice_summary { - margin-top: 42px; + margin-top: -15px; } div.advice_summary td { padding: 2px 8px; diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css index 104a6c9fe2..49a8236a32 100644 --- a/public/stylesheets/common.css +++ b/public/stylesheets/common.css @@ -818,8 +818,13 @@ div.side_box div.game_infos::before { opacity: 0.7; } div.side_box div.game_infos .bookmark { - margin-top: -30px; - margin-right: -13px; + position: absolute; + right: 0px; + background: radial-gradient(ellipse at center, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 25%, rgba(238, 238, 238, 0) 100%); + visibility: hidden; +} +div.side_box:hover > div.game_infos .bookmark { + visibility: visible; } div.side_box .game_infos .setup { display: block; diff --git a/ui/analyse/src/view.js b/ui/analyse/src/view.js index d7f3f84925..326555b562 100644 --- a/ui/analyse/src/view.js +++ b/ui/analyse/src/view.js @@ -215,21 +215,6 @@ function buttons(ctrl) { var nbMoves = ctrl.data.game.moves.length; return [ m('div.game_control', [ - m('a.button.hint--bottom', { - 'data-hint': ctrl.trans('flipBoard'), - href: ctrl.router.Round.watcher(ctrl.data.game.id, ctrl.data.opponent.color).url - }, m('span[data-icon=B]')), - m('a.button.hint--bottom', { - 'data-hint': ctrl.trans('boardEditor'), - href: '/' + ctrl.data.game.id + '/edit?fen=' + ctrl.vm.situation.fen, - rel: 'nofollow' - }, m('span[data-icon=m]')), - m('a.button.hint--bottom', { - 'data-hint': ctrl.trans('continueFromHere'), - onclick: function() { - ctrl.vm.continue = !ctrl.vm.continue - } - }, m('span[data-icon=U]')), m('div.jumps.hint--bottom', { 'data-hint': 'Tip: use your keyboard arrow keys!' }, [ @@ -247,7 +232,22 @@ function buttons(ctrl) { 'data-icon': b[1], onclick: enabled ? partial(b[2], ctrl) : null }); - })) + })), + m('a.button.hint--bottom', { + 'data-hint': ctrl.trans('flipBoard'), + href: ctrl.router.Round.watcher(ctrl.data.game.id, ctrl.data.opponent.color).url + }, m('span[data-icon=B]')), + m('a.button.hint--bottom', { + 'data-hint': ctrl.trans('boardEditor'), + href: '/' + ctrl.data.game.id + '/edit?fen=' + ctrl.vm.situation.fen, + rel: 'nofollow' + }, m('span[data-icon=m]')), + m('a.button.hint--bottom', { + 'data-hint': ctrl.trans('continueFromHere'), + onclick: function() { + ctrl.vm.continue = !ctrl.vm.continue + } + }, m('span[data-icon=U]')) ]), ctrl.vm.continue ? m('div.continue', [ m('a.button', { @@ -279,11 +279,11 @@ module.exports = function(ctrl) { if (!isUpdate) setTimeout(partial(autoScroll, el), 100); } }, - renderAnalyse(ctrl))) + renderAnalyse(ctrl)), buttons(ctrl)) ]) ]), m('div.underboard', [ - m('div.center', buttons(ctrl)), + m('div.center'), m('div.right') ]) ];