From 1e02d16d2a376f7ef0af3c1ea36948a5f5926034 Mon Sep 17 00:00:00 2001 From: Benjamin Auder Date: Wed, 8 Apr 2020 22:44:00 +0200 Subject: [PATCH] At last: working fix for tooltips on smartphone + fix spacing above the game --- client/src/components/MoveList.vue | 20 +++---- client/src/views/Game.vue | 83 ++++++++++++------------------ 2 files changed, 44 insertions(+), 59 deletions(-) diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue index 6e9e850f..da3c0472 100644 --- a/client/src/components/MoveList.vue +++ b/client/src/components/MoveList.vue @@ -22,20 +22,23 @@ div @click="$emit('showrules')" ) | {{ st.tr["Rules"] }} - button.tooltip( + button( + :class="btnTooltipClass" onClick="window.doClick('modalAdjust')" :aria-label="st.tr['Resize board']" ) img.inline(src="/images/icons/resize.svg") - button#analyzeBtn.tooltip( - v-show="canAnalyze" + button#analyzeBtn( + v-if="canAnalyze" + :class="btnTooltipClass" @click="$emit('analyze')" :aria-label="st.tr['Analyse']" ) img.inline(src="/images/icons/analyse.svg") #downloadDiv(v-if="canDownload") a#download(href="#") - button.tooltip( + button( + :class="btnTooltipClass" @click="$emit('download')" :aria-label="st.tr['Download'] + ' PGN'" ) @@ -76,12 +79,6 @@ export default { mounted: function() { document.getElementById("adjuster") .addEventListener("click", processModalClick); - if ("ontouchstart" in window) { - // Disable tooltips on smartphones: - document.querySelectorAll("#aboveMoves .tooltip").forEach(elt => { - elt.classList.remove("tooltip"); - }); - } // Take full width on small screens: let boardSize = parseInt(localStorage.getItem("boardSize")); if (!boardSize) { @@ -148,6 +145,9 @@ export default { ) ); }, + btnTooltipClass: function() { + return { tooltip: !("ontouchstart" in window) }; + }, gotoMove: function(index) { this.$emit("goto-move", index); }, diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index fa5a86d6..032f625e 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -84,34 +84,37 @@ main @click="showNextGame()" ) | {{ st.tr["Next_g"] }} - button#chatBtn.tooltip( + button#chatBtn( + :class="btnTooltipClass()" onClick="window.doClick('modalChat')" aria-label="Chat" ) img(src="/images/icons/chat.svg") #actions(v-if="game.score=='*'") - button.tooltip( + button( @click="clickDraw()" - :class="{['draw-' + drawOffer]: true}" + :class="btnTooltipClass('draw')" :aria-label="st.tr['Draw']" ) img(src="/images/icons/draw.svg") - button.tooltip( - v-show="!!game.mycolor" + button( + v-if="!!game.mycolor" + :class="btnTooltipClass()" @click="abortGame()" :aria-label="st.tr['Abort']" ) img(src="/images/icons/abort.svg") - button.tooltip( - v-show="!!game.mycolor" + button( + v-if="!!game.mycolor" + :class="btnTooltipClass()" @click="resign()" :aria-label="st.tr['Resign']" ) img(src="/images/icons/resign.svg") - button.tooltip( + button( v-else + :class="btnTooltipClass('rematch')" @click="clickRematch()" - :class="{['rematch-' + rematchOffer]: true}" :aria-label="st.tr['Rematch']" ) img(src="/images/icons/rematch.svg") @@ -144,24 +147,18 @@ main span.split-names - span.name(:class="{connected: isConnected(1)}") | {{ game.players[1].name || "@nonymous" }} - br - span.time( - v-if="game.score=='*'" - :class="{yourturn: !!vr && vr.turn == 'w'}" - ) - span.time-left {{ virtualClocks[0][0] }} - span.time-separator(v-if="!!virtualClocks[0][1]") : - span.time-right(v-if="!!virtualClocks[0][1]") - | {{ virtualClocks[0][1] }} - span.separator - span.time( - v-if="game.score=='*'" - :class="{yourturn: !!vr && vr.turn == 'b'}" - ) - span.time-left {{ virtualClocks[1][0] }} - span.time-separator(v-if="!!virtualClocks[1][1]") : - span.time-right(v-if="!!virtualClocks[1][1]") - | {{ virtualClocks[1][1] }} + div(v-if="game.score=='*'") + span.time(:class="{yourturn: !!vr && vr.turn == 'w'}") + span.time-left {{ virtualClocks[0][0] }} + span.time-separator(v-if="!!virtualClocks[0][1]") : + span.time-right(v-if="!!virtualClocks[0][1]") + | {{ virtualClocks[0][1] }} + span.separator + span.time(:class="{yourturn: !!vr && vr.turn == 'b'}") + span.time-left {{ virtualClocks[1][0] }} + span.time-separator(v-if="!!virtualClocks[1][1]") : + span.time-right(v-if="!!virtualClocks[1][1]") + | {{ virtualClocks[1][1] }} BaseGame( ref="basegame" :game="game" @@ -312,6 +309,16 @@ export default { isLargeScreen: function() { return window.innerWidth >= 500; }, + btnTooltipClass: function(thing) { + let append = {}; + if (!!thing) append = { [thing + "-" + this[thing + "Offer"]]: true }; + return ( + Object.assign( + { tooltip: !("ontouchstart" in window) }, + append + ) + ); + }, gotoRules: function() { this.$router.push("/variants/" + this.game.vname); }, @@ -1207,19 +1214,6 @@ export default { }, game ); - if ("ontouchstart" in window) { - // TODO: I don't like this timeout, but $nextTick() fails, - // and in mounted() hook that fails too. - setTimeout( - () => { - // Disable tooltips on smartphones: - document.querySelectorAll("#aboveBoard .tooltip").forEach(elt => { - elt.classList.remove("tooltip"); - }); - }, - 750 - ); - } this.$refs["basegame"].re_setVariables(this.game); if (!this.gameIsLoading) { // Initial loading: @@ -1572,15 +1566,6 @@ export default { // In corr games, callback to change page only after score is set: gameOver: function(score, scoreMsg, callback) { this.game.score = score; - if ("ontouchstart" in window) { - this.$nextTick(() => { - // Disable tooltips on smartphones - // (might be required for rematch button at least): - document.querySelectorAll("#aboveBoard .tooltip").forEach(elt => { - elt.classList.remove("tooltip"); - }); - }); - } if (!scoreMsg) scoreMsg = getScoreMessage(score); this.game.scoreMsg = scoreMsg; document.getElementById("modalRules").checked = false; -- 2.44.0