cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix responsive display of shopping list

Browse Source
This commit is contained in:
smilerz
2021-12-21 18:38:16 -06:00
parent 889fa7b8ea
commit e257a8d29b
4 changed files with 90 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cookbook/views/lists.py
View File

@ -225,8 +225,6 @@ def step(request):
@group_required('user')
def shopping_list_new(request):
# recipe-param is the name of the parameters used when filtering recipes by this attribute
# model-name is the models.js name of the model, probably ALL-CAPS
return render(
request,
'shoppinglist_template.html',

25
vue/src/apps/ShoppingListView/ShoppingListView.vue
View File

@ -2,7 +2,7 @@
<div id="app" style="margin-bottom: 4vh">
<b-alert :show="!online" dismissible class="small float-up" variant="warning">{{ $t("OfflineAlert") }}</b-alert>
<div class="row float-top">
<div class="offset-md-10 col-md-2 no-gutter text-right">
<div class="col-auto no-gutter ml-auto">
<b-button variant="link" class="px-0">
<i class="btn fas fa-plus-circle fa-lg px-0" @click="entrymode = !entrymode" :class="entrymode ? 'text-success' : 'text-muted'" />
</b-button>
@ -149,12 +149,14 @@
<b-card-body class="m-0 p-0">
<b-card class="no-body mb-2" v-for="s in supermarkets" v-bind:key="s.id">
<b-card-title
>{{ s.name }}
<b-card-title>
<div class="row">
<div class="col">{{ s.name }}</div>
<div class="col-auto text-right ml-auto">
<b-button
variant="link"
class="p-0 m-0 float-right"
class="p-0 m-0"
@click="
s.editmode = !s.editmode
new_category.entrymode = false
@ -164,9 +166,11 @@
>
<i class="btn fas fa-edit fa-lg px-0" :class="s.editmode ? 'text-success' : 'text-muted'" />
</b-button>
<b-button variant="link" class="p-0 m-0 float-right" @click="deleteSupermarket(s)">
<b-button variant="link" class="p-0 m-0" @click="deleteSupermarket(s)">
<i class="btn fas fa-trash fa-lg px-2 text-muted" />
</b-button>
</div>
</div>
</b-card-title>
<b-card-body class="py-0">
@ -180,11 +184,15 @@
<div class="col col-md-5">
<b-card class="no-body">
<template #header>
<h4 class="mb-0">
<div class="row">
<div class="col">
{{ $t("Shopping_Categories") }}
</div>
<div class="col-auto text-right ml-auto">
<b-button
variant="link"
class="p-0 m-0 float-right"
class="p-0 m-0"
@click="
new_category.entrymode = !new_category.entrymode
new_supermarket.entrymode = false
@ -192,7 +200,8 @@
>
<i class="btn fas fa-plus-circle fa-lg px-0" :class="new_category.entrymode ? 'text-success' : 'text-muted'" />
</b-button>
</h4>
</div>
</div>
</template>
<b-card
class="m-1 p-1 no-body"

2
vue/src/components/Modals/ShoppingModal.vue
View File

@ -106,7 +106,7 @@ export default {
...this.steps
.map((x) => x.ingredients)
.flat()
.filter((x) => !x.food.on_hand && !x.food.ignore_shopping)
.filter((x) => !x?.food?.on_hand && !x?.food?.ignore_shopping)
.map((x) => x.id),
]
this.recipe_servings = result.data?.servings

43
vue/src/components/ShoppingLineItem.vue
View File

@ -1,8 +1,10 @@
<template>
<div id="shopping_line_item">
<div class="col-12">
<div class="row">
<div class="col col-md-1">
<b-container fluid>
<!-- summary rows -->
<b-row align-h="start">
<b-col cols="12" sm="2">
<div style="position: static" class="btn-group">
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true">
<button
@ -17,21 +19,32 @@
</div>
<input type="checkbox" class="text-right mx-3 mt-2" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" />
</div>
</div>
<div class="col-sm-3">
</b-col>
<b-col cols="12" sm="10">
<b-row>
<b-col cols="6" sm="3">
<div v-if="Object.entries(formatAmount).length == 1">{{ Object.entries(formatAmount)[0][1] }} &ensp; {{ Object.entries(formatAmount)[0][0] }}</div>
<div class="small" v-else v-for="(x, i) in Object.entries(formatAmount)" :key="i">{{ x[1] }} &ensp; {{ x[0] }}</div>
</div>
</b-col>
<div class="col col-md-6">
{{ formatFood }} <span class="small text-muted">{{ formatHint }}</span>
</div>
<div class="col col-md-1" data-html2canvas-ignore="true">
<b-col cols="6" sm="7">
{{ formatFood }}
</b-col>
<b-col cols="6" sm="2" data-html2canvas-ignore="true">
<b-button size="sm" @click="showDetails = !showDetails" class="mr-2" variant="link">
<div class="text-nowrap">{{ showDetails ? "Hide" : "Show" }} Details</div>
</b-button>
</div>
</div>
</b-col>
</b-row>
</b-col>
</b-row>
<b-row align-h="center">
<b-col cols="12">
<div class="small text-muted text-truncate">{{ formatHint }}</div>
</b-col>
</b-row>
</b-container>
<!-- detail rows -->
<div class="card no-body" v-if="showDetails">
<div v-for="(e, z) in entries" :key="z">
<div class="row ml-2 small">
@ -177,7 +190,13 @@ export default {
return this.formatOneMealPlan(this.entries[0]) || ""
} else {
let mealplan_name = this.entries.filter((x) => x?.recipe_mealplan?.name)
return [this.formatOneMealPlan(mealplan_name?.[0]), this.$t("CountMore", { count: this.entries?.length - 1 })].join(" ")
// return [this.formatOneMealPlan(mealplan_name?.[0]), this.$t("CountMore", { count: this.entries?.length - 1 })].join(" ")
return mealplan_name
.map((x) => {
return this.formatOneMealPlan(x)
})
.join(" - ")
}
},
formatNotes: function () {