From 1092382fbcccac2e4e54b42b983e2393b9d528bb Mon Sep 17 00:00:00 2001 From: Robin Scholtes Date: Mon, 24 Jul 2023 14:57:21 +1200 Subject: [PATCH] disable all li.operation popovers on mobile and enable and disable on window resize events appropriately --- src/web/stylesheets/components/operations/_operations.css | 1 + src/web/waiters/WindowWaiter.mjs | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/src/web/stylesheets/components/operations/_operations.css b/src/web/stylesheets/components/operations/_operations.css index cfdaed9f..4e10f13d 100644 --- a/src/web/stylesheets/components/operations/_operations.css +++ b/src/web/stylesheets/components/operations/_operations.css @@ -35,6 +35,7 @@ @media only screen and ( min-width: 768px ){ #operations-dropdown { border-bottom: none; + border-top: 1px solid var(--primary-border-colour); } /* On desktop UI, the categories are always visible */ diff --git a/src/web/waiters/WindowWaiter.mjs b/src/web/waiters/WindowWaiter.mjs index c30938a6..616d7500 100755 --- a/src/web/waiters/WindowWaiter.mjs +++ b/src/web/waiters/WindowWaiter.mjs @@ -53,6 +53,9 @@ class WindowWaiter { onResizeToDesktop() { this.app.setDesktopUI(false); + // disable app popovers on li.operation elements + $(document.querySelectorAll("li.operation")).popover("enable"); + // if a window is resized past breakpoint while #recipe or #input is maximised, close these maxed panes ["recipe", "input"].forEach(paneId => this.manager.controls.setPaneMaximised(paneId, false)); @@ -66,6 +69,9 @@ class WindowWaiter { onResizeToMobile() { this.app.setMobileUI(); + // disable app popovers on li.operation elements + $(document.querySelectorAll("li.operation")).popover("disable"); + // when mobile devices' keyboards pop up, it triggers a window resize event. Here // we keep the maximised panes open until the minimise button is clicked / tapped ["recipe", "input", "output"]