From: Benjamin Auder Date: Mon, 10 Dec 2018 09:11:46 +0000 (+0100) Subject: Attempt to reduce button sizes on small screens X-Git-Url: https://git.auder.net/%7B%7B%20asset%28%27mixstore/css/static/doc/R.css?a=commitdiff_plain;h=b8a0ec4a8182967f25179f60ad9a4b989684d422;p=vchess.git Attempt to reduce button sizes on small screens --- diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 9d9ea378..2da7ad05 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -22,6 +22,7 @@ Vue.component('my-game', { }, render(h) { const [sizeX,sizeY] = VariantRules.size; + const smallScreen = (screen.width <= 500); // Precompute hints squares to facilitate rendering let hintSquares = doubleArray(sizeX, sizeY, false); this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; }); @@ -40,6 +41,7 @@ Vue.component('my-game', { "bottom": true, //display below "seek": this.seek, "playing": this.mode == "human", + "small": smallScreen, }, }, [h('i', { 'class': { "material-icons": true } }, "accessibility")]) @@ -55,6 +57,7 @@ Vue.component('my-game', { "tooltip":true, "bottom": true, "playing": this.mode == "computer", + "small": smallScreen, }, }, [h('i', { 'class': { "material-icons": true } }, "computer")]) @@ -71,6 +74,7 @@ Vue.component('my-game', { "tooltip":true, "bottom": true, "playing": this.mode == "friend", + "small": smallScreen, }, }, [h('i', { 'class': { "material-icons": true } }, "people")]) @@ -129,6 +133,7 @@ Vue.component('my-game', { "indic-right": true, "expert-switch": true, "expert-mode": this.expert, + "small": smallScreen, }, }, [h('i', { 'class': { "material-icons": true } }, "visibility_off")] @@ -255,6 +260,7 @@ Vue.component('my-game', { 'class': { "tooltip":true, "bottom": true, + "small": smallScreen, }, }, [h('i', { 'class': { "material-icons": true } }, "flag")]) @@ -269,12 +275,14 @@ Vue.component('my-game', { style: { "margin-left": "30px" }, on: { click: e => this.undo() }, attrs: { "aria-label": 'Undo' }, + "class": { "small": smallScreen }, }, [h('i', { 'class': { "material-icons": true } }, "fast_rewind")]), h('button', { on: { click: e => this.play() }, attrs: { "aria-label": 'Play' }, + "class": { "small": smallScreen }, }, [h('i', { 'class': { "material-icons": true } }, "fast_forward")]), ] @@ -289,6 +297,7 @@ Vue.component('my-game', { style: { "margin-left": "30px" }, on: { click: this.undoInGame }, attrs: { "aria-label": 'Undo' }, + "class": { "small": smallScreen }, }, [h('i', { 'class': { "material-icons": true } }, "undo")] ), @@ -296,6 +305,7 @@ Vue.component('my-game', { { on: { click: () => { this.mycolor = this.vr.getOppCol(this.mycolor) } }, attrs: { "aria-label": 'Flip' }, + "class": { "small": smallScreen }, }, [h('i', { 'class': { "material-icons": true } }, "cached")] ), diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass index aa3abb90..d23e83f0 100644 --- a/public/stylesheets/variant.sass +++ b/public/stylesheets/variant.sass @@ -5,8 +5,6 @@ @media screen and (max-width: 767px) .col-sm-12 padding: 0 - -@media screen and (max-width: 767px) h4 margin: 0 0 10px 0 p