[#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

@@ -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;

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);
+}

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) {