From a252c349688fe34b4466bd7d8b1bed0a10f7aba5 Mon Sep 17 00:00:00 2001
From: Robin Scholtes <robin@theweirdscience.com>
Date: Sun, 23 Apr 2023 11:20:01 +1200
Subject: [PATCH] [#181] add disabling of popovers on small screens, update
 todos and operation CSS

---
 src/web/TODO.md                               |  3 +-
 src/web/stylesheets/components/_operation.css | 30 ++++++++++---------
 .../components/operations/_operations.css     |  1 +
 src/web/waiters/OperationsWaiter.mjs          | 14 +++++++--
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/web/TODO.md b/src/web/TODO.md
index 28032e0a..acf73e65 100644
--- a/src/web/TODO.md
+++ b/src/web/TODO.md
@@ -4,6 +4,8 @@
 ---
 
 #### 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
@@ -23,7 +25,6 @@
 - `core/Recipe.mjs`, `core/lib/Magic.js` return imports to original
 
 ### Misc:
-- remove ln 215 in gruntfile ( for mobile testing )
 - 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/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css
index daead791..06c9d1a1 100755
--- a/src/web/stylesheets/components/_operation.css
+++ b/src/web/stylesheets/components/_operation.css
@@ -7,7 +7,6 @@
  */
 
 .operation {
-    cursor: grab;
     padding: 10px;
     list-style-type: none;
     position: relative;
@@ -18,6 +17,22 @@
     border-right: none;
 }
 
+@media only screen and (min-width: 768px){
+    .operation {
+        cursor: grab;
+    }
+}
+
+.op-icon {
+    float: right;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+.op-icon.remove-icon {
+    color: #f44336;
+}
+
 .op-title {
     font-weight: var(--op-title-font-weight);
 }
@@ -229,13 +244,6 @@ input.toggle-string {
     word-break: break-all;
 }
 
-.op-icon {
-    float: right;
-    color: #f44336;
-    font-size: 18px;
-    cursor: pointer;
-}
-
 .recip-icons {
     position: absolute;
     top: 13px;
@@ -316,9 +324,3 @@ input.toggle-string {
     color: var(--disabled-font-colour) !important;
     background-color: var(--disabled-border-colour) !important;
 }
-
-
-
-
-
-
diff --git a/src/web/stylesheets/components/operations/_operations.css b/src/web/stylesheets/components/operations/_operations.css
index b72b3e9e..bfc9956b 100644
--- a/src/web/stylesheets/components/operations/_operations.css
+++ b/src/web/stylesheets/components/operations/_operations.css
@@ -18,6 +18,7 @@
     overflow: auto;
     z-index: 20; /* to dropdown on top of all the other elements */
     border-bottom: 1px solid var(--primary-border-colour);
+    background-color: var(--secondary-background-colour);
 }
 
 #close-operations-dropdown.hidden,
diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs
index 8986c0b1..7390f6a4 100755
--- a/src/web/waiters/OperationsWaiter.mjs
+++ b/src/web/waiters/OperationsWaiter.mjs
@@ -182,7 +182,11 @@ class OperationsWaiter {
      */
     opListCreate(e) {
         this.manager.recipe.createSortableSeedList(e.target);
-        this.enableOpsListPopovers(e.target);
+        if ( window.innerWidth < this.app.breakpoint ){
+            this.disableOpsListPopovers();
+        } else {
+            this.enableOpsListPopovers(e.target);
+        }
     }
 
 
@@ -214,6 +218,13 @@ class OperationsWaiter {
             });
     }
 
+    /**
+     * Disable popovers on all op-list list items
+     */
+    disableOpsListPopovers() {
+        $(document.querySelectorAll(".op-list .operation")).popover("disable");
+    }
+
 
     /**
      * Handler for operation doubleclick events.
@@ -339,7 +350,6 @@ class OperationsWaiter {
     resetFavouritesClick() {
         this.app.resetFavourites();
     }
-
 }
 
 export default OperationsWaiter;