[#181] disable tooltips on mobile UI

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();

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:

src/web/stylesheets/layout/_structure.css

@@ -33,9 +33,9 @@
     bottom: 0;
 }
 
-/*#IO {*/
+#IO {
-/*    padding-bottom: var(--controls-height);*/
+    padding-bottom: var(--controls-height);
-/*}*/
+}
 
 #recipe.maximised-pane,
 #input.maximised-pane,

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));
 }

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