From d2134b27bad91bdec86c9a41c3d6d667f71866a9 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 21 Mar 2023 14:48:00 -0500
Subject: [PATCH] fix: Shopping List Mobile Usability (#2247)

* removed handle from edit button

* added dragging delay for touch screens
---
 frontend/components/Domain/ShoppingList/ShoppingListItem.vue | 2 +-
 frontend/pages/shopping-lists/_id.vue                        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
index fb0572d4c68f..93b2604ed44c 100644
--- a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
+++ b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
@@ -38,7 +38,7 @@
               </v-list-item>
             </v-list>
           </v-menu>
-          <v-btn small class="ml-2 handle" icon @click="toggleEdit(true)">
+          <v-btn small class="ml-2" icon @click="toggleEdit(true)">
             <v-icon>
               {{ $globals.icons.edit }}
             </v-icon>
diff --git a/frontend/pages/shopping-lists/_id.vue b/frontend/pages/shopping-lists/_id.vue
index 1ed569b1a352..9b87fd006dc1 100644
--- a/frontend/pages/shopping-lists/_id.vue
+++ b/frontend/pages/shopping-lists/_id.vue
@@ -10,7 +10,7 @@
     <!-- Viewer -->
     <section v-if="!edit" class="py-2">
       <div v-if="!preferences.viewByLabel">
-        <draggable :value="listItems.unchecked" handle=".handle" @start="loadingCounter += 1" @end="loadingCounter -= 1" @input="updateIndexUnchecked">
+        <draggable :value="listItems.unchecked" handle=".handle" delay="250" :delay-on-touch-only="true"  @start="loadingCounter += 1" @end="loadingCounter -= 1" @input="updateIndexUnchecked">
           <v-lazy v-for="(item, index) in listItems.unchecked" :key="item.id" class="my-2">
             <ShoppingListItem
               v-model="listItems.unchecked[index]"
@@ -38,7 +38,7 @@
             </span>
             {{ key }}
           </div>
-          <draggable :value="value" handle=".handle" @start="loadingCounter += 1" @end="loadingCounter -= 1" @input="updateIndexUncheckedByLabel(key, $event)">
+          <draggable :value="value" handle=".handle" delay="250" :delay-on-touch-only="true" @start="loadingCounter += 1" @end="loadingCounter -= 1" @input="updateIndexUncheckedByLabel(key, $event)">
             <v-lazy v-for="(item, index) in value" :key="item.id" class="ml-2 my-2">
               <ShoppingListItem
                 v-model="value[index]"