From: Benjamin Auder <benjamin.auder@somewhere>
Date: Tue, 11 Dec 2018 13:52:30 +0000 (+0100)
Subject: Fix settings button on small screens
X-Git-Url: https://git.auder.net/img/css/pieces/cn.svg?a=commitdiff_plain;h=05290bf9c98d159a3f45d4961b26ef5806834b89;p=vchess.git

Fix settings button on small screens
---

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index c7ec715a..f5b7eda2 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -92,7 +92,7 @@ Vue.component('my-game', {
 			const settingsBtnElt = document.getElementById("settingsBtn");
 			const indicWidth = !!settingsBtnElt //-2 for border:
 				? parseFloat(window.getComputedStyle(settingsBtnElt).height.slice(0,-2)) - 2
-				: 37; //TODO: always 37?
+				: (smallScreen ? 31 : 37);
 			if (this.mode == "human")
 			{
 				let connectedIndic = h(
@@ -140,8 +140,8 @@ Vue.component('my-game', {
 						"tooltip": true,
 						"topindicator": true,
 						"indic-right": true,
-						"settings-btn": true,
-						"small": smallScreen,
+						"settings-btn": !smallScreen,
+						"settings-btn-small": smallScreen,
 					},
 				},
 				[h('i', { 'class': { "material-icons": true } }, "settings")]
diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 0ea9af42..9f38e774 100644
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -76,6 +76,9 @@ figure.diagram-container > .diagram
 .settings-btn
   padding: 6px 7px 0 7px
 
+.settings-btn-small
+  padding: 0 3px
+
 .white-turn
   background-color: white