X-Git-Url: https://git.auder.net/?p=vchess.git;a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=04aff149bc0bc30cf1d240962a2d826d4ce7c7f4;hp=27821c3af07a847114a89d192c862ca2f94bce3d;hb=96e9585a39ca3ccef59c701b3f7ac3809692ca73;hpb=cf94b843f223b34fd2f3680112a183f6d5cd409c

diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index 27821c3a..04aff149 100644
--- 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>