Change the look of chess games.

_assets/javascripts/custom.js

@@ -1,15 +1,4 @@
 $(function() {
-  /* Fix the position of chess board while scrolling */
-  if (obj = $('#GameWrapper')) {
-    obj.affix({
-      offset: {
-        top: function () {
-          return obj.parent().offset().top;
-        }
-      }
-    })
-  };
-
   /* Sort a tournament table with tablesorter */
   $('.tablesorter .opponent').addClass('{sorter: false}');
   $('.tablesorter').tablesorter({
@@ -27,6 +16,12 @@ function customFunctionOnPgnGameLoad() {
 }
 function customFunctionOnMove() {
   refreshButtonset();
+
+  /* Show move comment */
+  if (CurrentVar == 0 && (theObj = document.getElementById("GameMoveComment"))) {
+    theObj.innerHTML = '<span class="comment">' +
+      strippedMoveComment(CurrentPly, 0, true) + '</span>';
+  }
 }
 function refreshButtonset() {
   $('#GameButtons input').addClass('btn btn-default');

_assets/stylesheets/less/pgn4web.less

@@ -1,17 +1,35 @@
 @squareSize: 56px;
 @boardBorderWidth: 4px;
 @boardSize: 8 * @squareSize + 2 * @boardBorderWidth;
+@tableBorder: 1px solid #ddd;
 
-#GameWrapper {
-  float: left;
-  width: @boardSize;
-}
-#TextWrapper {
-  margin-left: @boardSize;
-  padding-left: 15px;
-}
-#GameWrapper.affix {
+body, html { height: 100%; }
+#GameWrapper { min-height: 100%; }
+#GameBoardWrapper { position: relative; }
+#GameTextWrapper {
+  position: absolute;
   top: 0;
+  bottom: 0;
+  left: @boardSize + 10px;
+
+  display: block;
+  width: 180px;
+  overflow-y: auto;
+}
+#GameText {
+  display: table;
+  width: 141px;
+  border-top: @tableBorder;
+  border-left: @tableBorder;
+  .move {
+    display: table-cell;
+    border-bottom: @tableBorder;
+    border-right: @tableBorder;
+    text-align: center;
+  }
+  span.move { width: 40px; }
+  a.move { width: 50px; }
+  .variation { float: left; }
 }
 
 .boardTable {
@@ -34,3 +52,4 @@
 .blackSquare, .highlightBlackSquare {
   background: #CC9966;
 }
+.moveOn, .variationOn { background-color: #ccc; }

_layouts/game.html

@@ -7,23 +7,26 @@ layout: default
   {{ content }}
 </div>
 
-<div class="col-xs-12">
-  <div id="GameWrapper" data-spy="affix">
-    <p></p>
+<div id="GameWrapper" class="col-xs-12 col-sm-8 col-sm-offset-2">
+  <strong><span id="GameWhite"></span>&nbsp;vs.&nbsp;<span id="GameBlack"></span>&nbsp;&#8226;&nbsp;<span id="GameResult"></span></strong>
+
+  <p></p>
+
+  <div id="GameBoardWrapper">
     <div id="GameSelector"></div>
     <p></p>
     <div id="GameBoard"></div>
     <p></p>
     <div id="GameButtons"></div>
+
+    <div id="GameTextWrapper">
+      <div id="GameText"></div>
+    </div>
   </div>
 
-  <div id="TextWrapper">
-    <p></p>
-    <b><span id="GameWhite"></span>&nbsp;-&nbsp;<span id="GameBlack"></span>&nbsp;&nbsp;<span id="GameResult"></span></b>
-    <p></p>
-    <div id="GameText"></div>
-    <p></p>
-  </div>
+  <p></p>
+
+  <div id="GameMoveComment"></div>
 </div>
 
 <!-- pgn4web JavaScript -->
@@ -36,6 +39,5 @@ layout: default
  SetImagePath("/assets/img/chesspieces/wikipedia");
  SetImageType("png");
  SetGameSelectorOptions("Выбрать партию ...", false, 0, 0, 0, 15, 15, 0, 10); // (head, num, chEvent, chSite, chRound, chWhite, chBlack, chResult, chDate);
- SetCommentsOnSeparateLines(true);
- SetShortcutKeysEnabled(true);
+ SetCommentsIntoMoveText(false);
 </script>