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,84 +33,78 @@
             <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"
       >
-        <div
-          v-if="!listItem.checked"
-          style="min-width: 72px"
+        <v-menu
+          offset-x
+          start
+          min-width="125px"
         >
-          <v-menu
-            offset-x
-            start
-            min-width="125px"
-          >
-            <template #activator="{ props }">
-              <v-tooltip
-                v-if="recipeList && recipeList.length"
-                open-delay="200"
-                transition="slide-x-reverse-transition"
-                density="compact"
-                location="end"
-                content-class="text-caption"
-              >
-                <template #activator="{ props: tooltipProps }">
-                  <v-btn
-                    size="small"
-                    variant="text"
-                    class="ml-2"
-                    icon
-                    v-bind="tooltipProps"
-                    @click="displayRecipeRefs = !displayRecipeRefs"
-                  >
-                    <v-icon>
-                      {{ $globals.icons.potSteam }}
-                    </v-icon>
-                  </v-btn>
-                </template>
-                <span>Toggle Recipes</span>
-              </v-tooltip>
-              <v-btn
-                size="small"
-                variant="text"
-                class="ml-2"
-                icon
-                @click="toggleEdit(true)"
-              >
-                <v-icon>
-                  {{ $globals.icons.edit }}
-                </v-icon>
-              </v-btn>
-              <v-btn
-                size="small"
-                variant="text"
-                class="handle"
-                icon
-                v-bind="props"
-              >
-                <v-icon>
-                  {{ $globals.icons.arrowUpDown }}
-                </v-icon>
-              </v-btn>
-            </template>
-            <v-list density="compact">
-              <v-list-item
-                v-for="action in contextMenu"
-                :key="action.event"
-                density="compact"
-                @click="contextHandler(action.event)"
-              >
-                <v-list-item-title>
-                  {{ action.text }}
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </div>
-      </v-col>
+          <template #activator="{ props }">
+            <v-tooltip
+              v-if="recipeList && recipeList.length"
+              open-delay="200"
+              transition="slide-x-reverse-transition"
+              density="compact"
+              location="end"
+              content-class="text-caption"
+            >
+              <template #activator="{ props: tooltipProps }">
+                <v-btn
+                  size="small"
+                  variant="text"
+                  class="ml-2"
+                  icon
+                  v-bind="tooltipProps"
+                  @click="displayRecipeRefs = !displayRecipeRefs"
+                >
+                  <v-icon>
+                    {{ $globals.icons.potSteam }}
+                  </v-icon>
+                </v-btn>
+              </template>
+              <span>Toggle Recipes</span>
+            </v-tooltip>
+            <v-btn
+              size="small"
+              variant="text"
+              class="ml-2"
+              icon
+              @click="toggleEdit(true)"
+            >
+              <v-icon>
+                {{ $globals.icons.edit }}
+              </v-icon>
+            </v-btn>
+            <v-btn
+              size="small"
+              variant="text"
+              class="handle"
+              icon
+              v-bind="props"
+            >
+              <v-icon>
+                {{ $globals.icons.arrowUpDown }}
+              </v-icon>
+            </v-btn>
+          </template>
+          <v-list density="compact">
+            <v-list-item
+              v-for="action in contextMenu"
+              :key="action.event"
+              density="compact"
+              @click="contextHandler(action.event)"
+            >
+              <v-list-item-title>
+                {{ action.text }}
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </div>
     </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,41 +179,45 @@
         </BaseButton>
       </div>
 
-      <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
-            :color="getLabelColor(key)"
-            class="body-1 font-weight-bold section-title"
-          >
-            {{ key }}
-          </v-expansion-panel-title>
-          <v-expansion-panel-text eager>
-            <VueDraggable
-              :model-value="value"
-              handle=".handle"
-              :delay="250"
-              :delay-on-touch-only="true"
-              @start="loadingCounter += 1"
-              @end="loadingCounter -= 1"
-              @update:model-value="updateIndexUncheckedByLabel(key.toString(), $event)"
+      <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
+              :color="getLabelColor(key)"
+              class="body-1 font-weight-bold section-title"
             >
-              <ShoppingListItem
-                v-for="(item, index) in value"
-                :key="item.id"
-                v-model="value[index]"
-                class="ml-2 my-2 w-auto"
-                :labels="allLabels || []"
-                :units="allUnits || []"
-                :foods="allFoods || []"
-                :recipes="recipeMap"
-                @checked="saveListItem"
-                @save="saveListItem"
-                @delete="deleteListItem(item)"
-              />
-            </VueDraggable>
-          </v-expansion-panel-text>
-        </v-expansion-panel>
-      </BaseExpansionPanels>
+              {{ key }}
+            </v-expansion-panel-title>
+            <v-expansion-panel-text eager>
+              <VueDraggable
+                :model-value="value"
+                handle=".handle"
+                :delay="250"
+                :delay-on-touch-only="true"
+                @start="loadingCounter += 1"
+                @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"
+                    v-model="value[index]"
+                    class="ml-2 my-2 w-auto"
+                    :labels="allLabels || []"
+                    :units="allUnits || []"
+                    :foods="allFoods || []"
+                    :recipes="recipeMap"
+                    @checked="saveListItem"
+                    @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,18 +247,20 @@
             </div>
           </v-expansion-panel-title>
           <v-expansion-panel-text eager>
-            <div v-for="(item, idx) in listItems.checked" :key="item.id">
-              <ShoppingListItem
-                v-model="listItems.checked[idx]"
-                class="strike-through-note"
-                :labels="allLabels || []"
-                :units="allUnits || []"
-                :foods="allFoods || []"
-                @checked="saveListItem"
-                @save="saveListItem"
-                @delete="deleteListItem(item)"
-              />
-            </div>
+            <TransitionGroup name="scroll-x-transition">
+              <div v-for="(item, idx) in listItems.checked" :key="item.id">
+                <ShoppingListItem
+                  v-model="listItems.checked[idx]"
+                  class="strike-through-note"
+                  :labels="allLabels || []"
+                  :units="allUnits || []"
+                  :foods="allFoods || []"
+                  @checked="saveListItem"
+                  @save="saveListItem"
+                  @delete="deleteListItem(item)"
+                />
+              </div>
+            </TransitionGroup>
           </v-expansion-panel-text>
         </v-expansion-panel>
       </v-expansion-panels>