From f80284cb362d2485fdaee876925cc70c70db590c Mon Sep 17 00:00:00 2001
From: Robin Scholtes <robin@theweirdscience.com>
Date: Wed, 3 May 2023 13:32:17 +1200
Subject: [PATCH] [#181] adjust Sortable recipe list for a nice mobile
 experience ('long' press before grab kicks in so you can still scroll
 normally ), add some visual feedback when sortable-chosen is set on a li,
 tweak the animations and threshold a bit for a nicer experience

---
 src/web/stylesheets/components/_operation.css | 5 +----
 src/web/stylesheets/components/_recipe.css    | 4 ++++
 src/web/waiters/RecipeWaiter.mjs              | 6 ++++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css
index b9b5434d..ffbe8475 100755
--- a/src/web/stylesheets/components/_operation.css
+++ b/src/web/stylesheets/components/_operation.css
@@ -7,6 +7,7 @@
  */
 
 .operation {
+    cursor: grab;
     padding: 10px;
     list-style-type: none;
     position: relative;
@@ -18,10 +19,6 @@
 }
 
 @media only screen and (min-width: 768px){
-    .operation {
-        cursor: grab;
-    }
-
     /* never display check icons on desktop views */
     .op-icon.check-icon {
         display: none;
diff --git a/src/web/stylesheets/components/_recipe.css b/src/web/stylesheets/components/_recipe.css
index a8d1d910..4fbf5414 100644
--- a/src/web/stylesheets/components/_recipe.css
+++ b/src/web/stylesheets/components/_recipe.css
@@ -21,3 +21,7 @@
     border-color: var(--rec-list-operation-border-colour);
     padding: 14px;
 }
+
+#rec-list li.sortable-chosen{
+    filter: brightness(0.8);
+}
diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs
index 1bf7dd95..e65935d0 100755
--- a/src/web/waiters/RecipeWaiter.mjs
+++ b/src/web/waiters/RecipeWaiter.mjs
@@ -33,13 +33,15 @@ class RecipeWaiter {
      */
     initialiseOperationDragNDrop() {
         const recList = document.getElementById("rec-list");
+        const isMobileView = window.innerWidth < this.app.breakpoint;
 
         // Recipe list
         Sortable.create(recList, {
             group: "recipe",
             sort: true,
-            animation: 0,
-            delay: 0,
+            swapThreshold: isMobileView ? 0.60 : 0.3,
+            animation: isMobileView ? 400 : 200,
+            delay: isMobileView ? 200 : 0,
             filter: ".arg",
             preventOnFilter: false,
             setData: function(dataTransfer, dragEl) {