Fix settings button on small screens

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index c7ec715..f5b7eda 100644 (file)
--- 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 0ea9af4..9f38e77 100644 (file)
--- 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