diff --git a/src/web/App.mjs b/src/web/App.mjs index 2710b045..21d05d91 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -59,11 +59,10 @@ class App { setup() { document.dispatchEvent(this.manager.appstart); - this.initialiseSplitter(); + this.initialiseUI(); this.setCompileMessage(); this.loadLocalStorage(); this.populateOperationsList(); - this.manager.recipe.updateSelectedOperations(); this.manager.setup(); this.manager.output.saveBombe(); this.uriParams = this.getURIParams(); @@ -298,11 +297,11 @@ class App { * * @param {boolean} [minimise=false] - Set this flag if attempting to minimise frames to 0 width */ - initialiseSplitter(minimise=false) { + initialiseUI() { if ( window.innerWidth < this.breakpoint ){ - this.setMobileLayout(); + this.setMobileUI(); } else { - this.setDesktopLayout(minimise); + this.setDesktopUI(false); } } @@ -346,7 +345,7 @@ class App { }); this.ioSplitter = Split(["#input", "#output"], { - sizes: [40,60], + sizes: [45,55], direction: "vertical", gutterSize: 0, }); @@ -879,6 +878,8 @@ class App { * @param {boolean} minimise */ setDesktopUI(minimise){ + // enable tooltips on desktop as normal + $("[data-toggle=tooltip]").tooltip("enable"); this.setDesktopLayout(minimise); // repopulate to enable popovers and drag events this.populateOperationsList(); @@ -890,6 +891,8 @@ class App { } setMobileUI(){ + // tooltips on mobile are reducing UX, so we disable it + $("[data-toggle=tooltip]").tooltip("disable"); this.setMobileLayout(); // repopulate to disable popovers and drag events this.populateOperationsList(); diff --git a/src/web/TODO.md b/src/web/TODO.md index 96a121ae..8e3ca00c 100644 --- a/src/web/TODO.md +++ b/src/web/TODO.md @@ -9,6 +9,7 @@ - view-heights not correct due to variable taskbar on mobile devices - need long press checks on mobile to add favourites and switch ingredient order +- raw bites dropdown thingy is unusable ### Desktop UI: ### General UI: diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css index b5662bf7..eeec19aa 100755 --- a/src/web/stylesheets/layout/_structure.css +++ b/src/web/stylesheets/layout/_structure.css @@ -33,9 +33,9 @@ bottom: 0; } -/*#IO {*/ -/* padding-bottom: var(--controls-height);*/ -/*}*/ +#IO { + padding-bottom: var(--controls-height); +} #recipe.maximised-pane, #input.maximised-pane, diff --git a/src/web/stylesheets/themes/_structure.css b/src/web/stylesheets/themes/_structure.css index 4ff724ee..ffd41411 100644 --- a/src/web/stylesheets/themes/_structure.css +++ b/src/web/stylesheets/themes/_structure.css @@ -2,7 +2,8 @@ --banner-height: 40px; --controls-height: 70px; --workspace-height: calc( 100vh - var(--banner-height) - var(--controls-height)); - --recipe-height: 38vh; + --recipe-height: 22vh; --operations-height: 89px; + /* io gets the remaining space */ --io-height: calc(100vh - var(--banner-height) - var(--controls-height) - var(--recipe-height) - var(--operations-height)); } diff --git a/src/web/waiters/OutputWaiter.mjs b/src/web/waiters/OutputWaiter.mjs index a210dca3..b09ee3cd 100755 --- a/src/web/waiters/OutputWaiter.mjs +++ b/src/web/waiters/OutputWaiter.mjs @@ -1400,33 +1400,6 @@ class OutputWaiter { switchButton.firstElementChild.innerHTML = "open_in_browser"; } - /** - * Handler for maximise output click events. - * Resizes the output frame to be as large as possible, or restores it to its original size. - */ - // maximiseOutputClick(e) { - // const el = e.target.id === "maximise-output" ? e.target : e.target.parentNode; - // - // if (el.getAttribute("data-original-title").indexOf("Maximise") === 0) { - // document.body.classList.add("output-maximised"); - // this.app.initialiseSplitter(true); - // this.app.columnSplitter.collapse(0); - // this.app.columnSplitter.collapse(1); - // this.app.ioSplitter.collapse(0); - // - // $(el).attr("data-original-title", "Restore output pane"); - // el.querySelector("i").innerHTML = "fullscreen_exit"; - // } else { - // document.body.classList.remove("output-maximised"); - // $(el).attr("data-original-title", "Maximise output pane"); - // el.querySelector("i").innerHTML = "fullscreen"; - // this.app.initialiseSplitter(false); - // // if ( window.innerWidth >= this.app.breakpoint ){ - // // this.app.resetLayout(); - // // } - // } - // } - /** * Handler for find tab button clicked