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;