fix display issues

vue/src/apps/ShoppingListView/ShoppingListView.vue

@@ -123,7 +123,7 @@
                                             <div class="collapse" :id="'section-' + sectionID(x, i)" visible role="tabpanel" :class="{ show: x == 'false' }">
                                                 <!-- passing an array of values to the table grouped by Food -->
                                                 <transition-group name="slide-fade">
-                                                    <div v-for="(entries, x) in Object.entries(s)" :key="x">
+                                                    <div class="mx-4" v-for="(entries, x) in Object.entries(s)" :key="x">
                                                         <transition name="slide-fade" mode="out-in">
                                                             <ShoppingLineItem
                                                                 :entries="entries[1]"
@@ -563,6 +563,26 @@
                 </div>
             </b-tab>
         </b-tabs>
+
+        <transition name="slided-fade">
+            <div class="row fixed-bottom p-2 b-1 border-top text-center d-flex d-md-none" style="background: rgba(255, 255, 255, 0.6)" v-if="current_tab === 0">
+                <div class="col-6">
+                    <a class="btn btn-block btn-success shadow-none" @click="entrymode = !entrymode"
+                        ><i class="fas fa-cart-plus"></i>
+                        {{ $t("New Entry") }}
+                    </a>
+                </div>
+                <div class="col-6">
+                    <b-dropdown id="dropdown-dropup" block dropup variant="primary" class="shadow-none">
+                        <template #button-content> <i class="fas fa-download"></i> {{ $t("Export") }} </template>
+                        <DownloadPDF dom="#shoppinglist" name="shopping.pdf" :label="$t('download_pdf')" icon="far fa-file-pdf" />
+                        <DownloadCSV :items="csvData" :delim="settings.csv_delim" name="shopping.csv" :label="$t('download_csv')" icon="fas fa-file-csv" />
+                        <CopyToClipboard :items="csvData" :settings="settings" :label="$t('copy_to_clipboard')" icon="fas fa-clipboard-list" />
+                        <CopyToClipboard :items="csvData" :settings="settings" format="table" :label="$t('copy_markdown_table')" icon="fab fa-markdown" />
+                    </b-dropdown>
+                </div>
+            </div>
+        </transition>
         <b-popover target="id_filters_button" triggers="click" placement="bottomleft" :title="$t('Filters')">
             <div>
                 <b-form-group v-bind:label="$t('GroupBy')" label-for="popover-input-1" label-cols="6" class="mb-1">
@@ -643,25 +663,6 @@
                 </ContextMenuItem>
             </template>
         </ContextMenu>
-        <transition name="slided-fade">
-            <div class="row fixed-bottom p-2 b-1 border-top text-center d-flex d-md-none" style="background: rgba(255, 255, 255, 0.6)" v-if="current_tab === 0">
-                <div class="col-6">
-                    <a class="btn btn-block btn-success shadow-none" @click="entrymode = !entrymode"
-                        ><i class="fas fa-cart-plus"></i>
-                        {{ $t("New Entry") }}
-                    </a>
-                </div>
-                <div class="col-6">
-                    <b-dropdown id="dropdown-dropup" block dropup variant="primary" class="shadow-none">
-                        <template #button-content> <i class="fas fa-download"></i> {{ $t("Export") }} </template>
-                        <DownloadPDF dom="#shoppinglist" name="shopping.pdf" :label="$t('download_pdf')" icon="far fa-file-pdf" />
-                        <DownloadCSV :items="csvData" :delim="settings.csv_delim" name="shopping.csv" :label="$t('download_csv')" icon="fas fa-file-csv" />
-                        <CopyToClipboard :items="csvData" :settings="settings" :label="$t('copy_to_clipboard')" icon="fas fa-clipboard-list" />
-                        <CopyToClipboard :items="csvData" :settings="settings" format="table" :label="$t('copy_markdown_table')" icon="fab fa-markdown" />
-                    </b-dropdown>
-                </div>
-            </div>
-        </transition>
         <shopping-modal v-if="new_recipe.id" :recipe="new_recipe" :servings="parseInt(add_recipe_servings)" :modal_id="new_recipe.id" @finish="finishShopping" :list_recipe="new_recipe.list_recipe" />
     </div>
 </template>
