Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-12-27 12:45:17 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
This commit is contained in:
miah
2025-12-22 11:55:25 -06:00
committed by GitHub
parent 95e1bbce2b
commit 9d601ea4b5
2 changed files with 136 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/components/Domain/ShoppingList/ShoppingListItem.vue
View File

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

6
frontend/pages/shopping-lists/[id].vue
View File

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