[#181] set mobile and desktop UI on init and window resize without errors

src/web/App.mjs

@@ -59,12 +59,8 @@ class App {
     setup() {
         document.dispatchEvent(this.manager.appstart);
 
-        if (  window.innerWidth >= this.breakpoint ) {
-            this.initialiseSplitter();
-            this.setCompileMessage();
-            this.adjustComponentSizes();
-        }
-
+        this.initialiseSplitter();
+        this.setCompileMessage();
         this.loadLocalStorage();
         this.populateOperationsList();
         this.manager.setup();
@@ -75,7 +71,6 @@ class App {
         this.loaded();
     }
 
-
     /**
      * Fires once all setup activities have completed.
      *
@@ -306,23 +301,46 @@ class App {
         if (this.columnSplitter) this.columnSplitter.destroy();
         if (this.ioSplitter) this.ioSplitter.destroy();
 
+        if ( window.innerWidth < this.breakpoint ){
+            this.setMobileLayout();
+        } else {
+            this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
+                sizes: [20, 30, 50],
+                minSize: minimise ? [0, 0, 0] : [240, 310, 450],
+                gutterSize: 4,
+                expandToMin: true,
+                onDrag: debounce(function() {
+                    this.adjustComponentSizes();
+                }, 50, "dragSplitter", this, [])
+            });
+
+            this.ioSplitter = Split(["#input", "#output"], {
+                direction: "vertical",
+                gutterSize: 4,
+                minSize: minimise ? [0, 0] : [100, 100]
+            });
+
+            this.adjustComponentSizes();
+        }
+    }
+
+    /**
+     * Set mobile splitter UI ( there is some code repetition in regard to the splitters above, but
+     * I think the tradeoff for ease of (DevX) use is worth it )
+     */
+    setMobileLayout() {
         this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
-            sizes: [20, 30, 50],
-            minSize: minimise ? [0, 0, 0] : [240, 310, 450],
-            gutterSize: 4,
+            sizes: [100, 100, 100],
+            minSize: [0, 0, 0],
+            gutterSize: 0,
             expandToMin: true,
-            onDrag: debounce(function() {
-                this.adjustComponentSizes();
-            }, 50, "dragSplitter", this, [])
         });
 
         this.ioSplitter = Split(["#input", "#output"], {
             direction: "vertical",
-            gutterSize: 4,
-            minSize: minimise ? [0, 0] : [100, 100]
+            gutterSize: 0,
+            minSize: [50, 50]
         });
-
-        this.adjustComponentSizes();
     }
 
 

src/web/TODO.md

@@ -20,9 +20,13 @@
 - hover / active states can use a bit of TLC
 
 ### JS:
+- track down where `69px bottom` on `rec-list` comes from and remove it
+- can probably refactor the Splitter funcs to be a little more reusable etc.
 - `core/Recipe.mjs`, `core/lib/Magic.js` return imports to original
 - `waiters/OperationsWaiter.mjs` setVisibility is pretty generic so probably move it ( to manager? )
 - `App.mjs` add a window resize listener for functions in setup if ( breakpoint )
+- `operations` dropdowns don't close on Escape once `input[type="search"]` is not in focus ( for instance, when you
+  have added some operations from the category list
 
 ### Misc:
 - check for remaining todos

src/web/stylesheets/layout/_structure.css

@@ -35,9 +35,12 @@ body {
     height: 20vh;
 }
 
-#input,
-#output {
-    height: 25vh;
+/*A short note for reference:
+*
+* #input and #outputs individual heights are set in App.js, both to 50(%)
+*/
+#IO {
+    height: 50vh;
 }
 
 #controls {

src/web/waiters/WindowWaiter.mjs

@@ -28,6 +28,12 @@ class WindowWaiter {
      */
     windowResize() {
         debounce(this.app.adjustComponentSizes, 200, "windowResize", this.app, [])();
+
+        if ( window.innerWidth >= this.app.breakpoint ) {
+            this.app.resetLayout();
+        } else {
+            this.app.setMobileLayout();
+        }
     }