diff --git a/src/web/App.mjs b/src/web/App.mjs index d1d532a1..c73dc266 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -298,37 +298,51 @@ class App { * @param {boolean} [minimise=false] - Set this flag if attempting to minimise frames to 0 width */ initialiseSplitter(minimise=false) { - 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(); + this.setDesktopLayout(minimise); } } /** - * 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 ) + * Set desktop layout + */ + setDesktopLayout(minimise){ + if (this.columnSplitter) this.columnSplitter.destroy(); + if (this.ioSplitter) this.ioSplitter.destroy(); + + 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 layout. + * + * A note: there is some code repetition here ( re setDesktopLayout ), + * but I found some lingering gutters or odd behaviour on window resizing that is + * resolved by always destroying splitters. Now setDesktopLayout and setMobileLayout + * can be called on window resizing events and the switch gets handled smoothly. */ setMobileLayout() { + if (this.columnSplitter) this.columnSplitter.destroy(); + if (this.ioSplitter) this.ioSplitter.destroy(); + this.columnSplitter = Split(["#operations", "#recipe", "#IO"], { sizes: [100, 100, 100], minSize: [0, 0, 0], diff --git a/src/web/TODO.md b/src/web/TODO.md index 719e0b9e..9f896b9e 100644 --- a/src/web/TODO.md +++ b/src/web/TODO.md @@ -6,8 +6,7 @@ ### Desktop UI: - restore desktop UI - `search-results` should really be at the top once input, with `categories` below it -- something not quite right yet on resizing ( double tab on browser from small - full screen doesn't seem to load well ) - and vice versa ( sometimes a 4px gutter remains between panels for instance ). Check App.js / window events etc. +- `calcControlsHeight` and `adjustComponentSizes` sometimes cause trouble in `recipe` `rec-list` ### Mobile UI: - bootstrap native 'x' in `input[type="search"]` should clear input value and diff --git a/src/web/waiters/WindowWaiter.mjs b/src/web/waiters/WindowWaiter.mjs index c2d42bbb..9044ad71 100755 --- a/src/web/waiters/WindowWaiter.mjs +++ b/src/web/waiters/WindowWaiter.mjs @@ -30,7 +30,7 @@ class WindowWaiter { debounce(this.app.adjustComponentSizes, 200, "windowResize", this.app, [])(); if ( window.innerWidth >= this.app.breakpoint ) { - this.app.resetLayout(); + this.app.setDesktopLayout(false); } else { this.app.setMobileLayout(); }