From cf94b843f223b34fd2f3680112a183f6d5cd409c Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> 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 </template> <script> @@ -76,6 +77,11 @@ export default { if (!!this.game.fenStart) this.re_setVariables(); }, + mounted: function() { + const boardSize = localStorage.getItem("boardSize"); + if (!!boardSize) + document.getElementById("boardContainer").style.width = boardSize + "px"; + }, methods: { focusBg: function() { // TODO: small blue border appears... @@ -329,27 +335,38 @@ export default { </script> <style lang="sass"> -#modal-eog+div .card - overflow: hidden -#pgnDiv - text-align: center +#baseGame + width: 100% + +#gameContainer margin-left: auto margin-right: auto + +#modal-eog+div .card + overflow: hidden @media screen and (min-width: 768px) #controls width: 400px -@media screen and (max-width: 767px) - .game - width: 100% + margin-left: auto + margin-right: auto #controls margin-top: 10px + margin-left: auto + margin-right: auto button display: inline-block width: 20% margin: 0 +#pgnDiv + text-align: center + margin-left: auto + margin-right: auto #boardContainer - //margin-top: 5px - >div - margin-left: auto - margin-right: auto + float: left +#movesList + width: 280px + float: left + +.clearer + clear: both </style> 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") </template> @@ -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 </style> -- 2.44.0