fix responsive display of shopping list
This commit is contained in:
smilerz
parent
889fa7b8ea
commit
e257a8d29b
@ -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',
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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] }}   {{ Object.entries(formatAmount)[0][0] }}</div>
|
||||
<div class="small" v-else v-for="(x, i) in Object.entries(formatAmount)" :key="i">{{ x[1] }}   {{ 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 () {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user