From cf94b843f223b34fd2f3680112a183f6d5cd409c Mon Sep 17 00:00:00 2001 From: Benjamin Auder Date: Fri, 31 Jan 2020 17:37:25 +0100 Subject: [PATCH] Work on sizes, CSS --- client/src/components/BaseGame.vue | 75 ++++++++++++++++++------------ client/src/components/Board.vue | 13 +----- client/src/components/Settings.vue | 16 ++++--- client/src/views/Game.vue | 8 ++-- 4 files changed, 63 insertions(+), 49 deletions(-) diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 635ca643..27821c3a 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -5,27 +5,28 @@ div#baseGame(tabindex=-1 @click="() => focusBg()" @keydown="handleKeys") .card.smallpad.small-modal.text-center label.modal-close(for="modalEog") h3#eogMessage.section {{ endgameMessage }} - .row - .col-sm-12.col-md-9 - #boardContainer - Board(:vr="vr" :last-move="lastMove" :analyze="game.mode=='analyze'" - :user-color="game.mycolor" :orientation="orientation" - :vname="game.vname" @play-move="play") - #controls - button(@click="gotoBegin") << - button(@click="() => undo()") < - button(@click="flip") ⇅ - button(@click="() => play()") > - button(@click="gotoEnd") >> - #pgnDiv - a#download(href="#") - button(@click="download") {{ st.tr["Download PGN"] }} - button(v-if="game.mode!='analyze'" @click="analyzePosition") - | {{ st.tr["Analyze"] }} - .col-sm-12.col-md-3 + #gameContainer + #boardContainer + Board(:vr="vr" :last-move="lastMove" :analyze="game.mode=='analyze'" + :user-color="game.mycolor" :orientation="orientation" + :vname="game.vname" @play-move="play") + #controls + button(@click="gotoBegin") << + button(@click="() => undo()") < + button(@click="flip") ⇅ + button(@click="() => play()") > + button(@click="gotoEnd") >> + #pgnDiv + a#download(href="#") + button(@click="download") {{ st.tr["Download PGN"] }} + button(v-if="game.mode!='analyze'" @click="analyzePosition") + | {{ st.tr["Analyze"] }} + #movesList MoveList(v-if="showMoves" :score="game.score" :message="game.scoreMsg" :firstNum="firstMoveNumber" :moves="moves" :cursor="cursor" @goto-move="gotoMove") + // TODO: clearer required ?! + .clearer diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index eb9e6e4c..25da6f14 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -260,12 +260,6 @@ export default { elementArray ); }, - mounted: function() { - // NOTE (TODO?): could also be dependent on page type (game, analyze, variant) - const boardSize = localStorage.getItem("boardSize"); - if (!!boardSize) - document.querySelector(".game").style.width = boardSize + "px"; - }, methods: { mousedown: function(e) { e = e || window.event; @@ -400,13 +394,10 @@ div.board11 padding-bottom: 9.1% .game - //width: #{'min(80vw, 500px)'} - margin: 0 auto + width: 100% + margin: 0 .board cursor: pointer - @media screen and (max-width: 767px) - width: 100% - margin: 0 #choices margin: 0 auto 0 auto diff --git a/client/src/components/Settings.vue b/client/src/components/Settings.vue index 4838297a..5541cf37 100644 --- a/client/src/components/Settings.vue +++ b/client/src/components/Settings.vue @@ -34,7 +34,7 @@ div option(value="2") {{ st.tr["All"] }} fieldset .slidecontainer - input#myRange.slider(type="range" min="20" max="100" value="60" + input#myRange.slider(type="range" min="0" max="100" value="50" @input="adjustBoard") @@ -61,13 +61,17 @@ export default { : event.target.value; }, adjustBoard: function() { - const board = document.querySelector(".game"); - if (!board) + const boardContainer = document.getElementById("boardContainer"); + if (!boardContainer) return; //no board on page - const multiplier = document.getElementById("myRange").value; - const boardSize = 10 * multiplier; + const k = document.getElementById("myRange").value; + const movesWidth = 280; //TODO: constant somewhere...; + const minBoardWidth = 240; //TODO: same + // Value of 0 is board min size; 100 is screen.width - movesWidth + const boardSize = k * (screen.width - (movesWidth+minBoardWidth)) / 100 + minBoardWidth; localStorage.setItem("boardSize", boardSize); - board.style.width = boardSize + "px"; + boardContainer.style.width = boardSize + "px"; + document.getElementById("gameContainer").style.width = (boardSize + movesWidth) + "px"; }, }, }; diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue index 3c4ac083..0c3de58f 100644 --- a/client/src/views/Game.vue +++ b/client/src/views/Game.vue @@ -8,11 +8,11 @@ main @newchat-sent="finishSendChat" @newchat-received="processChat") .row .col-sm-12.col-md-9.col-md-offset-3.col-lg-10.col-lg-offset-2 + button#chatBtn(onClick="doClick('modalChat')") Chat #actions(v-if="game.mode!='analyze' && game.score=='*'") button(@click="offerDraw") Draw button(@click="abortGame") Abort button(@click="resign") Resign - button#chatBtn(onClick="doClick('modalChat')") Chat div Names: {{ game.players[0].name }} - {{ game.players[1].name }} div(v-if="game.score=='*'") Time: {{ virtualClocks[0] }} - {{ virtualClocks[1] }} BaseGame(:game="game" :vr="vr" ref="basegame" @@ -556,9 +556,8 @@ export default { width: 100% #actions + display: inline-block margin-top: 10px - margin-left: auto - margin-right: auto button display: inline-block width: 33% @@ -568,4 +567,7 @@ export default { padding-top: 20px max-width: 600px border: none; + +#chatBtn + margin: 0 10px 0 0 -- 2.44.0