feat: Animate shopping list and increase touch target (#6569)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>

frontend/components/Domain/ShoppingList/ShoppingListItem.vue

@@ -7,8 +7,16 @@
       no-gutters
       class="flex-nowrap align-center"
     >
-      <v-col :cols="itemLabelCols">
-        <div class="d-flex align-center flex-nowrap">
+      <v-card
+        flat
+        link
+        class="grow"
+        @click="() => {
+          listItem.checked = !listItem.checked
+          $emit('checked', listItem)
+        }"
+      >
+        <div class="d-flex align-center flex-nowrap grow">
           <v-checkbox
             v-model="listItem.checked"
             hide-details
@@ -25,12 +33,7 @@
             <RecipeIngredientListItem :ingredient="listItem" />
           </div>
         </div>
-      </v-col>
-      <v-spacer />
-      <v-col
-        cols="auto"
-        class="text-right"
-      >
+      </v-card>
       <div
         v-if="!listItem.checked"
         style="min-width: 72px"
@@ -102,7 +105,6 @@
           </v-list>
         </v-menu>
       </div>
-      </v-col>
     </v-row>
     <v-row
       v-if="!listItem.checked && recipeList && recipeList.length && displayRecipeRefs"
@@ -311,4 +313,8 @@ export default defineNuxtComponent({
 .strike-through {
   text-decoration: line-through !important;
 }
+
+.grow {
+  flex-grow: 1;
+}
 </style>

frontend/pages/shopping-lists/[id].vue

@@ -179,6 +179,7 @@
         </BaseButton>
       </div>
 
+      <TransitionGroup name="scroll-x-transition">
         <BaseExpansionPanels v-for="(value, key) in itemsByLabel" :key="key" :v-model="0" start-open>
           <v-expansion-panel class="shopping-list-section">
             <v-expansion-panel-title
@@ -197,6 +198,7 @@
                 @end="loadingCounter -= 1"
                 @update:model-value="updateIndexUncheckedByLabel(key.toString(), $event)"
               >
+                <TransitionGroup name="scroll-x-transition">
                   <ShoppingListItem
                     v-for="(item, index) in value"
                     :key="item.id"
@@ -210,10 +212,12 @@
                     @save="saveListItem"
                     @delete="deleteListItem(item)"
                   />
+                </TransitionGroup>
               </VueDraggable>
             </v-expansion-panel-text>
           </v-expansion-panel>
         </BaseExpansionPanels>
+      </TransitionGroup>
       <!-- Checked Items -->
       <v-expansion-panels flat>
         <v-expansion-panel v-if="listItems.checked && listItems.checked.length > 0">
@@ -243,6 +247,7 @@
             </div>
           </v-expansion-panel-title>
           <v-expansion-panel-text eager>
+            <TransitionGroup name="scroll-x-transition">
               <div v-for="(item, idx) in listItems.checked" :key="item.id">
                 <ShoppingListItem
                   v-model="listItems.checked[idx]"
@@ -255,6 +260,7 @@
                   @delete="deleteListItem(item)"
                 />
               </div>
+            </TransitionGroup>
           </v-expansion-panel-text>
         </v-expansion-panel>
       </v-expansion-panels>