[#181] resolve operations-dropdown behaviour: search-result are at the top if applicable, categories below. clearing search value will display categories

src/web/TODO.md

@@ -5,9 +5,6 @@
 
 ### Mobile UI:
 #### Operations:
-- `categories` and `search-results` shouldn't really alter one another, rather `search-results` if there are any, should be placed at the top of `categories`
-- bootstrap native 'x' in `input[type="search"]` should clear input value and then display `categories` rather than close the entire dropdown
-- related: on invalid search input ( and no results ) or no input but focus on `search`, `categories` should be displayed
 - on click of `input[type="search]`, `favourites` briefly opens and closes. It should remain open until further action
 - on mobile, 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
 
@@ -27,6 +24,7 @@
 
 ### JS:
 - `core/Recipe.mjs`, `core/lib/Magic.js` return imports to original
+- adopted existing codestyle but check with CC `let ops, selected` etc in `searchOperations` ( can't we just declare and assign them once? maybe there is a reason )
 
 ### Misc:
 - check for remaining todos

src/web/html/index.html

@@ -208,9 +208,8 @@
                                 <i class="material-icons">close</i>
                             </button>
                         </span>
-
                     </div>
-                    <div class="operations-wrapper">
+                    <div id="operations-wrapper">
                         <input id="search"
                                type="search"
                                class="form-control"
@@ -221,8 +220,10 @@
                                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>"
                         />
                         <!--operation list and categories-->
-                        <ul id="search-results" class="op-list hidden"></ul>
-                        <div id="categories" class="panel-group no-select hidden"></div>
+                        <div id="operations-dropdown">
+                            <ul id="search-results" class="op-list hidden"></ul>
+                            <div id="categories" class="panel-group no-select hidden"></div>
+                        </div>
                     </div>
                 </div>
                 <div id="recipe" class="split split-horizontal no-select" data-help-title="Recipe pane" data-help="<p>The Recipe pane is where your chosen Operations are configured. If you are a programmer, think of these as functions. If you are not a programmer, these are like steps in a cake recipe. The Input data will be processed based on the Operations in your Recipe.</p><ul><li>To reorder, simply drag and drop the Operations into the order your require</li><li>To remove an operation, either double click it, or drag it outside of the Recipe pane</li></ul><p>The arguments (or 'Ingredients' in CyberChef terminology) can be configured to change how an Operation processes the data.</p>">

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

@@ -1,3 +1,8 @@
+/**
+ * Operations - Categories list
+ */
+
+
 .category-title {
     display: flex;
     justify-content: space-between;
@@ -33,17 +38,6 @@
     border: none;
 }
 
-#categories {
-    position: absolute;
-    top: 40px; /* the height of the input[type="search"] with pos relative */
-    width: 100%;
-    height: auto;
-    max-height: 60vh;
-    overflow: scroll;
-    border-bottom: 1px solid var(--primary-border-colour);
-    z-index: 20; /* to dropdown on top of all the other elements */
-}
-
 #categories a {
     color: var(--category-list-font-colour);
     cursor: pointer;

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

@@ -1,14 +1,34 @@
 /**
  * Operations component styles
+ *
+ * For consistency sake I'm using an ID, but the custom wrapper / dropdown component
+ * can ( should ) be made into a reusable, generic component
  */
 
-.operations-wrapper {
+#operations-wrapper {
     position: relative;
 }
 
+#operations-dropdown {
+    position: absolute;
+    top: 40px; /* the height of the input[type="search"] with pos relative */
+    width: 100%;
+    height: auto;
+    max-height: 60vh;
+    overflow: auto;
+    z-index: 20; /* to dropdown on top of all the other elements */
+    border-bottom: 1px solid var(--primary-border-colour);
+}
+
 #reset-operations.hidden,
 #search-results.hidden,
 #categories.hidden {
     z-index: -10;
     display: none;
 }
+
+@media only screen and ( min-width: 768px ){
+    #operations-dropdown {
+        border-bottom: none;
+    }
+}

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

@@ -1,5 +1,5 @@
 /**
- * Operations - Search component and search-results list
+ * Operations - Search component
  */
 
 #search {
@@ -9,14 +9,3 @@
         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);
 }
-
-#search-results {
-    position: absolute;
-    top: 40px; /* the height of the input[type="search"] with pos relative */
-    width: 100%;
-    height: auto;
-    max-height: 60vh;
-    overflow: scroll;
-    border-bottom: 1px solid var(--primary-border-colour);
-    z-index: 20; /* to dropdown on top of all the other elements */
-}

src/web/stylesheets/layout/_structure.css

@@ -51,8 +51,7 @@ body {
         height: calc( 100vh - var(--banner-height));
     }
 
-    #categories,
-    #search-results {
+    #operations-dropdown {
         max-height: max-content;
         overflow: revert;
     }

src/web/waiters/OperationsWaiter.mjs

@@ -35,7 +35,7 @@ class OperationsWaiter {
      * @param {event} e
      */
     searchOperations(e) {
-        let ops, selected, categories, hideOperations, searchResults;
+        let ops, selected, hideOperations, categories, searchResults;
 
         if (e.type === "click" && !e.target.value.length){
             categories = document.getElementById("categories");
@@ -55,7 +55,7 @@ class OperationsWaiter {
                 this.app.setVisibility(categories, true);
                 this.app.setVisibility(hideOperations, true);
             } else {
-                this.app.setVisibility(categories, false );
+                this.app.setVisibility(categories, true );
                 this.app.setVisibility(searchResults, true );
                 this.app.setVisibility(hideOperations, true );
             }