minor cosmetic consistency fixes with original 'design'

src/web/TODO.md

@@ -1,17 +1,13 @@
 recipe:
 - ignore dropped item outside of rec-list
 - bit smoother sort experience would be nice
-- RecipeWaiter opSortEnd()
 
 operations:
 - can only drag an op to favourites 1 time
-- initial search is kinda slow
 - popovers should also show on key up and down per operation
-- little line on click ( for all input fields, also ingredient focus )
 - after dragging op to rec, popover no longer works on original op ( see opSortEnd )
 
 - stupid popovers on deleting favs for instance ( dont always close nicely )
-- native focus thingy is a bit ugly
 - UI tests etc.
 
 --------
@@ -19,3 +15,11 @@ operations:
 x highlight strings
 x esc on focused-op search results will add that op to recipe
 x be able to tab from panel to panel, open and close them, use up and down arrows
+x little line on click ( for all input fields, also ingredient focus )
+x native focus thingy is a bit ugly
+x RecipeWaiter opSortEnd()
+
+wont do
+x initial search is kinda slow
+
+Tim

src/web/html/index.html

@@ -208,7 +208,7 @@
                                data-help-title="Searching for operations"
                                data-help="<p>Use the search box to find useful operations.</p><p>Both operation names and descriptions are queried using a fuzzy matching algorithm.</p>"
                         />
-                        <div id="operations-dropdown" tabindex="0">
+                        <div id="operations-dropdown">
                             <div id="search-results" class="hidden" tabindex="0"></div>
                             <div id="categories" class="panel-group no-select hidden"></div>
                         </div>

src/web/stylesheets/components/operations/_operations.css

@@ -35,7 +35,6 @@
 @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 */

src/web/stylesheets/components/operations/_search.css

@@ -5,6 +5,8 @@
 #search {
     padding-left: 10px;
     padding-right: 10px;
-    background-image: none;
+    background-image:
+        linear-gradient(to top, var(--input-highlight-colour) 2px, rgba(0, 0, 0, 0) 2px),
+        linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
 }
 

src/web/waiters/RecipeWaiter.mjs

@@ -95,42 +95,6 @@ class RecipeWaiter {
         document.querySelector("#categories a").addEventListener("drop", this.favDrop.bind(this));
     }
 
-
-    /**
-     * Handler for operation sort end events.
-     * Removes the operation from the list if it has been dropped outside. If not, adds it to the list
-     * at the appropriate place and initialises it.
-     *
-     * @fires Manager#operationadd
-     * @param {Event} evt
-     */
-    opSortEnd(evt) {
-        if (this.removeIntent && evt.item.parentNode.id === "rec-list") {
-            evt.item.remove();
-            return;
-        }
-
-        // Reinitialise the popover on the original element in the ops list because for some reason it
-        // gets destroyed and recreated. If the clone isn't in the ops list, we use the original item instead.
-        // let enableOpsElement;
-        // if (evt.clone?.parentNode?.classList?.contains("op-list")) {
-        //     enableOpsElement = evt.clone;
-        // } else {
-        //     enableOpsElement = evt.item;
-        //     $(evt.item).attr("data-toggle", "popover");
-        // }
-
-        // this.manager.ops.enableOpPopover(enableOpsElement);
-
-        if (evt.item.parentNode.id !== "rec-list") {
-            return;
-        }
-
-        this.buildRecipeOperation(evt.item.name);
-        // evt.item.dispatchEvent(this.manager.operationadd);
-    }
-
-
     /**
      * Handler for favourite dragover events.
      * If the element being dragged is an operation, displays a visual cue so that the user knows it can