[#181] add disabling of popovers on small screens, update todos and operation CSS

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 :)
 

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

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,

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;