From e257a8d29b47d50918fc45911a2f0a2b3939b04e Mon Sep 17 00:00:00 2001
From: smilerz <smilerz@gmail.com>
Date: Tue, 21 Dec 2021 18:38:16 -0600
Subject: [PATCH] fix responsive display of shopping list

---
 cookbook/views/lists.py                       |  2 -
 .../ShoppingListView/ShoppingListView.vue     | 71 +++++++++--------
 vue/src/components/Modals/ShoppingModal.vue   |  2 +-
 vue/src/components/ShoppingLineItem.vue       | 79 ++++++++++++-------
 4 files changed, 90 insertions(+), 64 deletions(-)

diff --git a/cookbook/views/lists.py b/cookbook/views/lists.py
index 6d8bfdf6..85fb9b5c 100644
--- a/cookbook/views/lists.py
+++ b/cookbook/views/lists.py
@@ -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',
diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index f41bd536..277a872d 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -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,24 +149,28 @@
 
                             <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>
 
-                                        <b-button
-                                            variant="link"
-                                            class="p-0 m-0 float-right"
-                                            @click="
-                                                s.editmode = !s.editmode
-                                                new_category.entrymode = false
-                                                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>
-                                        <b-button variant="link" class="p-0 m-0 float-right" @click="deleteSupermarket(s)">
-                                            <i class="btn fas fa-trash fa-lg px-2 text-muted" />
-                                        </b-button>
+                                            <div class="col-auto text-right ml-auto">
+                                                <b-button
+                                                    variant="link"
+                                                    class="p-0 m-0"
+                                                    @click="
+                                                        s.editmode = !s.editmode
+                                                        new_category.entrymode = false
+                                                        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>
+                                                <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,19 +184,24 @@
                     <div class="col col-md-5">
                         <b-card class="no-body">
                             <template #header>
-                                <h4 class="mb-0">
-                                    {{ $t("Shopping_Categories") }}
-                                    <b-button
-                                        variant="link"
-                                        class="p-0 m-0 float-right"
-                                        @click="
-                                            new_category.entrymode = !new_category.entrymode
-                                            new_supermarket.entrymode = false
-                                        "
-                                    >
-                                        <i class="btn fas fa-plus-circle fa-lg px-0" :class="new_category.entrymode ? 'text-success' : 'text-muted'" />
-                                    </b-button>
-                                </h4>
+                                <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"
+                                            @click="
+                                                new_category.entrymode = !new_category.entrymode
+                                                new_supermarket.entrymode = false
+                                            "
+                                        >
+                                            <i class="btn fas fa-plus-circle fa-lg px-0" :class="new_category.entrymode ? 'text-success' : 'text-muted'" />
+                                        </b-button>
+                                    </div>
+                                </div>
                             </template>
                             <b-card
                                 class="m-1 p-1 no-body"
diff --git a/vue/src/components/Modals/ShoppingModal.vue b/vue/src/components/Modals/ShoppingModal.vue
index 5219d851..75b16aa7 100644
--- a/vue/src/components/Modals/ShoppingModal.vue
+++ b/vue/src/components/Modals/ShoppingModal.vue
@@ -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
diff --git a/vue/src/components/ShoppingLineItem.vue b/vue/src/components/ShoppingLineItem.vue
index 5d3ff35a..4b80c6e9 100644
--- a/vue/src/components/ShoppingLineItem.vue
+++ b/vue/src/components/ShoppingLineItem.vue
@@ -1,37 +1,50 @@
 <template>
     <div id="shopping_line_item">
         <div class="col-12">
-            <div class="row">
-                <div class="col col-md-1">
-                    <div style="position: static" class="btn-group">
-                        <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true">
-                            <button
-                                aria-haspopup="true"
-                                aria-expanded="false"
-                                type="button"
-                                class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
-                                @click.stop="$emit('open-context-menu', $event, entries)"
-                            >
-                                <i class="fas fa-ellipsis-v fa-lg"></i>
-                            </button>
+            <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
+                                    aria-haspopup="true"
+                                    aria-expanded="false"
+                                    type="button"
+                                    class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
+                                    @click.stop="$emit('open-context-menu', $event, entries)"
+                                >
+                                    <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>
-                        <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">
-                    <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>
+                    <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>
+                            </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-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 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>
+                            </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 () {