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
Show Stats 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') @group_required('user')
def shopping_list_new(request): 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( return render(
request, request,
'shoppinglist_template.html', 'shoppinglist_template.html',

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

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

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

@ -106,7 +106,7 @@ export default {
...this.steps ...this.steps
.map((x) => x.ingredients) .map((x) => x.ingredients)
.flat() .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), .map((x) => x.id),
] ]
this.recipe_servings = result.data?.servings this.recipe_servings = result.data?.servings

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

@ -1,37 +1,50 @@
<template> <template>
<div id="shopping_line_item"> <div id="shopping_line_item">
<div class="col-12"> <div class="col-12">
<div class="row"> <b-container fluid>
<div class="col col-md-1"> <!-- summary rows -->
<div style="position: static" class="btn-group"> <b-row align-h="start">
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"> <b-col cols="12" sm="2">
<button <div style="position: static" class="btn-group">
aria-haspopup="true" <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true">
aria-expanded="false" <button
type="button" aria-haspopup="true"
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret" aria-expanded="false"
@click.stop="$emit('open-context-menu', $event, entries)" type="button"
> class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
<i class="fas fa-ellipsis-v fa-lg"></i> @click.stop="$emit('open-context-menu', $event, entries)"
</button> >
<i class="fas fa-ellipsis-v fa-lg"></i>
</button>
</div>
<input type="checkbox" class="text-right mx-3 mt-2" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" />
</div> </div>
<input type="checkbox" class="text-right mx-3 mt-2" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" /> </b-col>
</div> <b-col cols="12" sm="10">
</div> <b-row>
<div class="col-sm-3"> <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 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 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"> <b-col cols="6" sm="7">
{{ formatFood }} <span class="small text-muted">{{ formatHint }}</span> {{ formatFood }}
</div> </b-col>
<div class="col col-md-1" data-html2canvas-ignore="true"> <b-col cols="6" sm="2" data-html2canvas-ignore="true">
<b-button size="sm" @click="showDetails = !showDetails" class="mr-2" variant="link"> <b-button size="sm" @click="showDetails = !showDetails" class="mr-2" variant="link">
<div class="text-nowrap">{{ showDetails ? "Hide" : "Show" }} Details</div> <div class="text-nowrap">{{ showDetails ? "Hide" : "Show" }} Details</div>
</b-button> </b-button>
</div> </b-col>
</div> </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 class="card no-body" v-if="showDetails">
<div v-for="(e, z) in entries" :key="z"> <div v-for="(e, z) in entries" :key="z">
<div class="row ml-2 small"> <div class="row ml-2 small">
@ -177,7 +190,13 @@ export default {
return this.formatOneMealPlan(this.entries[0]) || "" return this.formatOneMealPlan(this.entries[0]) || ""
} else { } else {
let mealplan_name = this.entries.filter((x) => x?.recipe_mealplan?.name) 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 () { formatNotes: function () {