replace the checkbox bootstrap styles with bootstap material v4. Not entirely sure what the issue was, but something in that checkbox decorator code caused reordering / cloning of c-recipe-li to fail

src/web/HTMLIngredient.mjs

@@ -131,20 +131,21 @@ class HTMLIngredient {
                 </div>`;
                 break;
             case "boolean":
-                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"
-                                class="arg"
-                                id="${this.id}"
-                                tabindex="${this.tabIndex}"
-                                arg-name="${this.name}"
-                                ${this.value ? " checked" : ""}
-                                ${this.disabled ? " disabled" : ""}
-                                value="${this.name}"> ${this.name}
+                html += `<div class="form-group boolean-arg ing-flexible custom-control custom-checkbox">
+                        <input type="checkbox"
+                               class="custom-control-input arg"
+                               id="${this.id}"
+                               tabindex="${this.tabIndex}"
+                               arg-name="${this.name}"
+                               ${this.value ? " checked" : ""}
+                               ${this.disabled ? " disabled" : ""}
+                               value="${this.name}"/>
+                        <label class="custom-control-label"
+                               ${this.hint && `data-toggle="tooltip" title="${this.hint}"`}
+                               for="${this.id}">
+                               ${this.name}
                         </label>
-                    </div>
-                </div>`;
+                    </div>`
                 break;
             case "option":
                 html += `<div class="form-group ing-medium">

src/web/Manager.mjs

@@ -142,7 +142,7 @@ class Manager {
         document.getElementById("support").addEventListener("click", this.controls.supportButtonClick.bind(this.controls));
         this.addMultiEventListeners("#save-texts textarea", "keyup paste", this.controls.saveTextChange, this.controls);
         document.getElementById("rec-list").addEventListener("click", this.controls.onMaximisedRecipeClick.bind(this.controls));
-        // A note for the Maximise Controls listeners below: click events via addDynamicListener don't properly bubble and the hit box to maximise is unacceptably tiny, hence this solution
+        // A note for the Maximise Controls listeners below: click events via addDynamicListener don't properly bubble and the hit-box is unacceptably tiny, hence this solution
         document.getElementById("maximise-recipe").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls));
         document.getElementById("maximise-input").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls));
         document.getElementById("maximise-output").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls));

src/web/TODO.md

@@ -1,8 +1,5 @@
 operations:
 - UI tests etc.
 
-manual testing issues
-
-mobile:
-- all ops with bootstrap checkboxes in recipe break ( due to the bootstrap checkbox func not being applied ). Need to replace / remove this
-- on ingredient input change ( for instance 'to charcode' 'base' or whatever ) on backspace / removing the value, there is a popup at teh bottem [object Object]. Also happens on actual CC but still. Only happens when value = null
+manual testing issues:
+- some reordering in recipe is not super smooth ( when the recipe-li is very large for instance )

src/web/components/c-recipe-li.mjs

@@ -22,19 +22,21 @@ export class CRecipeLi extends HTMLElement {
 
         this.app = app;
         this.name = name;
-        this.args = [];
+        this.args = args;
+        this.ingredients = [];
 
         this.flowControl = this.app.operations[this.name].flowControl;
         this.manualBake = this.app.operations[this.name].manualBake;
 
         for (let i = 0; i < args.length; i++) {
             const ing = new HTMLIngredient(args[i], this.app, this.app.manager);
-            this.args.push(ing);
+            this.ingredients.push(ing);
         }
 
         this.build();
 
-        this.addEventListener("click", this.handleClick.bind(this));
+        // Use mousedown event instead of click to prevent accidentally firing the handler twice on mobile
+        this.addEventListener("mousedown", this.handleMousedown.bind(this));
         this.addEventListener("dblclick", this.handleDoubleClick.bind(this));
     }
 
@@ -42,16 +44,16 @@ export class CRecipeLi extends HTMLElement {
      * Remove listeners on disconnectedCallback
      */
     disconnectedCallback() {
-        this.removeEventListener("click", this.handleClick.bind(this));
+        this.removeEventListener("mousedown", this.handleMousedown.bind(this));
         this.removeEventListener("dblclick", this.handleDoubleClick.bind(this));
     }
 
     /**
-     * Handle click
+     * Handle mousedown
      * @fires Manager#statechange
      * @param {Event} e
      */
-    handleClick(e) {
+    handleMousedown(e) {
         const disableIcon = this.querySelector("i.disable-icon");
         const breakpointIcon = this.querySelector("i.breakpoint-icon");
 
@@ -91,7 +93,7 @@ export class CRecipeLi extends HTMLElement {
      * @param {Event} e
      */
     handleDoubleClick(e) {
-        // do not remove if icons or form elements are double clicked
+        // do not remove if icons or form elements are double-clicked
         if (e.target === this.querySelector("li") || e.target === this.querySelector("div.op-title")) {
             this.removeOperation();
         }
@@ -127,8 +129,8 @@ export class CRecipeLi extends HTMLElement {
         li.appendChild(titleDiv);
         li.appendChild(ingredientDiv);
 
-        for (let i = 0; i < this.args.length; i++) {
-            ingredientDiv.innerHTML += (this.args[i].toHtml());
+        for (let i = 0; i < this.ingredients.length; i++) {
+            ingredientDiv.innerHTML += (this.ingredients[i].toHtml());
         }
 
         const icons = this.buildIcons();

src/web/stylesheets/components/_operation.css

@@ -265,6 +265,30 @@ input.toggle-string {
     top: 13px;
 }
 
+.custom-control-label {
+    line-height: 1.5rem;
+}
+
+.custom-control-label:hover {
+    cursor: pointer;
+}
+
+.custom-control-label::before {
+    height: 20px;
+    width: 20px;
+    border: 1px solid var(--input-border-colour);
+}
+
+.custom-control-input:checked + .custom-control-label::before {
+    background-color: var(--input-highlight-colour);
+    border: 1px solid var(--input-highlight-colour);
+}
+
+.custom-control-label::after {
+    height: 20px;
+    width: 20px;
+}
+
 .register-list {
     background-color: var(--fc-operation-border-colour);
     font-family: var(--fixed-width-font-family);