From cab83cae356b0db1fe65c257bba47ce9a942f31d Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Thu, 9 Mar 2023 17:31:46 +0000
Subject: [PATCH] Switched arg layout to use flexbox instead of css grid

---
 src/web/HTMLIngredient.mjs                    | 24 ++++++------
 src/web/stylesheets/components/_operation.css | 35 +++++++++++++----
 src/web/waiters/RecipeWaiter.mjs              | 38 +------------------
 3 files changed, 40 insertions(+), 57 deletions(-)

diff --git a/src/web/HTMLIngredient.mjs b/src/web/HTMLIngredient.mjs
index 6d9ccdbf..befcbe14 100755
--- a/src/web/HTMLIngredient.mjs
+++ b/src/web/HTMLIngredient.mjs
@@ -54,7 +54,7 @@ class HTMLIngredient {
             case "string":
             case "binaryString":
             case "byteArray":
-                html += `<div class="form-group">
+                html += `<div class="form-group ing-wide">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating">${this.name}</label>
@@ -70,7 +70,7 @@ class HTMLIngredient {
                 break;
             case "shortString":
             case "binaryShortString":
-                html += `<div class="form-group inline">
+                html += `<div class="form-group ing-short">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating inline">${this.name}</label>
@@ -85,7 +85,7 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "toggleString":
-                html += `<div class="form-group input-group">
+                html += `<div class="form-group input-group ing-wide">
                     <div class="toggle-string">
                         <label for="${this.id}"
                             ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
@@ -111,7 +111,7 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "number":
-                html += `<div class="form-group inline">
+                html += `<div class="form-group inline ing-medium">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating inline">${this.name}</label>
@@ -128,7 +128,7 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "boolean":
-                html += `<div class="form-group inline boolean-arg">
+                html += `<div class="form-group inline boolean-arg ing-flexible">
                     <div class="checkbox">
                         <label ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}>
                             <input type="checkbox"
@@ -144,7 +144,7 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "option":
-                html += `<div class="form-group inline">
+                html += `<div class="form-group ing-medium">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating inline">${this.name}</label>
@@ -168,7 +168,7 @@ class HTMLIngredient {
                 break;
             case "populateOption":
             case "populateMultiOption":
-                html += `<div class="form-group">
+                html += `<div class="form-group ing-medium">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating">${this.name}</label>
@@ -199,7 +199,7 @@ class HTMLIngredient {
                 this.manager.addDynamicListener("#" + this.id, "change", eventFn, this);
                 break;
             case "editableOption":
-                html += `<div class="form-group input-group">
+                html += `<div class="form-group input-group ing-wide">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating">${this.name}</label>
@@ -230,7 +230,7 @@ class HTMLIngredient {
                 this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
                 break;
             case "editableOptionShort":
-                html += `<div class="form-group input-group inline">
+                html += `<div class="form-group input-group ing-short">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating inline">${this.name}</label>
@@ -261,7 +261,7 @@ class HTMLIngredient {
                 this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
                 break;
             case "text":
-                html += `<div class="form-group">
+                html += `<div class="form-group ing-very-wide">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating">${this.name}</label>
@@ -275,7 +275,7 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "argSelector":
-                html += `<div class="form-group inline">
+                html += `<div class="form-group inline ing-medium">
                     <label for="${this.id}"
                         ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
                         class="bmd-label-floating inline">${this.name}</label>
@@ -298,7 +298,7 @@ class HTMLIngredient {
                 this.manager.addDynamicListener(".arg-selector", "change", this.argSelectorChange, this);
                 break;
             case "label":
-                html += `<div class="form-group">
+                html += `<div class="form-group ing-flexible">
                     <label>${this.name}</label>
                     <input type="hidden"
                         class="form-control arg"
diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css
index 7d45a9e2..685a368a 100755
--- a/src/web/stylesheets/components/_operation.css
+++ b/src/web/stylesheets/components/_operation.css
@@ -27,17 +27,31 @@
 }
 
 .ingredients {
-    display: grid;
-    grid-template-columns: auto auto auto;
-    grid-column-gap: 14px;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    column-gap: 14px;
+    row-gap: 0;
 }
 
-.ingredients > div {
-    grid-column: 1 / span 3;
+.ing-very-wide {
+    flex: 4 400px;
 }
 
-.ingredients > div.inline {
-    grid-column: unset;
+.ing-wide {
+    flex: 3 200px;
+}
+
+.ing-medium {
+    flex: 2 120px;
+}
+
+.ing-short {
+    flex: 1 80px;
+}
+
+.ing-flexible {
+    flex-grow: 1;
 }
 
 .ingredients .form-group {
@@ -64,6 +78,11 @@ div.toggle-string {
     flex: 1;
 }
 
+input.toggle-string {
+    border-top-right-radius: 0 !important;
+    height: 42px !important;
+}
+
 .operation [class^='bmd-label'],
 .operation [class*=' bmd-label'] {
     top: 13px !important;
@@ -160,7 +179,7 @@ div.toggle-string {
 }
 
 .input-group .form-control {
-    border-top-left-radius: 4px !important;
+    border-top-left-radius: 4px;
 }
 
 .input-group-append button {
diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs
index 0a616629..42e763b0 100755
--- a/src/web/waiters/RecipeWaiter.mjs
+++ b/src/web/waiters/RecipeWaiter.mjs
@@ -585,42 +585,6 @@ class RecipeWaiter {
     adjustWidth() {
         const recList = document.getElementById("rec-list");
 
-        if (!this.ingredientRuleID) {
-            this.ingredientRuleID = null;
-            this.ingredientChildRuleID = null;
-
-            // Find relevant rules in the stylesheet
-            // try/catch for chrome 64+ CORS error on cssRules.
-            try {
-                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;
-                    }
-                }
-            } catch (e) {
-                // Do nothing.
-            }
-        }
-
-        if (!this.ingredientRuleID || !this.ingredientChildRuleID) return;
-
-        const ingredientRule = document.styleSheets[0].cssRules[this.ingredientRuleID];
-        const 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";
-        }
-
         // Hide Chef icon on Bake button if the page is compressed
         const bakeIcon = document.querySelector("#bake img");
 
@@ -636,7 +600,7 @@ class RecipeWaiter {
         const controlsContent = document.getElementById("controls-content");
         const scale = (controls.clientWidth - 1) / controlsContent.scrollWidth;
 
-        controlsContent.style.transform = `translate(-50%, -50%) scale(${scale})`;
+        controlsContent.style.transform = `scale(${scale})`;
     }
 
 }