Change the look of chess games.
This commit is contained in:
parent
e308a5099c
commit
ee3ba7c3d4
@ -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');
|
||||
|
@ -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; }
|
||||
|
@ -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> vs. <span id="GameBlack"></span> • <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> - <span id="GameBlack"></span> <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>
|
||||
|
Loading…
Reference in New Issue
Block a user