tidy up code, add controls-height var and implement across stylesheets, start work on operation/category lists

src/web/App.mjs

@@ -252,6 +252,9 @@ class App {
      * @fires Manager#oplistcreate
      */
     populateOperationsList() {
+        // Move edit button away before we overwrite it
+        document.body.appendChild(document.getElementById("edit-favourites"));
+
         let html = "";
         let i;
 

src/web/HTMLOperation.mjs

@@ -51,7 +51,7 @@ class HTMLOperation {
         if (this.description) {
             const infoLink = this.infoURL ? `<hr>${titleFromWikiLink(this.infoURL)}` : "";
 
-            html += ` data-container='body' data-toggle='popover' data-placement='right'
+            html += ` data-container='body' data-toggle='popover' data-placement='left'
                 data-content="${this.description}${infoLink}" data-html='true' data-trigger='hover'
                 data-boundary='viewport'`;
         }

src/web/html/index.html

@@ -197,6 +197,8 @@
                          data-help-title="Operations list"
                          data-help="<p>The Operations list contains all the operations in CyberChef arranged into categories. Some operations may be present in multiple categories. You can search for operations using the search box.</p><p>To use an operation, either double click it, or drag it into the Recipe pane. You will then be able to configure its arguments (or 'Ingredients' in CyberChef terminology).</p>">
                         Operations
+
+<!--@TODO: this should just be removed, however that currently breaks some code-->
                         <span class="pane-controls hide-on-maximised-output">
                             <button type="button"
                                     class="btn btn-warning bmd-btn-icon"
@@ -207,16 +209,20 @@
                             </button>
                         </span>
                     </div>
-                    <input id="search"
+                    <div class="foo">
-                           type="search"
+                        <input id="search"
-                           class="form-control"
+                               type="search"
-                           placeholder="Search..."
+                               class="form-control"
-                           autocomplete="off"
+                               placeholder="Search..."
-                           tabindex="2"
+                               autocomplete="off"
-                           data-help-title="Searching for operations"
+                               tabindex="2"
-                           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>"/>
+                               data-help-title="Searching for operations"
-<!--                    <ul id="search-results" class="op-list"></ul>-->
+                               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="categories" class="panel-group no-select"></div>-->
+                        />
+                        <!--operation list and categories-->
+                        <ul id="search-results" class="op-list"></ul>
+                        <div id="categories" class="panel-group no-select"></div>
+                    </div>
                 </div>
 
                 <!--recipe-->
@@ -235,7 +241,8 @@
                             </button>
                         </span>
                     </div>
-<!--                    <ul id="rec-list" class="list-area no-select"></ul>-->
+                    <!--selected recipes list-->
+                    <ul id="rec-list" class="list-area no-select"></ul>
 
                     <!--controls-->
                     <div id="controls" class="no-select hide-on-maximised-output">

src/web/stylesheets/components/_operation.css

@@ -7,7 +7,7 @@
  */
 
 .operation {
-    cursor: grab;
+    cursor: pointer;
     padding: 10px;
     list-style-type: none;
     position: relative;
@@ -18,6 +18,12 @@
     border-right: none;
 }
 
+@media only screen and ( min-width: 768px ) {
+    .operation {
+        cursor: grab;
+    }
+}
+
 #rec-list .operation {
     padding: 14px;
 }
@@ -320,3 +326,22 @@ input.toggle-string {
     color: var(--disabled-font-colour) !important;
     background-color: var(--disabled-border-colour) !important;
 }
+
+/* ================ experimentation ================ */
+.foo {
+    position: relative;
+}
+
+#search-results,
+#categories {
+    position: absolute;
+    top: 40px; /* the height of the search input */
+    left: 0;
+    right: 0;
+    z-index: 10;
+    height: auto;
+    max-height: 60vh;
+    overflow: scroll;
+    border-bottom: 1px solid var(--primary-border-colour);
+}
+

src/web/stylesheets/layout/_controls.css

@@ -13,6 +13,8 @@
     padding: 10px 0;
     border-top: 1px solid var(--primary-border-colour);
     background-color: var(--secondary-background-colour);
+    height: var(--controls-height);
+    overflow: hidden;
 }
 
 #controls-content {
@@ -31,15 +33,6 @@
     color: var(--primary-font-colour);
     font-size: 14px;
     cursor: pointer;
-    /*line-height: 0;*/
-}
-
-#auto-bake {
-    position: relative;
-    width: auto;
-    height: auto;
-    opacity: 1;
-    z-index: initial;
 }
 
 #auto-bake-label .check,

src/web/stylesheets/layout/_structure.css

@@ -10,10 +10,6 @@ body {
     overflow: hidden;
 }
 
-#workspace-wrapper {
-    margin-top: var(--banner-height);
-}
-
 #content-wrapper {
     position: absolute;
     top: 0;
@@ -22,19 +18,27 @@ body {
     left: 0;
 }
 
-#recipe,
+/*@TODO: test with keyboard popping up because that messes with the viewheight probably*/
-#input .cm-scroller,
+
-#output .cm-scroller {
+#workspace-wrapper {
-    overflow-y: auto;
+    /* The workspaces' available height minus the top banner and control element at the bottom */
+    height: calc( 100vh - calc( var(--banner-height) + var(--controls-height)) );
+    margin-top: var(--banner-height);
+}
+
+#operations {
+    height: auto;
 }
 
 #recipe {
     height: 15vh;
+    overflow-y: auto;
 }
 
 #input .cm-scroller,
 #output .cm-scroller {
     height: 20vh;
+    overflow-y: auto;
 }
 
 #operations .title,

src/web/stylesheets/themes/_classic.css

@@ -36,7 +36,6 @@
     --banner-font-colour: #468847;
     --banner-bg-colour: #dff0d8;
     --banner-url-colour: #1976d2;
-    --banner-height: 40px;
 
     --category-list-font-colour: #1976d2;
 
@@ -133,5 +132,7 @@
     --code-font-colour: #c7254e;
     --input-highlight-colour: #1976d2;
     --input-border-colour: #424242;
+    --banner-height: 40px;
+    --controls-height: 70px;
 }