State management & UI improvements

2021-07-19 17:26:00 +00:00
parent e3aee15676
commit 826aca5b9d
2 changed files with 148 additions and 87 deletions
--- a/ui.html
+++ b/ui.html
@@ -7,6 +7,24 @@
      crossorigin="anonymous"
    />
    <style>
+      .center-parent {
+        display: flex;
+        height: 100vh;
+      }
+
+      .center {
+        margin: auto;
+      }
+
+      #capture {
+        width: 20ch;
+      }
+
+      #config {
+        overflow-y: auto;
+        max-height: 100vh;
+      }
+
      #config label {
        max-width: 40%;
      }
@@ -14,11 +32,6 @@
      #config select {
        max-width: 50%;
      }
-
-      #canvas-holder,
-      #config {
-        max-height: 100vh;
-      }
    </style>
    <script type="importmap">
      {
@@ -31,12 +44,5 @@
    </script>
    <script type="module" src="ui.js"></script>
  </head>
-  <body>
-    <div class="pure-g">
-      <div class="pure-u-2-3" id="canvas-holder">
-        <canvas id="canvas" style="display: flex; margin: auto"></canvas>
-      </div>
-      <div id="config" class="pure-u-1-3" style="overflow-y: auto"></div>
-    </div>
-  </body>
+  <body></body>
 </html>