From: Benjamin Auder <benjamin.auder@somewhere>
Date: Fri, 31 Jan 2020 16:37:25 +0000 (+0100)
Subject: Work on sizes, CSS
X-Git-Url: https://git.auder.net/js/css/assets/current/rpsls.js?a=commitdiff_plain;h=cf94b843f223b34fd2f3680112a183f6d5cd409c;p=vchess.git

Work on sizes, CSS
---

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") &#8645;
-          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") &#8645;
+        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>