From 86873d4101b0bcd4e96ae79a975279c65d889619 Mon Sep 17 00:00:00 2001 From: "Steinar H. Gunderson" Date: Tue, 19 Nov 2013 20:31:34 +0100 Subject: [PATCH] Do various tweaks to work better on mobile devices. --- www/css/remoteglot.css | 25 ++++++++++++++++++++++++- www/index.html | 3 ++- www/js/remoteglot.js | 19 +++++++++++++------ 3 files changed, 39 insertions(+), 8 deletions(-) diff --git a/www/css/remoteglot.css b/www/css/remoteglot.css index 543a5b6..6009a24 100644 --- a/www/css/remoteglot.css +++ b/www/css/remoteglot.css @@ -61,12 +61,35 @@ p { display: block; float: left; width: 400px; - height: 400px; margin-right: 1em; margin-bottom: 1em; + padding: 0; } #analysis { display: block; min-width: 400px; overflow: hidden; } + +/* If the board is too wide for the screen, shrink it to fit, + * and then put the analysis below. */ +@media all and (max-width: 400px) { + #board { + width: 100%; + float: none; + } + #analysis { + min-width: 0; + } +} + +/* If there is almost space for the analysis, shrink the board a bit, too. */ +@media all and (min-width: 500px) and (max-width: 810px) { + #board { + float: left; + width: 50%; + } + #analysis { + min-width: 0; + } +} diff --git a/www/index.html b/www/index.html index 887ef4b..24beffb 100644 --- a/www/index.html +++ b/www/index.html @@ -7,8 +7,9 @@ + - +

Analysis

diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js index fa7e5d4..114aaad 100644 --- a/www/js/remoteglot.js +++ b/www/js/remoteglot.js @@ -1,3 +1,4 @@ +var board = []; var arrows = []; var arrow_targets = []; var occupied_by_arrows = []; @@ -85,10 +86,15 @@ var create_arrow = function(from_square, to_square, fg_color, line_width, arrow_ var to_col = to_square.charCodeAt(0) - "a1".charCodeAt(0); var to_row = to_square.charCodeAt(1) - "a1".charCodeAt(1); - var from_y = (7 - from_row)*49 + 25; - var to_y = (7 - to_row)*49 + 25; - var from_x = from_col*49 + 25; - var to_x = to_col*49 + 25; + var zoom_factor = $("#board").width() / 400.0; + line_width *= zoom_factor; + arrow_size *= zoom_factor; + + var square_width = Math.floor(($("#board").width() - 1) / 8); + var from_y = (7 - from_row + 0.5)*square_width + 1; + var to_y = (7 - to_row + 0.5)*square_width + 1; + var from_x = (from_col + 0.5)*square_width + 1; + var to_x = (to_col + 0.5)*square_width + 1; var dx = to_x - from_x; var dy = to_y - from_y; @@ -140,7 +146,8 @@ var create_arrow = function(from_square, to_square, fg_color, line_width, arrow_ ["Arrow", { cssClass:"l1arrow", location:1.0, - width: arrow_size, length: arrow_size, + width: arrow_size, + length: arrow_size, paintStyle:{ lineWidth:line_width, strokeStyle:"#000", @@ -378,7 +385,7 @@ var update_board = function(board, data) { var init = function() { // Create board. - var board = new ChessBoard('board', 'start'); + board = new ChessBoard('board', 'start'); request_update(board, 1); -- 2.39.2