Style...

diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index 27821c3..04aff14 100644 (file)
--- a/client/src/components/BaseGame.vue
+++ b/client/src/components/BaseGame.vue
@@ -78,9 +78,32 @@ export default {
       this.re_setVariables();
   },
   mounted: function() {
-    const boardSize = localStorage.getItem("boardSize");
-    if (!!boardSize)
-      document.getElementById("boardContainer").style.width = boardSize + "px";
+    // Take full width on small screens:
+    let boardSize = parseInt(localStorage.getItem("boardSize"));
+    if (!boardSize)
+    {
+      boardSize = (window.innerWidth >= 768
+        ? Math.min(600, 0.5*window.innerWidth) //heuristic...
+        : window.innerWidth);
+    }
+    const movesWidth = (window.innerWidth >= 768 ? 280 : 0);
+    document.getElementById("boardContainer").style.width = boardSize + "px";
+    let gameContainer = document.getElementById("gameContainer");
+    gameContainer.style.width = (boardSize + movesWidth) + "px";
+    
+
+
+
+
+    // TODO: something here........... gameContainer.width increases if from small to larger screen
+    window.onResize = (e) => {
+      console.log(e);
+      //if (window.innerWidth >= 768)
+    };
+
+
+
+
   },
   methods: {
     focusBg: function() {
@@ -366,7 +389,18 @@ export default {
 #movesList
   width: 280px
   float: left
-
+@media screen and (max-width: 767px)
+  #movesList
+    width: 100%
+    float: none
+    clear: both
+    table
+      tr
+        display: flex
+        margin: 0
+        padding: 0
+        td
+          text-align: left
 .clearer
   clear: both
 </style>

diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue
index c63f2cd..ca53892 100644 (file)
--- a/client/src/components/MoveList.vue
+++ b/client/src/components/MoveList.vue
@@ -8,11 +8,11 @@ div
       tr(v-for="moveIdx in evenNumbers")
         td {{ firstNum + moveIdx / 2 + 1 }}
         td(:class="{'highlight-lm': cursor == moveIdx}"
-            data-label="White move" @click="() => gotoMove(moveIdx)")
+            @click="() => gotoMove(moveIdx)")
           | {{ moves[moveIdx].notation }}
         td(v-if="moveIdx < moves.length-1"
             :class="{'highlight-lm': cursor == moveIdx+1}"
-            data-label="Black move" @click="() => gotoMove(moveIdx+1)")
+            @click="() => gotoMove(moveIdx+1)")
           | {{ moves[moveIdx+1].notation }}
         // Else: just add an empty cell
         td(v-else)

diff --git a/client/src/components/Settings.vue b/client/src/components/Settings.vue
index 5541cf3..5d03886 100644 (file)
--- a/client/src/components/Settings.vue
+++ b/client/src/components/Settings.vue
@@ -65,10 +65,11 @@ export default {
       if (!boardContainer)
         return; //no board on page
       const k = document.getElementById("myRange").value;
-      const movesWidth = 280; //TODO: constant somewhere...;
+      const movesWidth = (window.innerWidth >= 768 ? 280 : 0); //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;
+      // Value of 0 is board min size; 100 is window.width [- movesWidth]
+      const boardSize = minBoardWidth +
+        k * (window.innerWidth - (movesWidth+minBoardWidth)) / 100;
       localStorage.setItem("boardSize", boardSize);
       boardContainer.style.width = boardSize + "px";
       document.getElementById("gameContainer").style.width = (boardSize + movesWidth) + "px";