From d29cbb307b9e4c03ac0933ad53d2c5809a204d8c Mon Sep 17 00:00:00 2001
From: Gator <gator@ariona.fr>
Date: Fri, 14 Jan 2022 12:36:04 +0100
Subject: [PATCH] adaptive screen size + overflow

---
 src/App.vue                 |  7 +++++--
 src/components/Canvas.vue   | 12 +++++++++---
 src/components/MainMenu.vue |  4 ++--
 src/store/index.js          |  4 ++--
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 18a2204..c40d7ed 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -32,7 +32,7 @@ export default {
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
-    margin-top: 60px;
+    
 }
 
 * {
@@ -40,6 +40,7 @@ export default {
     padding: 0;
 }
 
+
 body {
     background: black;
     color: white;
@@ -63,10 +64,12 @@ h1 {
 }
 
 #main {
-    flex: 4;
+    
 }
 
 #container {
     display: flex;
+    height: calc(100vh - 100px);
+    overflow: hidden;
 }
 </style>
diff --git a/src/components/Canvas.vue b/src/components/Canvas.vue
index 7865f36..a41a9dc 100644
--- a/src/components/Canvas.vue
+++ b/src/components/Canvas.vue
@@ -1,5 +1,5 @@
 <template>
-  <main id="main">
+  <main id="mainContent">
     <canvas
       id="canvas"
       ref="canvas"
@@ -46,8 +46,10 @@ export default {
   mounted() {
     this.canvas = this.$refs['canvas']
     this.ctx = this.canvas.getContext('2d')
+    this.$store.commit('setCanvasWidth', this.canvas.parentElement.clientWidth)
+    this.$store.commit('setCanvasHeight', this.canvas.parentElement.clientHeight)
     this.$root.$on('draw1d', () => { this.draw1d() })
-     this.$root.$on('draw2dNew', () => { this.draw2dNew() })
+    this.$root.$on('draw2dNew', () => { this.draw2dNew() })
     this.$root.$on('draw2dLast', () => { this.draw2dLast() })
     this.$root.$on('reset', () => { this.reset() })
     this.$root.$on('stop', () => { this.stop() })
@@ -125,4 +127,8 @@ export default {
   }
 }
 </script>
-
+<style>
+  #mainContent {
+      min-width: 70%;
+  }
+</style>
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
index aa68697..0ef7dbb 100644
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@@ -25,8 +25,8 @@ export default {
 
 <style>
 #sidebar {
-    flex-basis: fit-content;
+    width: 25%;
     padding: 0 10px;
-    width: fit-content;
+    overflow-y: scroll;
 }
 </style>
diff --git a/src/store/index.js b/src/store/index.js
index 8d79c5c..8007826 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -21,8 +21,8 @@ export default new Vuex.Store({
       liveColor: '#000000',
       deadColor: '#AA78E8',
     },
-    canvasWidth: 1280,
-    canvasHeight: 720,
+    canvasWidth: 0,
+    canvasHeight: 0,
     refreshRate: 300,
     initial1dState: "onecell",
     activeMenu: "Elementary Cellular Automata",