@@ -914,6 +915,7 @@ export default {
         },
     },
     mounted() {
+        console.log(screen.height)
         this.getShoppingList()
         this.getSupermarkets()
         this.getShoppingCategories()
@@ -1102,7 +1104,6 @@ export default {
                     if (!autosync) {
                         if (results.data?.length) {
                             this.items = results.data
-                            console.log(this.items)
                         } else {
                             console.log("no data returned")
                         }
@@ -1483,7 +1484,7 @@ export default {
     font-size: 20px;
 }
 
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
     #shoppinglist {
         display: flex;
         flex-direction: column;
@@ -1494,6 +1495,17 @@ export default {
         padding-right: 8px !important;
     }
 }
+@media screen and (min-height: 700px) and (max-width: 768px) {
+    #shoppinglist {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        height: 72vh;
+        padding-right: 8px !important;
+    }
+}
 
 .settings-checkbox {
     font-size: 0.3rem;

vue/src/components/GenericMultiselect.vue

@@ -117,7 +117,6 @@ export default {
                 limit: this.limit,
             }
             this.genericAPI(this.model, this.Actions.LIST, options).then((result) => {
-                console.log(result)
                 this.objects = this.sticky_options.concat(result.data?.results ?? result.data)
                 if (this.nothingSelected && this.objects.length > 0) {
                     this.objects.forEach((item) => {

vue/src/components/IngredientsCard.vue

@@ -142,20 +142,12 @@ export default {
                     this.shopping_list = result.data
 
                     if (this.add_shopping_mode) {
-                        console.log("add shopping mode", this.recipe_list, this.steps)
                         if (this.recipe_list) {
                             this.$emit(
                                 "starting-cart",
                                 this.shopping_list.filter((x) => x.list_recipe === this.recipe_list).map((x) => x.ingredient)
                             )
                         } else {
-                            console.log(
-                                this.steps
-                                    .map((x) => x.ingredients)
-                                    .flat()
-                                    .filter((x) => x?.food?.food_onhand == false && x?.food?.ignore_shopping == false)
-                                    .map((x) => x.id)
-                            )
                             this.$emit(
                                 "starting-cart",
                                 this.steps

vue/src/components/MealPlanCard.vue

@@ -71,9 +71,7 @@ export default {
             image_placeholder: window.IMAGE_PLACEHOLDER,
         }
     },
-    mounted() {
+    mounted() {},
-        console.log(this.value)
-    },
     computed: {
         entry: function () {
             return this.value.originalItem

vue/src/components/RecipeContextMenu.vue

@@ -154,7 +154,6 @@ export default {
                 .createMealPlan(entry)
                 .then((result) => {
                     this.$bvModal.hide(`modal-meal-plan_${this.modal_id}`)
-                    console.log(entry)
                     if (reviewshopping) {
                         this.mealplan = result.data.id
                         this.servings_value = result.data.servings

vue/src/components/ShoppingLineItem.vue

@@ -1,43 +1,36 @@
 <template>
     <div id="shopping_line_item">
         <b-row align-h="start">
-      <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0"
+            <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0" v-if="settings.left_handed">
-             v-if="settings.left_handed">
+                <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" />
-        <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked"
-               @change="updateChecked"
-               :key="entries[0].id"/>
                 <b-button size="sm" @click="showDetails = !showDetails" class="d-inline-block d-md-none p-0" variant="link">
-          <div class="text-nowrap"><i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i>
+                    <div class="text-nowrap"><i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i></div>
-          </div>
                 </b-button>
             </b-col>
             <b-col cols="1" class="align-items-center d-flex">
-        <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"
+                <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true" @click.stop="$emit('open-context-menu', $event, entries)">
-             @click.stop="$emit('open-context-menu', $event, entries)">
                     <button
                         aria-haspopup="true"
                         aria-expanded="false"
                         type="button"
                         :class="settings.left_handed ? 'dropdown-spacing' : ''"
-              class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret">
+                        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>
                     </button>
                 </div>
             </b-col>
-      <b-col cols="1" class="justify-content-center align-items-center d-none d-md-flex">
+            <b-col cols="1" class="px-1 justify-content-center align-items-center d-none d-md-flex">
-        <input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked"
+                <input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" />
-               @change="updateChecked"
-               :key="entries[0].id"/>
             </b-col>
             <b-col cols="8" md="9">
                 <b-row class="d-flex h-100">
                     <b-col cols="5" md="3" class="d-flex align-items-center" v-if="Object.entries(formatAmount).length == 1">
-            <strong class="mr-1">{{ Object.entries(formatAmount)[0][1] }}</strong> {{
+                        <strong class="mr-1">{{ Object.entries(formatAmount)[0][1] }}</strong> {{ Object.entries(formatAmount)[0][0] }}
-              Object.entries(formatAmount)[0][0]
-            }}
                     </b-col>
                     <b-col cols="5" md="3" class="d-flex flex-column" v-if="Object.entries(formatAmount).length != 1">
-            <div class="small" v-for="(x, i) in Object.entries(formatAmount)" :key="i">{{ x[1] }} &ensp;
+                        <div class="small" v-for="(x, i) in Object.entries(formatAmount)" :key="i">
+                            {{ x[1] }} &ensp;
                             {{ x[0] }}
                         </div>
                     </b-col>
@@ -45,27 +38,20 @@
                     <b-col cols="7" md="6" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
                         {{ formatFood }}
                     </b-col>
-          <b-col cols="3" data-html2canvas-ignore="true"
+                    <b-col cols="3" data-html2canvas-ignore="true" class="align-items-center d-none d-md-flex justify-content-end">
-                 class="align-items-center d-none d-md-flex justify-content-end">
+                        <b-button size="sm" @click="showDetails = !showDetails" class="p-0 mr-0 mr-md-2 p-md-2 text-decoration-none" variant="link">
-            <b-button size="sm" @click="showDetails = !showDetails" class="p-0 mr-0 mr-md-2 p-md-2 text-decoration-none"
+                            <div class="text-nowrap">
-                      variant="link">
+                                <i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i> <span class="d-none d-md-inline-block">{{ $t("Details") }}</span>
-              <div class="text-nowrap"><i class="fa fa-chevron-right rotate"
-                                          :class="showDetails ? 'rotated' : ''"></i> <span
-                  class="d-none d-md-inline-block">{{ $t('Details') }}</span>
                             </div>
                         </b-button>
                     </b-col>
                 </b-row>
             </b-col>
-      <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none"
+            <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none" v-if="!settings.left_handed">
-             v-if="!settings.left_handed">
                 <b-button size="sm" @click="showDetails = !showDetails" class="d-inline-block d-md-none p-0" variant="link">
-          <div class="text-nowrap"><i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i>
+                    <div class="text-nowrap"><i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i></div>
-          </div>
                 </b-button>
-        <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked"
+                <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" />
-               @change="updateChecked"
-               :key="entries[0].id"/>
             </b-col>
         </b-row>
         <b-row align-h="center" class="d-none d-md-flex">
@@ -85,7 +71,8 @@
                             class="btn btn-link btn-sm m-0 p-0 pl-2"
                             style="text-overflow: ellipsis"
                             @click.stop="openRecipeCard($event, e)"
-                @mouseover="openRecipeCard($event, e)">
+                            @mouseover="openRecipeCard($event, e)"
+                        >
                             {{ formatOneRecipe(e) }}
                         </button>
                     </b-col>
@@ -96,30 +83,24 @@
                     </b-col>
                 </b-row>
                 <b-row align-h="start">
-          <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0"
+                    <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0" v-if="settings.left_handed">
-                 v-if="settings.left_handed">
+                        <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" />
-            <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile"
-                   :checked="formatChecked"
-                   @change="updateChecked"
-                   :key="entries[0].id"/>
                     </b-col>
                     <b-col cols="1" class="align-items-center d-flex">
-            <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"
+                        <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true" @click.stop="$emit('open-context-menu', $event, e)">
-                 @click.stop="$emit('open-context-menu', $event, e)">
                             <button
                                 aria-haspopup="true"
                                 aria-expanded="false"
                                 type="button"
                                 :class="settings.left_handed ? 'dropdown-spacing' : ''"
-                  class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret">
+                                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>
                             </button>
                         </div>
                     </b-col>
                     <b-col cols="1" class="justify-content-center align-items-center d-none d-md-flex">
-            <input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked"
+                        <input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" />
-                   @change="updateChecked"
-                   :key="entries[0].id"/>
                     </b-col>
                     <b-col cols="8" md="9">
                         <b-row class="d-flex align-items-center h-100">
@@ -134,12 +115,8 @@
                             </b-col>
                         </b-row>
                     </b-col>
-          <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none"
+                    <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none" v-if="!settings.left_handed">
-                 v-if="!settings.left_handed">
+                        <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" />
-            <input type="checkbox" class="form-control form-control-sm checkbox-control-mobile"
-                   :checked="formatChecked"
-                   @change="updateChecked"
-                   :key="entries[0].id"/>
                     </b-col>
                 </b-row>
                 <hr class="w-75" v-if="x !== entries.length - 1" />
@@ -269,7 +246,7 @@ export default {
             }
             return Intl.DateTimeFormat(window.navigator.language, {
                 dateStyle: "short",
-        timeStyle: "short"
+                timeStyle: "short",
             }).format(Date.parse(datetime))
         },
         formatOneAmount: function (item) {
@@ -344,11 +321,11 @@ export default {
 /*   border-bottom: 1px solid #000;             /* …and with a border on the top   */
 /* }   */
 .checkbox-control {
-  font-size: 0.6rem
+    font-size: 0.6rem;
 }
 
 .checkbox-control-mobile {
-  font-size: 1rem
+    font-size: 1rem;
 }
 
 .rotate {