From 21eb17752716b60aa6875bf4ef2cf7b965091ef4 Mon Sep 17 00:00:00 2001
From: Robin Scholtes <robin@theweirdscience.com>
Date: Mon, 14 Aug 2023 21:52:26 +1200
Subject: [PATCH] fix 'undefined' list item clone bug, hitboxes for recipe
 icons more comfortable, fix problem where the operation-dropdown would
 display on click / tap of elements in expanded recipe view ( mobile )

---
 src/web/TODO.md                               | 6 ++----
 src/web/components/c-ingredient-li.mjs        | 5 +++++
 src/web/stylesheets/components/_operation.css | 8 +++++++-
 src/web/waiters/ControlsWaiter.mjs            | 2 +-
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/web/TODO.md b/src/web/TODO.md
index ee51ec24..02abf36f 100644
--- a/src/web/TODO.md
+++ b/src/web/TODO.md
@@ -4,7 +4,5 @@ operations:
 manual testing issues
 
 mobile:
-- drag any recipe li will have an ( clone? ) extra li below it with 'undefined' title. Not on desktop
-- hitboxes combined with drag / mouse events on breakpoint and disable icons kind of sucks
-- some issues tapping on ingredients causing the op-dropdown to display
-- some issues with ingredient breakpoint / disable background colors
+- double tap on mobile recipe list sometimes really annoying
+- same for grabbing items in rec-list. Especially 'magic' for whatever reason?
diff --git a/src/web/components/c-ingredient-li.mjs b/src/web/components/c-ingredient-li.mjs
index 44edc770..705b8a47 100644
--- a/src/web/components/c-ingredient-li.mjs
+++ b/src/web/components/c-ingredient-li.mjs
@@ -34,6 +34,11 @@ export class CIngredientLi extends HTMLElement {
         this.addEventListener("dblclick", this.handleDoubleClick.bind(this));
     }
 
+    cloneNode() {
+        const { app, name, args } = this;
+        return new CIngredientLi( app, name, args );
+    }
+
     /**
      * Remove listeners on disconnectedCallback
      */
diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css
index 7eb02521..2cc8f5b7 100755
--- a/src/web/stylesheets/components/_operation.css
+++ b/src/web/stylesheets/components/_operation.css
@@ -280,13 +280,19 @@ input.toggle-string {
 }
 
 .recipe-icons i {
-    margin-right: 10px;
+    height: 30px;
+    width: 30px;
+    text-align: center;
     vertical-align: baseline;
     float: right;
     font-size: 18px;
     cursor: pointer;
 }
 
+.recipe-icons i:last-child {
+    margin-right: 10px;
+}
+
 .disable-icon {
     color: var(--disable-icon-colour);
 }
diff --git a/src/web/waiters/ControlsWaiter.mjs b/src/web/waiters/ControlsWaiter.mjs
index f20b67d5..229a774a 100755
--- a/src/web/waiters/ControlsWaiter.mjs
+++ b/src/web/waiters/ControlsWaiter.mjs
@@ -497,7 +497,7 @@ ${navigator.userAgent}
      */
     onMaximisedRecipeClick() {
         // if #recipe is maximised & rec-list is empty on mobile UI
-        if (this.app.isMobileView() && document.querySelector("#recipe.maximised-pane") && document.querySelectorAll("#rec-list > li").length === 0) {
+        if (this.app.isMobileView() && document.querySelector("#recipe.maximised-pane") && document.querySelectorAll("#rec-list > c-ingredient-li").length === 0) {
             // close max pane and display the expanded #operations-dropdown
             this.setPaneMaximised("recipe", false);
             this.manager.ops.openOpsDropdown();