Position control buttons beneath PGN

public/stylesheets/analyse.css

@@ -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;
+  font-size: 12px;
-  height: 22px;
+  height: 17px;
+  width: 12px;
   display: inline-block;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-  margin-left: -1px;
+  margin-right: -1px;
-  margin-right: -2px;
 }
 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: 480px;
   overflow: auto;
   border: 1px solid #ccc;
 }

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')
     ])
   ];