diff --git a/app/views/base/layout.scala.html b/app/views/base/layout.scala.html index f54c81385e..94af8faf57 100644 --- a/app/views/base/layout.scala.html +++ b/app/views/base/layout.scala.html @@ -118,6 +118,12 @@ openGraph: Map[Symbol, String] = Map.empty)(body: Html)(implicit ctx: Context) 2D 3D +
+
+
+ +
+
@lila.pref.Theme.list.map { theme => diff --git a/public/javascripts/big.js b/public/javascripts/big.js index 087f50299c..f1e6073d2c 100644 --- a/public/javascripts/big.js +++ b/public/javascripts/big.js @@ -451,6 +451,7 @@ var storage = { }; var showDimensions = function(is3d) { $body.removeClass('is2d is3d').addClass(is3d ? 'is3d' : 'is2d'); + setZoom(getZoom()); }; $themepicker.find('.background a').click(function() { background = $(this).data('bg'); @@ -478,6 +479,50 @@ var storage = { }, function() { showDimensions(is3d); }).filter('.' + (is3d ? 'd3' : 'd2')).addClass('active'); + + var $boardWrap = $(".lichess_game .cg-board-wrap"); + var $lichessGame = $(".lichess_game"); + var $underBoard = $(".underboard_content"); + var $content = $(".content"); + + var getZoom = function() { + return storage.get('zoom') || 1; + }; + var setZoom = function(v) { + storage.set('zoom', v); + + $boardWrap.css("width", 512*getZoom() + 'px'); + $underBoard.css("margin-left", (getZoom() - 1) * 250 + 'px'); + if (is3d) { + $boardWrap.css("height", 479.08572*getZoom() + 'px'); + $lichessGame.css("height", 479.08572*getZoom() + 'px'); + } else { + $boardWrap.css("height", 512*getZoom() + 'px'); + $lichessGame.css("height", 512*getZoom() + 'px'); + } + + if ($lichessGame.length) { + // if on a board with a game + $content.css("margin-left", 'calc( 50% - ' + (246.5 + 256*getZoom()) + 'px)'); + } + + }; + var manuallySetZoom = $.fp.debounce(function(v) { + setZoom(v); + }, 10); + setZoom(getZoom()); // Instantiate the page's zoom + + $themepicker.find('.slider').slider({ + orientation: "horizontal", + min: 1, + max: 2, + range: 'min', + step: 0.01, + value: getZoom(), + slide: function(e, ui) { + manuallySetZoom(ui.value); + } + }); }); $('.js_email').one('click', function() { diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css index 629c3a33fd..8b0248d80b 100644 --- a/public/stylesheets/common.css +++ b/public/stylesheets/common.css @@ -1308,6 +1308,18 @@ body.is3d #themepicker div.color_demo { display: block; text-decoration: none; } +#themepicker .zoom_control .slider { + margin: auto; + width: 200px; + height: 10px; +} +#themepicker .zoom_control .slider .ui-slider-handle { + margin: 0 0 -9px -3px; +} +#themepicker .zoom_control .slider .ui-widget-header { + width: 10px; + bottom: 0; +} #sound_control { margin-right: 5px; float: right;