Operation arguments are now arranged using CSS Grid

src/web/App.mjs

@@ -241,7 +241,10 @@ class App {
         this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
             sizes: [20, 30, 50],
             minSize: [240, 370, 450],
-            gutterSize: 4
+            gutterSize: 4,
+            onDrag: function() {
+                this.manager.recipe.adjustWidth();
+            }.bind(this)
         });
 
         this.ioSplitter = Split(["#input", "#output"], {

src/web/HTMLCategory.mjs

@@ -40,10 +40,10 @@ class HTMLCategory {
     toHtml() {
         const catName = "cat" + this.name.replace(/[\s/-:_]/g, "");
         let html = `<div class="panel category">
-        <a class="category-title" data-toggle="collapse" data-parent="#categories" href="#${catName}">
+        <a class="category-title" data-toggle="collapse" data-target="#${catName}">
             ${this.name}
         </a>
-        <div id="${catName}" class="panel-collapse collapse ${(this.selected ? " show" : "")}">
+        <div id="${catName}" class="panel-collapse collapse ${(this.selected ? " show" : "")}" data-parent="#categories">
             <ul class="op-list">`;
 
         for (let i = 0; i < this.opList.length; i++) {

src/web/HTMLIngredient.mjs

@@ -205,7 +205,6 @@ class HTMLIngredient {
             default:
                 break;
         }
-        html += "</div>";
 
         return html;
     }

src/web/HTMLOperation.mjs

@@ -69,13 +69,15 @@ class HTMLOperation {
      * @returns {string}
      */
     toFullHtml() {
-        let html = `<div class="op-title">${this.name}</div>`;
+        let html = `<div class="op-title">${this.name}</div>
+        <div class="ingredients">`;
 
         for (let i = 0; i < this.ingList.length; i++) {
             html += this.ingList[i].toHtml();
         }
 
-        html += `<div class="recip-icons">
+        html += `</div>
+        <div class="recip-icons">
             <i class="material-icons breakpoint" title="Set breakpoint" break="false">pause</i>
             <i class="material-icons disable-icon" title="Disable operation" disabled="false">not_interested</i>
         </div>

src/web/RecipeWaiter.mjs

@@ -479,6 +479,44 @@ class RecipeWaiter {
         op.insertAdjacentHTML("beforeend", registerListEl);
     }
 
+    /**
+     * Adjusts the number of ingredient columns as the width of the recipe changes.
+     */
+    adjustWidth() {
+        const recList = document.getElementById("rec-list");
+
+        if (!this.ingredientRuleID) {
+            this.ingredientRuleID = null;
+            this.ingredientChildRuleID = null;
+
+            // Find relevant rules in the stylesheet
+            for (const i in document.styleSheets[0].cssRules) {
+                if (document.styleSheets[0].cssRules[i].selectorText === ".ingredients") {
+                    this.ingredientRuleID = i;
+                }
+                if (document.styleSheets[0].cssRules[i].selectorText === ".ingredients > div") {
+                    this.ingredientChildRuleID = i;
+                }
+            }
+        }
+
+        if (!this.ingredientRuleID || !this.ingredientChildRuleID) return;
+
+        const ingredientRule = document.styleSheets[0].cssRules[this.ingredientRuleID],
+            ingredientChildRule = document.styleSheets[0].cssRules[this.ingredientChildRuleID];
+
+        if (recList.clientWidth < 450) {
+            ingredientRule.style.gridTemplateColumns = "auto auto";
+            ingredientChildRule.style.gridColumn = "1 / span 2";
+        } else if (recList.clientWidth < 620) {
+            ingredientRule.style.gridTemplateColumns = "auto auto auto";
+            ingredientChildRule.style.gridColumn = "1 / span 3";
+        } else {
+            ingredientRule.style.gridTemplateColumns = "auto auto auto auto";
+            ingredientChildRule.style.gridColumn = "1 / span 4";
+        }
+    }
+
 }
 
 export default RecipeWaiter;

src/web/html/index.html

@@ -282,7 +282,9 @@
                             </span>
                             <div class="io-info" id="output-info"></div>
                             <div class="io-info" id="output-selection-info"></div>
-                            <span id="stale-indicator" title="The output is stale.&#10;The input or recipe has changed since this output was generated. Bake again to get the new value.">&#x1F551;</span>
+                            <span id="stale-indicator" title="The output is stale.&#10;The input or recipe has changed since this output was generated. Bake again to get the new value.">
+                                <i class="material-icons">access_time</i>
+                            </span>
                         </div>
                         <div class="textarea-wrapper">
                             <div id="output-highlighter" class="no-select"></div>

src/web/stylesheets/components/_operation.css

@@ -7,7 +7,7 @@
  */
 
 .operation {
-    cursor: pointer;
+    cursor: grab;
     padding: 10px;
     list-style-type: none;
     position: relative;
@@ -18,10 +18,29 @@
     border-right: none;
 }
 
+#rec-list .operation {
+    cursor: pointer;
+    padding: 14px;
+}
+
 .op-title {
     font-weight: var(--op-title-font-weight);
 }
 
+.ingredients {
+    display: grid;
+    grid-template-columns: auto auto auto;
+    grid-column-gap: 14px;
+}
+
+.ingredients > div {
+    grid-column: 1 / span 3;
+}
+
+.ingredients > div.inline {
+    grid-column: unset;
+}
+
 .arg {
     font-family: var(--fixed-width-font-family);
     text-overflow: ellipsis;
@@ -33,28 +52,10 @@ select.arg {
 }
 
 textarea.arg {
-    min-height: 68px;
+    min-height: 74px;
     resize: vertical;
 }
 
-@media (min-width: 576px) {
-    .arg.inline {
-        display: inline-block;
-        width: auto;
-        vertical-align: middle;
-    }
-
-    .form-group.inline {
-        display: inline-block;
-        margin-right: 20px;
-        width: unset;
-    }
-
-    .input-group-append.inline {
-        display: inline-block;
-    }
-}
-
 div.toggle-string {
     flex: 1;
 }
@@ -69,7 +70,8 @@ div.toggle-string {
 .operation .is-focused [class*=' bmd-label'],
 .operation .is-focused [class^='bmd-label'],
 .operation .is-focused [class*=' bmd-label'],
-.operation .is-focused label {
+.operation .is-focused label,
+.operation .checkbox label:hover {
     color: #1976d2;
 }
 

src/web/stylesheets/components/_pane.css

@@ -12,7 +12,7 @@
 
 .title {
     padding: 8px;
-    padding-left: 20px;
+    padding-left: 12px;
     padding-right: 12px;
     height: var(--title-height);
     border-bottom: 1px solid var(--primary-border-colour);
@@ -20,7 +20,7 @@
     font-size: var(--title-size);
     color: var(--title-colour);
     background-color: var(--title-background-colour);
-    line-height: calc(var(--title-height) - 20px);
+    line-height: calc(var(--title-height) - 14px);
 }
 
 .list-area {

src/web/stylesheets/layout/_io.css

@@ -129,11 +129,14 @@
     visibility: hidden;
     transition: all 0.3s;
     margin-left: 5px;
-    font-size: larger;
-    font-weight: normal;
     cursor: help;
 }
 
+#stale-indicator i {
+    vertical-align: middle;
+    margin-bottom: 5px;
+}
+
 #output-loader .loading-msg {
     opacity: 1;
     font-family: var(--primary-font-family);

src/web/stylesheets/layout/_operations.css

@@ -31,3 +31,13 @@
     border: 2px dashed var(--rec-list-operation-font-colour) !important;
     padding: 8px 8px 9px 8px;
 }
+
+#categories a {
+    color: #1976d2;
+    cursor: pointer;
+}
+
+#categories a:hover,
+.op-list .operation:hover {
+    filter: brightness(98%);
+}

src/web/stylesheets/themes/_classic.css

@@ -44,7 +44,7 @@
 
     --rec-list-operation-font-colour: #468847;
     --rec-list-operation-bg-colour: #dff0d8;
-    --rec-list-operation-border-colour: #d6e9c6;
+    --rec-list-operation-border-colour: #d3e8c0;
 
     --selected-operation-font-color: #c09853;
     --selected-operation-bg-colour: #fcf8e3;

src/web/stylesheets/utils/_overrides.css

@@ -108,6 +108,10 @@ input[type="search"]::-webkit-search-cancel-button {
     appearance: searchfield-cancel-button;
 }
 
+select.form-control:not([size]):not([multiple]), select.custom-file-control:not([size]):not([multiple]) {
+    height: unset;
+}
+
 code {
     border: 0;
     white-space: pre-wrap;