From 71ae22495623e1d61846756583daa710f4cc091d Mon Sep 17 00:00:00 2001
From: Gator <gator@ariona.fr>
Date: Sat, 15 Jan 2022 09:05:56 +0100
Subject: [PATCH] [wip] top menu browsable by mobile devices

---
 src/App.vue                 | 26 +++++---------------------
 src/components/Canvas.vue   |  5 ++---
 src/components/MainMenu.vue | 24 +++++++++++++++++++++---
 src/components/MenuRow.vue  | 19 ++++++++++++++++---
 4 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c40d7ed..81dbb89 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,5 @@
 <template>
   <div id="main">
-    <h1
-      id="main-title"
-    >
-      Cellular Automata Explorer
-    </h1>
     <div id="container">
       <MainMenu />
       <Canvas />
@@ -47,29 +42,18 @@ body {
     font-family: Courier New;
 }
 
+body, html {
+    height: calc(100vh - 100px);
+}
+
 canvas {
     flex: auto;
     background: #110812;
     margin-right: 10px;
 }
 
-h1, h2 {
-    font-weight: bold;
-}
-
-h1 {
-    margin : 10px auto;
-    font-size: larger;
-    text-align: center;
-}
-
-#main {
-    
-}
-
 #container {
-    display: flex;
-    height: calc(100vh - 100px);
     overflow: hidden;
+    width: 100%;
 }
 </style>
diff --git a/src/components/Canvas.vue b/src/components/Canvas.vue
index a41a9dc..8234c7c 100644
--- a/src/components/Canvas.vue
+++ b/src/components/Canvas.vue
@@ -114,7 +114,6 @@ export default {
       this.draw2d(board)
     },
     async draw2dLast() {
-      console.log(this.lastBoard)
       this.draw2d(this.lastBoard)
     },
     stop() {
@@ -122,13 +121,13 @@ export default {
     },
     reset() {
       this.stop()
-      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
     }
   }
 }
 </script>
 <style>
   #mainContent {
-      min-width: 70%;
+
   }
 </style>
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
index 0ef7dbb..9baba3d 100644
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@@ -1,9 +1,14 @@
 <template>
-  <div id="sidebar">
+  <div id="mainMenu">
     <MenuGeneralOptions />
     <MenuCellProperties />
     <MenuElementaryCA />
     <Menu2dCA />
+    <h1
+      id="main-title"
+    >
+      Cellular Automata Explorer
+    </h1>
   </div>
 </template>
 
@@ -24,9 +29,22 @@ export default {
 </script>
 
 <style>
-#sidebar {
+#mainMenu {
     width: 25%;
     padding: 0 10px;
-    overflow-y: scroll;
+    overflow: scroll;
+    display: flex;
+    width: 100%;
+}
+
+h1, h2 {
+    font-weight: bold;
+}
+
+h1 {
+    margin : 10px 20px;
+    font-size: larger;
+    text-align: center;
+    width: 100%;
 }
 </style>
diff --git a/src/components/MenuRow.vue b/src/components/MenuRow.vue
index 234be17..1cab796 100644
--- a/src/components/MenuRow.vue
+++ b/src/components/MenuRow.vue
@@ -45,14 +45,21 @@ export default {
 </script>
 
 <style>
+.menu-row, h1 {
+    white-space: nowrap;
+    position: relative;
+}
 .menu-row h2 {
-    font-size: medium;
+    font-size: small;
     padding: 10px;
     cursor: pointer;
-    border: 2px solid darkgrey;
     margin: 0 0 10px 0;
 }
 
+.menu-row h2:hover {
+    color: darkgrey;
+}
+
 select {
     margin-top: 10px;
     padding: 5px;
@@ -71,11 +78,17 @@ input[type="button"] {
 }
 
 .menu-row {
-    flex: 1;
+    flex-basis: max-content;
 }
 
 label, .form-field label {
     margin-right: 10px;
     font-weight: bold;
 }
+
+.menu-row-content {
+    font-size: small;
+    background: black;
+    position: relative;
+}
 </style>