diff --git a/Gruntfile.js b/Gruntfile.js index 943fae48..2f1d37be 100755 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -214,6 +214,7 @@ module.exports = function (grunt) { }, devServer: { port: grunt.option("port") || 8080, + host: "0.0.0.0", client: { logging: "error", overlay: true diff --git a/src/web/App.mjs b/src/web/App.mjs index a3556aa1..ed5f9962 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -878,6 +878,29 @@ class App { } } } + + /** + * Aggregate all the desktop UI functions. + * + * Popovers and desktop layout are set on init, but we also need to + * update the UI correctly on window resizing events + */ + setDesktopUI(minimise){ + this.setDesktopLayout(minimise); + this.manager.ops.enableOpsListPopovers(); + } + + + /** + * Aggregate all the mobile UI functions. + * + * Popovers and desktop layout are set on init, but we also need to + * update the UI correctly on window resizing events + */ + setMobileUI(){ + this.setMobileLayout(); + this.manager.ops.disableOpsListPopovers(); + } } export default App; diff --git a/src/web/TODO.md b/src/web/TODO.md index acf73e65..37733101 100644 --- a/src/web/TODO.md +++ b/src/web/TODO.md @@ -4,8 +4,6 @@ --- #### Mobile UI ( on real device ): -- disableOpsListPopover() on window resize event, not working 10/10 yet for modal op-lists - - on mobile UI, there is almost no visual feedback when adding an operation to the recipe list. Since the recipe list is not visible like on desktop, this is very confusing UX - adding an operation only works with drag and drop, not on double tap or the like. This todo is related to the remaining mobile UI one. Dragging and dropping won't be an option on mobile, because then you can't scroll the operations list. I'm thinking to add @@ -17,6 +15,8 @@ - test drag and drop etc. Regular mobile events / UX - view-heights not correct due to variable taskbar on mobile devices +- minor issue w popovers glitching in modal ( edit favourites ), but it only occurs on (laptop) browser < breakpoint, not on a real mobile device. It's minor but bothers me + ### Desktop UI: ### General UI: - fix up key / tab events so UI can be navigated comfortably with keys ( inc. visual focus feedback ). Probably a lot of work though @@ -25,6 +25,7 @@ - `core/Recipe.mjs`, `core/lib/Magic.js` return imports to original ### Misc: +- Gruntfile revert dev config - comb through CSS and improve organisation for better DevX. Ask repo owners to open another issue perhaps and just redo all of the stylesheets ( preferably with SASS ) - delete this file when done :) diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index 7390f6a4..5758bffa 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -185,18 +185,18 @@ class OperationsWaiter { if ( window.innerWidth < this.app.breakpoint ){ this.disableOpsListPopovers(); } else { - this.enableOpsListPopovers(e.target); + this.enableOpPopover(e.target); } } /** - * Sets up popovers, allowing the popover itself to gain focus which enables scrolling - * and other interactions. + * Enable the target operation popover itself to gain focus which + * enables scrolling and other interactions. * * @param {Element} el - The element to start selecting from */ - enableOpsListPopovers(el) { + enableOpPopover(el) { $(el).find("[data-toggle=popover]").addBack("[data-toggle=popover]") .popover({trigger: "manual"}) .on("mouseenter", function(e) { @@ -218,6 +218,7 @@ class OperationsWaiter { }); } + /** * Disable popovers on all op-list list items */ @@ -225,6 +226,13 @@ class OperationsWaiter { $(document.querySelectorAll(".op-list .operation")).popover("disable"); } + /** + * Enable popovers on all op-list list items + */ + enableOpsListPopovers(){ + $(document.querySelectorAll(".op-list .operation")).popover("enable"); + } + /** * Handler for operation doubleclick events. diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs index 42e763b0..0c641a96 100755 --- a/src/web/waiters/RecipeWaiter.mjs +++ b/src/web/waiters/RecipeWaiter.mjs @@ -139,7 +139,7 @@ class RecipeWaiter { enableOpsElement = evt.item; $(evt.item).attr("data-toggle", "popover"); } - this.manager.ops.enableOpsListPopovers(enableOpsElement); + this.manager.ops.enableOpPopover(enableOpsElement); if (evt.item.parentNode.id !== "rec-list") { return; diff --git a/src/web/waiters/WindowWaiter.mjs b/src/web/waiters/WindowWaiter.mjs index 9044ad71..b7fb2201 100755 --- a/src/web/waiters/WindowWaiter.mjs +++ b/src/web/waiters/WindowWaiter.mjs @@ -30,9 +30,9 @@ class WindowWaiter { debounce(this.app.adjustComponentSizes, 200, "windowResize", this.app, [])(); if ( window.innerWidth >= this.app.breakpoint ) { - this.app.setDesktopLayout(false); + this.app.setDesktopUI(false); } else { - this.app.setMobileLayout(); + this.app.setMobileUI(); } }