From b037203b8f214423335ed60ff40ddadb143c5eaa Mon Sep 17 00:00:00 2001
From: Kaibu <notkaibu@gmail.com>
Date: Sat, 23 Apr 2022 01:28:20 +0200
Subject: [PATCH] ui improvements (shopping and meal plan)

- fixed content scaling for meal plan and shopping
- style fixes on shopping list
- touch based swipe actions for shopping list
- better mobile experience overall
---
 vue/src/apps/MealPlanView/MealPlanView.vue    |  15 +-
 vue/src/apps/RecipeView/RecipeView.vue        |   6 +-
 .../ShoppingListView/ShoppingListView.vue     | 887 +++++++++++-------
 vue/src/components/MealPlanCard.vue           |   6 +
 vue/src/components/ShoppingLineItem.vue       | 182 +++-
 5 files changed, 693 insertions(+), 403 deletions(-)

diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue
index 9b0d59b8b..da0ae46d4 100644
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -2,7 +2,7 @@
     <div>
         <b-tabs content-class="mt-3" v-model="current_tab">
             <b-tab :title="$t('Planner')" active>
-                <div class="row">
+                <div class="row calender-row">
                     <div class="col-12 calender-parent">
                         <calendar-view
                             :show-date="showDate"
@@ -693,19 +693,24 @@ export default {
     opacity: 0;
 }
 
+.calender-row {
+    height: calc(100% - 240px);
+}
+
 .calender-parent {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     overflow-x: hidden;
     overflow-y: hidden;
-    height: 70vh;
+    height: 100%
 }
 
 .cv-item {
     white-space: inherit !important;
 }
 
+
 .isHovered {
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
 }
@@ -837,4 +842,10 @@ having to override as much.
     opacity: 0.5;
     background: #c8ebfb;
 }
+
+@media (max-width: 767.9px) {
+    .periodLabel {
+        font-size: 18px !important;
+    }
+}
 </style>
diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index 3250edd9c..bab762da5 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -233,7 +233,7 @@ export default {
         this.loadRecipe(window.RECIPE_ID)
         this.$i18n.locale = window.CUSTOM_LOCALE
         this.requestWakeLock()
-        window.addEventListener('resize', this.handleRezise);
+        window.addEventListener('resize', this.handleResize);
     },
     beforeUnmount() {
         this.destroyWakeLock()
@@ -249,7 +249,7 @@ export default {
                 }
             }
         },
-        handleRezise: function () {
+        handleResize: function () {
             if (document.getElementById('nutrition_container') !== null) {
                 this.ingredient_height = document.getElementById('ingredient_container').clientHeight - document.getElementById('nutrition_container').clientHeight
             } else {
@@ -300,7 +300,7 @@ export default {
                 this.loading = false
 
                 setTimeout(() => {
-                    this.handleRezise()
+                    this.handleResize()
                 }, 100)
             })
         },
diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index 12919e80f..2a305bf66 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -1,103 +1,124 @@
 <template>
     <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 pl-0 pr-0">
+        <div class="row float-top w-100">
             <div class="col-auto no-gutter ml-auto">
                 <b-button variant="link" class="px-1 pt-0 pb-1 d-none d-md-inline-block">
-                    <i class="btn fas fa-plus-circle fa-lg px-0" @click="entrymode = !entrymode" :class="entrymode ? 'text-success' : 'text-primary'" />
+                    <i class="btn fas fa-plus-circle fa-lg px-0" @click="entrymode = !entrymode"
+                       :class="entrymode ? 'text-success' : 'text-primary'"/>
                 </b-button>
                 <b-button variant="link" class="px-1 pt-0 pb-1 d-none d-md-inline-block">
-                    <i class="fas fa-download fa-lg nav-link dropdown-toggle text-primary px-1" id="downloadShoppingLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
+                    <i class="fas fa-download fa-lg nav-link dropdown-toggle text-primary px-1"
+                       id="downloadShoppingLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
 
                     <div class="dropdown-menu dropdown-menu-right" aria-labelledby="downloadShoppingLink">
-                        <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" />
+                        <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"/>
                     </div>
                 </b-button>
-                <b-button variant="link" id="id_filters_button" class="px-1 pt-0 pb-1">
-                    <i class="btn fas fa-filter text-decoration-none fa-lg px-1" :class="filterApplied ? 'text-danger' : 'text-primary'" />
-                </b-button>
+                <i id="id_filters_button" class="fas fa-filter fa-fw mt-1" style="font-size: 16px"
+                   :class="filterApplied ? 'text-danger' : 'text-primary'"/>
             </div>
         </div>
 
-        <b-tabs content-class="mt-3" v-model="current_tab">
+        <b-tabs content-class="mt-2" v-model="current_tab" class="mt-md-1" style="margin-top: 22px">
             <!-- shopping list tab -->
             <b-tab active>
                 <template #title>
-                    <b-spinner v-if="loading" type="border" small></b-spinner>
-                    {{ $t("Shopping_list") }}
+                    <b-spinner v-if="loading" type="border" small class="d-inline-block"></b-spinner>
+                    <i v-if="!loading" class="fas fa-shopping-cart fa-fw d-inline-block d-md-none"></i>
+                    <span class="d-none d-md-block">{{ $t('Shopping_list') }}</span>
                 </template>
                 <div class="container p-0" id="shoppinglist">
                     <div class="row">
                         <div class="col col-md-12 p-0 p-lg-3">
                             <div role="tablist">
                                 <!-- add to shopping form -->
+                                <div class="container">
+                                    <b-row class="justify-content-md-center align-items-center pl-1 pr-1"
+                                           v-if="entrymode">
+                                        <b-col cols="12" md="3" v-if="!ui.entry_mode_simple"
+                                               class="d-none d-md-block mt-1">
+                                            <b-form-input
+                                                size="lg"
+                                                min="1"
+                                                type="number"
+                                                :description="$t('Amount')"
+                                                v-model="new_item.amount"
+                                                style="font-size: 16px; border-radius: 5px !important; border: 1px solid #e8e8e8 !important"
+                                            ></b-form-input>
+                                        </b-col>
+                                        <b-col cols="12" md="4" v-if="!ui.entry_mode_simple" class="mt-1">
+                                            <lookup-input :class_list="'mb-0'" :form="formUnit" :model="Models.UNIT"
+                                                          @change="new_item.unit = $event" :show_label="false"
+                                                          :clear="clear"/>
+                                        </b-col>
+                                        <b-col cols="12" md="4" v-if="!ui.entry_mode_simple" class="mt-1">
+                                            <lookup-input :class_list="'mb-0'" :form="formFood" :model="Models.FOOD"
+                                                          @change="new_item.food = $event" :show_label="false"
+                                                          :clear="clear"/>
+                                        </b-col>
+                                        <b-col cols="12" md="11" v-if="ui.entry_mode_simple" class="mt-1">
+                                            <b-form-input size="lg" type="text" :placeholder="$t('QuickEntry')"
+                                                          v-model="new_item.ingredient"
+                                                          @keyup.enter="addItem"></b-form-input>
+                                        </b-col>
+                                        <b-col cols="12" md="1" class="d-none d-md-block mt-1">
+                                            <b-button variant="link" class="px-0">
+                                                <i class="btn fas fa-cart-plus fa-lg px-0 text-success"
+                                                   @click="addItem"/>
+                                            </b-button>
+                                        </b-col>
+                                        <b-col cols="12" md="3" v-if="!ui.entry_mode_simple"
+                                               class="d-block d-md-none mt-1">
+                                            <b-row>
+                                                <b-col cols="9">
+                                                    <b-form-input
+                                                        size="lg"
+                                                        min="1"
+                                                        type="number"
+                                                        :description="$t('Amount')"
+                                                        v-model="new_item.amount"
+                                                        style="font-size: 16px; border-radius: 5px !important; border: 1px solid #e8e8e8 !important"
+                                                    ></b-form-input>
+                                                </b-col>
+                                                <b-col cols="3" class="flex-grow-1">
+                                                    <b-button variant="success" class="p-0 pt-1 w-100 h-100">
+                                                        <i class="btn fas fa-cart-plus fa-lg" @click="addItem"/>
+                                                    </b-button>
+                                                </b-col>
+                                            </b-row>
+                                        </b-col>
+                                    </b-row>
 
-                                <b-row class="justify-content-md-center align-items-center pl-1 pr-1" v-if="entrymode">
-                                    <b-col cols="12" md="3" v-if="!ui.entry_mode_simple" class="d-none d-md-block mt-1">
-                                        <b-form-input
-                                            size="lg"
-                                            min="1"
-                                            type="number"
-                                            :description="$t('Amount')"
-                                            v-model="new_item.amount"
-                                            style="font-size: 16px; border-radius: 5px !important; border: 1px solid #e8e8e8 !important"
-                                        ></b-form-input>
-                                    </b-col>
-                                    <b-col cols="12" md="4" v-if="!ui.entry_mode_simple" class="mt-1">
-                                        <lookup-input :class_list="'mb-0'" :form="formUnit" :model="Models.UNIT" @change="new_item.unit = $event" :show_label="false" :clear="clear" />
-                                    </b-col>
-                                    <b-col cols="12" md="4" v-if="!ui.entry_mode_simple" class="mt-1">
-                                        <lookup-input :class_list="'mb-0'" :form="formFood" :model="Models.FOOD" @change="new_item.food = $event" :show_label="false" :clear="clear" />
-                                    </b-col>
-                                    <b-col cols="12" md="11" v-if="ui.entry_mode_simple" class="mt-1">
-                                        <b-form-input size="lg" type="text" :placeholder="$t('QuickEntry')" v-model="new_item.ingredient" @keyup.enter="addItem"></b-form-input>
-                                    </b-col>
-                                    <b-col cols="12" md="1" class="d-none d-md-block mt-1">
-                                        <b-button variant="link" class="px-0">
-                                            <i class="btn fas fa-cart-plus fa-lg px-0 text-success" @click="addItem" />
+                                    <b-row class="row justify-content-around mt-2" v-if="entrymode">
+                                        <b-form-checkbox switch v-model="ui.entry_mode_simple">
+                                            {{ $t("QuickEntry") }}
+                                        </b-form-checkbox>
+                                        <b-button variant="success" size="sm" class="d-flex d-md-none p-0"
+                                                  v-if="ui.entry_mode_simple">
+                                            <i class="btn fas fa-cart-plus" @click="addItem"/>
                                         </b-button>
-                                    </b-col>
-                                    <b-col cols="12" md="3" v-if="!ui.entry_mode_simple" class="d-block d-md-none mt-1">
-                                        <b-row>
-                                            <b-col cols="9">
-                                                <b-form-input
-                                                    size="lg"
-                                                    min="1"
-                                                    type="number"
-                                                    :description="$t('Amount')"
-                                                    v-model="new_item.amount"
-                                                    style="font-size: 16px; border-radius: 5px !important; border: 1px solid #e8e8e8 !important"
-                                                ></b-form-input>
-                                            </b-col>
-                                            <b-col cols="3" class="flex-grow-1">
-                                                <b-button variant="success" class="p-0 pt-1 w-100 h-100">
-                                                    <i class="btn fas fa-cart-plus fa-lg" @click="addItem" />
-                                                </b-button>
-                                            </b-col>
-                                        </b-row>
-                                    </b-col>
-                                </b-row>
+                                    </b-row>
 
-                                <b-row class="row justify-content-around mt-2" v-if="entrymode">
-                                    <b-form-checkbox switch v-model="ui.entry_mode_simple">
-                                        {{ $t("QuickEntry") }}
-                                    </b-form-checkbox>
-                                    <b-button variant="success" size="sm" class="d-flex d-md-none p-0" v-if="ui.entry_mode_simple">
-                                        <i class="btn fas fa-cart-plus" @click="addItem" />
-                                    </b-button>
-                                </b-row>
+                                </div>
                                 <!-- shopping list table -->
                                 <div v-if="items && items.length > 0">
                                     <div v-for="(done, x) in Sections" :key="x">
-                                        <div v-if="x == 'true'" class="bg-header w-100 text-center d-flex justify-content-center align-items-center">
+                                        <div v-if="x == 'true'"
+                                             class="bg-header w-100 text-center d-flex justify-content-center align-items-center">
                                             <span class="h4 d-flex mt-1 mb-1">{{ $t("Completed") }}</span>
                                         </div>
 
                                         <div v-for="(s, i) in done" :key="i">
-                                            <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true" v-if="Object.entries(s).length > 0">
+                                            <div class="dropdown b-dropdown position-static inline-block"
+                                                 data-html2canvas-ignore="true" v-if="Object.entries(s).length > 0">
                                                 <button
                                                     aria-haspopup="true"
                                                     aria-expanded="false"
@@ -115,15 +136,17 @@
                                                     :href="'#section-' + sectionID(x, i)"
                                                     :aria-expanded="'true' ? x == 'false' : 'true'"
                                                 >
-                                                    <i class="fa fa-chevron-right rotate" />
+                                                    <i class="fa fa-chevron-right rotate"/>
                                                     <span class="h6 ml-2 text-secondary">{{ i }}</span>
                                                 </b-button>
                                             </div>
 
-                                            <div class="collapse" :id="'section-' + sectionID(x, i)" visible role="tabpanel" :class="{ show: x == 'false' }">
+                                            <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 class="ml-4 mr-0" v-for="(entries, x) in Object.entries(s)" :key="x">
+                                                    <div class="pl-4 pr-0" v-for="(entries, x) in Object.entries(s)"
+                                                         :key="x">
                                                         <transition name="slide-fade" mode="out-in">
                                                             <shopping-line-item
                                                                 :entries="entries[1]"
@@ -131,6 +154,7 @@
                                                                 :settings="settings"
                                                                 @open-context-menu="openContextMenu"
                                                                 @update-checkbox="updateChecked"
+                                                                @update-delaythis="delayThis"
                                                             />
                                                         </transition>
                                                     </div>
@@ -146,70 +170,108 @@
             </b-tab>
             <!-- recipe tab -->
             <b-tab :title="$t('Recipes')">
+                <template #title>
+                    <i class="fas fa-book fa-fw d-block d-md-none"></i>
+                    <span class="d-none d-md-block">{{ $t('Recipes') }}</span>
+                </template>
                 <div class="container p-0">
-                    <b-row class="justify-content-md-center align-items-center p-1">
-                        <b-col cols="10">
-                            <b-input-group>
-                                <b-input-group-prepend is-text>
-                                    {{ $t("Servings") }}
-                                </b-input-group-prepend>
-                                <b-input-group-prepend is-text>
-                                    <input type="number" :min="1" v-model="add_recipe_servings" style="width: 3em" />
-                                </b-input-group-prepend>
-                                <generic-multiselect
-                                    class="input-group-text m-0 p-0"
-                                    @change="new_recipe = $event.val"
-                                    :label="'name'"
-                                    :model="Models.RECIPE"
-                                    style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
-                                    v-bind:placeholder="$t('Recipe')"
-                                    :limit="20"
-                                    :multiple="false"
-                                />
-                                <b-input-group-append>
-                                    <b-button variant="success" @click="addRecipeToShopping" :disabled="!new_recipe.id">{{ $t("Add_to_Shopping") }}</b-button>
-                                </b-input-group-append>
-                            </b-input-group>
-                        </b-col>
-                    </b-row>
-                    <table class="table w-100">
-                        <thead>
-                            <tr>
-                                <th scope="col">{{ $t("Meal_Plan") }}</th>
-                                <th scope="col">{{ $t("Recipe") }}</th>
-                                <th scope="col">{{ $t("Servings") }}</th>
-                                <th scope="col"></th>
-                            </tr>
-                        </thead>
-                        <tr v-for="r in Recipes" :key="r.list_recipe">
-                            <td>{{ r.recipe_mealplan.name }}</td>
-                            <td>{{ r.recipe_mealplan.recipe_name }}</td>
-                            <td class="block-inline">
-                                <b-form-input min="1" type="number" :debounce="300" :value="r.recipe_mealplan.servings" @input="updateServings($event, r.list_recipe)"></b-form-input>
-                            </td>
-                            <td>
-                                <i class="btn text-primary far fa-eye fa-lg px-2 border-0" variant="link" :title="$t('view_recipe')" @click="editRecipeList($event, r)" />
-                            </td>
-                            <td>
-                                <i class="btn text-danger fas fa-trash fa-lg px-2 border-0" variant="link" :title="$t('Delete')" @click="deleteRecipe($event, r.list_recipe)" />
-                            </td>
-                        </tr>
-                    </table>
+                    <div class="row">
+                        <div class="col col-md-12 p-0 p-lg-3">
+                            <div role="tablist">
+                                <!-- add to shopping form -->
+                                <div class="container">
+                                    <b-row class="justify-content-md-center align-items-center pl-1 pr-1">
+                                        <b-col cols="10" md="3" class="mt-1">
+                                            <b-form-input
+                                                size="lg"
+                                                min="1"
+                                                type="number"
+                                                :description="$t('Servings')"
+                                                v-model="add_recipe_servings"
+                                                style="font-size: 16px; border-radius: 5px !important; border: 1px solid #e8e8e8 !important"
+                                            ></b-form-input>
+                                        </b-col>
+                                        <b-col cols="2" md="1" class="d-block d-md-none mt-1">
+                                            <b-button variant="link" class="px-0">
+                                                <i class="btn fas fa-cart-plus fa-lg px-0 text-success"
+                                                   @click="addRecipeToShopping"
+                                                   :disabled="!new_recipe.id"/>
+                                            </b-button>
+                                        </b-col>
+                                        <b-col cols="12" md="8" class="mt-1">
+                                            <generic-multiselect
+                                                class="input-group-text m-0 p-0"
+                                                @change="new_recipe = $event.val"
+                                                :label="'name'"
+                                                :model="Models.RECIPE"
+                                                style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
+                                                v-bind:placeholder="$t('Recipe')"
+                                                :limit="20"
+                                                :multiple="false"
+                                            />
+                                        </b-col>
+                                        <b-col cols="12" md="1" class="d-none d-md-block mt-1">
+                                            <b-button variant="link" class="px-0">
+                                                <i class="btn fas fa-cart-plus fa-lg px-0 text-success"
+                                                   @click="addRecipeToShopping"
+                                                   :disabled="!new_recipe.id"/>
+                                            </b-button>
+                                        </b-col>
+                                    </b-row>
+                                    <table class="table w-100 mt-3 recipe-table">
+                                        <thead>
+                                        <tr>
+                                            <th scope="col">{{ $t("Meal_Plan") }}</th>
+                                            <th scope="col">{{ $t("Recipe") }}</th>
+                                            <th scope="col">{{ $t("Servings") }}</th>
+                                            <th scope="col"></th>
+                                        </tr>
+                                        </thead>
+                                        <tr v-for="r in Recipes" :key="r.list_recipe">
+                                            <td>{{ r.recipe_mealplan.name }}</td>
+                                            <td>{{ r.recipe_mealplan.recipe_name }}</td>
+                                            <td class="block-inline">
+                                                <b-form-input min="1" type="number" :debounce="300"
+                                                              :value="r.recipe_mealplan.servings"
+                                                              @input="updateServings($event, r.list_recipe)"></b-form-input>
+                                            </td>
+                                            <td>
+                                                <i class="text-primary far fa-eye fa-fw fa-lg"
+                                                   :title="$t('view_recipe')" @click="editRecipeList($event, r)"/>
+                                                <i class="text-danger fas fa-trash fa-fw fa-lg mt-3"
+                                                   :title="$t('Delete')" @click="deleteRecipe($event, r.list_recipe)"/>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </b-tab>
             <!-- supermarkets tab -->
-            <b-tab :title="$t('Supermarkets')">
-                <div class="row justify-content-center">
-                    <!-- supermarkets column -->
-                    <div class="col col-md-5">
-                        <b-card no-body>
-                            <template #header>
-                                <h4 class="mb-0">
-                                    {{ $t("Supermarkets") }}
-                                    <b-button
-                                        variant="link"
-                                        class="p-0 m-0 float-right"
-                                        @click="
+            <b-tab>
+                <template #title>
+                    <i class="fas fa-store-alt fa-fw d-block d-md-none"></i>
+                    <span class="d-none d-md-block">{{ $t('Supermarkets') }}</span>
+                </template>
+                <div class="container p-0">
+                    <div class="row">
+                        <div class="col col-md-12 p-0 p-lg-3">
+                            <div role="tablist">
+                                <!-- add to shopping form -->
+                                <div class="container">
+                                    <div class="row justify-content-center">
+                                        <!-- supermarkets column -->
+                                        <div class="col col-md-5">
+                                            <b-card no-body>
+                                                <template #header>
+                                                    <h4 class="mb-0">
+                                                        {{ $t("Supermarkets") }}
+                                                        <b-button
+                                                            variant="link"
+                                                            class="p-0 m-0 float-right"
+                                                            @click="
                                             new_supermarket.entrymode = !new_supermarket.entrymode
                                             new_supermarket.value = undefined
                                             new_supermarket.editmode = false
@@ -218,180 +280,232 @@
                                                 return { ...x, editmode: false }
                                             })
                                         "
-                                    >
-                                        <i class="btn fas fa-plus-circle fa-lg px-0" :class="new_supermarket.entrymode ? 'text-success' : 'text-primary'" />
-                                    </b-button>
-                                </h4>
-                            </template>
-                            <b-card
-                                class="pt-5 pl-5 pr-5"
-                                border-variant="success"
-                                header-bg-variant="success"
-                                header-text-variant="white"
-                                align="center"
-                                v-if="new_supermarket.entrymode"
-                                :header="new_supermarket.value ? new_supermarket.value : $t('SupermarketName')"
-                            >
-                                <b-input-group>
-                                    <b-form-input type="text" class="form-control-append" :placeholder="$t('SupermarketName')" v-model="new_supermarket.value" />
-                                    <b-input-group-append>
-                                        <b-button class="input-group-append" variant="success" @click="addSupermarket"><i class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }} </b-button>
-                                    </b-input-group-append>
-                                </b-input-group>
-                            </b-card>
+                                                        >
+                                                            <i class="btn fas fa-plus-circle fa-lg px-0"
+                                                               :class="new_supermarket.entrymode ? 'text-success' : 'text-primary'"/>
+                                                        </b-button>
+                                                    </h4>
+                                                </template>
+                                                <b-card
+                                                    class="pt-5 pl-5 pr-5"
+                                                    border-variant="success"
+                                                    header-bg-variant="success"
+                                                    header-text-variant="white"
+                                                    align="center"
+                                                    v-if="new_supermarket.entrymode"
+                                                    :header="new_supermarket.value ? new_supermarket.value : $t('SupermarketName')"
+                                                >
+                                                    <b-input-group>
+                                                        <b-form-input type="text" class="form-control-append"
+                                                                      :placeholder="$t('SupermarketName')"
+                                                                      v-model="new_supermarket.value"/>
+                                                        <b-input-group-append>
+                                                            <b-button class="input-group-append" variant="success"
+                                                                      @click="addSupermarket">
+                                                                <i class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }}
+                                                            </b-button>
+                                                        </b-input-group-append>
+                                                    </b-input-group>
+                                                </b-card>
 
-                            <b-card-body class="m-0 p-0">
-                                <b-card class="mt-1 p-0" v-for="s in supermarkets" v-bind:key="s.id">
-                                    <b-card-header class="p-2 border-0 pt-3">
-                                        <div class="row">
-                                            <div class="col-12">
-                                                <h5 class="mt-1 mb-1">
-                                                    {{ s.name }}
-                                                    <b-button
-                                                        variant="link"
-                                                        class="p-0 m-0 float-right"
-                                                        @click="
+                                                <b-card-body class="m-0 p-0">
+                                                    <b-card class="mt-1 p-0" v-for="s in supermarkets"
+                                                            v-bind:key="s.id">
+                                                        <b-card-header class="p-2 border-0 pt-3">
+                                                            <div class="row">
+                                                                <div class="col-12">
+                                                                    <h5 class="mt-1 mb-1">
+                                                                        {{ s.name }}
+                                                                        <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-primary'" />
-                                                    </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-danger" />
-                                                    </b-button>
-                                                </h5>
-                                            </div>
+                                                                        >
+                                                                            <i class="btn fas fa-edit fa-lg px-0"
+                                                                               :class="s.editmode ? 'text-success' : 'text-primary'"/>
+                                                                        </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-danger"/>
+                                                                        </b-button>
+                                                                    </h5>
+                                                                </div>
+                                                            </div>
+                                                        </b-card-header>
+                                                        <b-card-body class="m-0 p-0">
+                                                            <generic-pill :item_list="s.category_to_supermarket"
+                                                                          label="category::name"
+                                                                          color="info"></generic-pill>
+                                                        </b-card-body>
+                                                    </b-card>
+                                                </b-card-body>
+                                            </b-card>
                                         </div>
-                                    </b-card-header>
-                                    <b-card-body class="m-0 p-0">
-                                        <generic-pill :item_list="s.category_to_supermarket" label="category::name" color="info"></generic-pill>
-                                    </b-card-body>
-                                </b-card>
-                            </b-card-body>
-                        </b-card>
-                    </div>
-                    <div class="col col-md-5">
-                        <b-card>
-                            <template #header>
-                                <h4 class="mb-0">
-                                    {{ $t("Shopping_Categories") }}
-                                    <b-button
-                                        variant="link"
-                                        class="p-0 m-0 float-right"
-                                        @click="
+                                        <div class="col col-md-5">
+                                            <b-card>
+                                                <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-primary'" />
-                                    </b-button>
-                                </h4>
-                            </template>
-                            <b-card
-                                class="m-1 p-1 no-body"
-                                border-variant="success"
-                                header-bg-variant="success"
-                                header-text-variant="white"
-                                align="center"
-                                v-if="new_category.entrymode"
-                                :header="new_category.value ? new_category.value : $t('CategoryName')"
-                            >
-                                <b-input-group>
-                                    <b-form-input type="text" class="form-control-append" :placeholder="$t('CategoryName')" v-model="new_category.value" />
-                                    <b-input-group-append>
-                                        <b-button class="input-group-append" variant="success" @click="addCategory"><i class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }} </b-button>
-                                    </b-input-group-append>
-                                </b-input-group>
-                            </b-card>
+                                                        >
+                                                            <i class="btn fas fa-plus-circle fa-lg px-0"
+                                                               :class="new_category.entrymode ? 'text-success' : 'text-primary'"/>
+                                                        </b-button>
+                                                    </h4>
+                                                </template>
+                                                <b-card
+                                                    class="m-1 p-1 no-body"
+                                                    border-variant="success"
+                                                    header-bg-variant="success"
+                                                    header-text-variant="white"
+                                                    align="center"
+                                                    v-if="new_category.entrymode"
+                                                    :header="new_category.value ? new_category.value : $t('CategoryName')"
+                                                >
+                                                    <b-input-group>
+                                                        <b-form-input type="text" class="form-control-append"
+                                                                      :placeholder="$t('CategoryName')"
+                                                                      v-model="new_category.value"/>
+                                                        <b-input-group-append>
+                                                            <b-button class="input-group-append" variant="success"
+                                                                      @click="addCategory"><i
+                                                                class="pr-2 pt-1 fas fa-save"></i> {{ $t("Create") }}
+                                                            </b-button>
+                                                        </b-input-group-append>
+                                                    </b-input-group>
+                                                </b-card>
 
-                            <b-card-sub-title v-if="new_supermarket.editmode" class="pt-0 pb-3">{{ $t("CategoryInstruction") }} </b-card-sub-title>
-                            <b-card v-if="new_supermarket.editmode && supermarketCategory.length === 0" class="m-0 p-0 font-weight-bold no-body" border-variant="success" v-bind:key="-1" />
-                            <draggable
-                                class="list-group"
-                                :list="supermarketCategory"
-                                group="category"
-                                @start="drag = true"
-                                @end="drag = false"
-                                ghost-class="ghost"
-                                @change="saveSupermarketCategoryOrder"
-                                v-bind="{ animation: 200, disabled: !new_supermarket.editmode }"
-                            >
-                                <transition-group type="transition" :name="!drag ? 'flip-list' : null">
-                                    <b-card
-                                        no-body
-                                        v-hover
-                                        class="mt-1 list-group-item p-2"
-                                        :style="new_supermarket.editmode ? 'cursor:move' : ''"
-                                        v-for="c in supermarketCategory"
-                                        v-bind:key="c.id"
-                                        :border-variant="new_supermarket.editmode ? 'success' : ''"
-                                    >
-                                        <b-card-header class="p-2 border-0">
-                                            <div class="row">
-                                                <div class="col-2" v-if="new_supermarket.editmode">
-                                                    <button type="button" class="btn btn-lg shadow-none"><i class="fas fa-arrows-alt-v"></i></button>
-                                                </div>
-                                                <div :class="new_supermarket.editmode ? 'col-10' : 'col-12'">
-                                                    <h5 class="mt-1 mb-1">
-                                                        {{ categoryName(c) }}
-                                                        <b-button variant="link" class="p-0 m-0 float-right" @click="deleteCategory(c)">
-                                                            <i class="btn fas fa-trash fa-lg px-2 text-danger" />
-                                                        </b-button>
-                                                    </h5>
-                                                </div>
-                                            </div>
-                                        </b-card-header>
-                                    </b-card>
-                                </transition-group>
-                            </draggable>
-                            <hr style="height: 2px; background-color: black" v-if="new_supermarket.editmode" />
-                            <b-card v-if="new_supermarket.editmode && notSupermarketCategory.length === 0" v-bind:key="-2" class="m-0 p-0 font-weight-bold no-body" border-variant="danger" />
-                            <draggable
-                                class="list-group"
-                                :list="notSupermarketCategory"
-                                group="category"
-                                @start="drag = true"
-                                @end="drag = false"
-                                ghost-class="ghost"
-                                v-if="new_supermarket.editmode"
-                                v-bind="{ animation: 200 }"
-                            >
-                                <transition-group type="transition" :name="!drag ? 'flip-list' : null">
-                                    <b-card no-body v-hover class="mt-1 list-group-item p-2" style="cursor: move" v-for="c in notSupermarketCategory" v-bind:key="c.id" :border-variant="'danger'">
-                                        <b-card-header class="p-2 border-0">
-                                            <div class="row">
-                                                <div class="col-2" v-if="new_supermarket.editmode">
-                                                    <button type="button" class="btn btn-lg shadow-none"><i class="fas fa-arrows-alt-v"></i></button>
-                                                </div>
-                                                <div :class="new_supermarket.editmode ? 'col-10' : 'col-12'">
-                                                    <h5 class="mt-1 mb-1">
-                                                        {{ categoryName(c) }}
-                                                        <b-button variant="link" class="p-0 m-0 float-right" @click="deleteCategory(c)">
-                                                            <i class="btn fas fa-trash fa-lg px-2 text-primary" />
-                                                        </b-button>
-                                                    </h5>
-                                                </div>
-                                            </div>
-                                        </b-card-header>
-                                    </b-card>
-                                </transition-group>
-                            </draggable>
-                        </b-card>
+                                                <b-card-sub-title v-if="new_supermarket.editmode" class="pt-0 pb-3">
+                                                    {{ $t("CategoryInstruction") }}
+                                                </b-card-sub-title>
+                                                <b-card
+                                                    v-if="new_supermarket.editmode && supermarketCategory.length === 0"
+                                                    class="m-0 p-0 font-weight-bold no-body" border-variant="success"
+                                                    v-bind:key="-1"/>
+                                                <draggable
+                                                    class="list-group"
+                                                    :list="supermarketCategory"
+                                                    group="category"
+                                                    @start="drag = true"
+                                                    @end="drag = false"
+                                                    ghost-class="ghost"
+                                                    @change="saveSupermarketCategoryOrder"
+                                                    v-bind="{ animation: 200, disabled: !new_supermarket.editmode }"
+                                                >
+                                                    <transition-group type="transition"
+                                                                      :name="!drag ? 'flip-list' : null">
+                                                        <b-card
+                                                            no-body
+                                                            v-hover
+                                                            class="mt-1 list-group-item p-2"
+                                                            :style="new_supermarket.editmode ? 'cursor:move' : ''"
+                                                            v-for="c in supermarketCategory"
+                                                            v-bind:key="c.id"
+                                                            :border-variant="new_supermarket.editmode ? 'success' : ''"
+                                                        >
+                                                            <b-card-header class="p-2 border-0">
+                                                                <div class="row">
+                                                                    <div class="col-2" v-if="new_supermarket.editmode">
+                                                                        <button type="button"
+                                                                                class="btn btn-lg shadow-none"><i
+                                                                            class="fas fa-arrows-alt-v"></i></button>
+                                                                    </div>
+                                                                    <div
+                                                                        :class="new_supermarket.editmode ? 'col-10' : 'col-12'">
+                                                                        <h5 class="mt-1 mb-1">
+                                                                            {{ categoryName(c) }}
+                                                                            <b-button variant="link"
+                                                                                      class="p-0 m-0 float-right"
+                                                                                      @click="deleteCategory(c)">
+                                                                                <i class="btn fas fa-trash fa-lg px-2 text-danger"/>
+                                                                            </b-button>
+                                                                        </h5>
+                                                                    </div>
+                                                                </div>
+                                                            </b-card-header>
+                                                        </b-card>
+                                                    </transition-group>
+                                                </draggable>
+                                                <hr style="height: 2px; background-color: black"
+                                                    v-if="new_supermarket.editmode"/>
+                                                <b-card
+                                                    v-if="new_supermarket.editmode && notSupermarketCategory.length === 0"
+                                                    v-bind:key="-2" class="m-0 p-0 font-weight-bold no-body"
+                                                    border-variant="danger"/>
+                                                <draggable
+                                                    class="list-group"
+                                                    :list="notSupermarketCategory"
+                                                    group="category"
+                                                    @start="drag = true"
+                                                    @end="drag = false"
+                                                    ghost-class="ghost"
+                                                    v-if="new_supermarket.editmode"
+                                                    v-bind="{ animation: 200 }"
+                                                >
+                                                    <transition-group type="transition"
+                                                                      :name="!drag ? 'flip-list' : null">
+                                                        <b-card no-body v-hover class="mt-1 list-group-item p-2"
+                                                                style="cursor: move"
+                                                                v-for="c in notSupermarketCategory" v-bind:key="c.id"
+                                                                :border-variant="'danger'">
+                                                            <b-card-header class="p-2 border-0">
+                                                                <div class="row">
+                                                                    <div class="col-2" v-if="new_supermarket.editmode">
+                                                                        <button type="button"
+                                                                                class="btn btn-lg shadow-none"><i
+                                                                            class="fas fa-arrows-alt-v"></i></button>
+                                                                    </div>
+                                                                    <div
+                                                                        :class="new_supermarket.editmode ? 'col-10' : 'col-12'">
+                                                                        <h5 class="mt-1 mb-1">
+                                                                            {{ categoryName(c) }}
+                                                                            <b-button variant="link"
+                                                                                      class="p-0 m-0 float-right"
+                                                                                      @click="deleteCategory(c)">
+                                                                                <i class="btn fas fa-trash fa-lg px-2 text-primary"/>
+                                                                            </b-button>
+                                                                        </h5>
+                                                                    </div>
+                                                                </div>
+                                                            </b-card-header>
+                                                        </b-card>
+                                                    </transition-group>
+                                                </draggable>
+                                            </b-card>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </b-tab>
             <!-- settings tab -->
-            <b-tab :title="$t('Settings')">
+            <b-tab>
+                <template #title>
+                    <i class="fas fa-user-cog fa-fw d-block d-md-none"></i>
+                    <span class="d-none d-md-block">{{ $t('Settings') }}</span>
+                </template>
                 <div class="row justify-content-center">
                     <div class="col-12 col-md-8">
                         <b-card class="no-body">
                             <div class="row">
                                 <div class="col col-md-6">{{ $t("mealplan_autoadd_shopping") }}</div>
                                 <div class="col col-md-6 text-right">
-                                    <input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoadd_shopping" @change="saveSettings" />
+                                    <input type="checkbox" class="form-control settings-checkbox"
+                                           v-model="settings.mealplan_autoadd_shopping" @change="saveSettings"/>
                                 </div>
                             </div>
                             <div class="row sm mb-3">
@@ -403,7 +517,8 @@
                                 <div class="row">
                                     <div class="col col-md-6">{{ $t("mealplan_autoexclude_onhand") }}</div>
                                     <div class="col col-md-6 text-right">
-                                        <input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoexclude_onhand" @change="saveSettings" />
+                                        <input type="checkbox" class="form-control settings-checkbox"
+                                               v-model="settings.mealplan_autoexclude_onhand" @change="saveSettings"/>
                                     </div>
                                 </div>
                                 <div class="row sm mb-3">
@@ -416,7 +531,8 @@
                                 <div class="row">
                                     <div class="col col-md-6">{{ $t("mealplan_autoinclude_related") }}</div>
                                     <div class="col col-md-6 text-right">
-                                        <input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoinclude_related" @change="saveSettings" />
+                                        <input type="checkbox" class="form-control settings-checkbox"
+                                               v-model="settings.mealplan_autoinclude_related" @change="saveSettings"/>
                                     </div>
                                 </div>
                                 <div class="row sm mb-3">
@@ -453,7 +569,8 @@
                             <div class="row">
                                 <div class="col col-md-6">{{ $t("shopping_auto_sync") }}</div>
                                 <div class="col col-md-6 text-right">
-                                    <input type="number" class="form-control" v-model="settings.shopping_auto_sync" @change="saveSettings" />
+                                    <input type="number" class="form-control" v-model="settings.shopping_auto_sync"
+                                           @change="saveSettings"/>
                                 </div>
                             </div>
                             <div class="row sm mb-3">
@@ -466,7 +583,8 @@
                             <div class="row">
                                 <div class="col col-md-6">{{ $t("shopping_add_onhand") }}</div>
                                 <div class="col col-md-6 text-right">
-                                    <input type="checkbox" class="form-control settings-checkbox" v-model="settings.shopping_add_onhand" @change="saveSettings" />
+                                    <input type="checkbox" class="form-control settings-checkbox"
+                                           v-model="settings.shopping_add_onhand" @change="saveSettings"/>
                                 </div>
                             </div>
                             <div class="row sm mb-3">
@@ -479,7 +597,8 @@
                             <div class="row">
                                 <div class="col col-md-6">{{ $t("shopping_recent_days") }}</div>
                                 <div class="col col-md-6 text-right">
-                                    <input type="number" class="form-control" v-model="settings.shopping_recent_days" @change="saveSettings" />
+                                    <input type="number" class="form-control" v-model="settings.shopping_recent_days"
+                                           @change="saveSettings"/>
                                 </div>
                             </div>
                             <div class="row sm mb-3">
@@ -492,7 +611,8 @@
                             <div class="row">
                                 <div class="col col-md-6">{{ $t("filter_to_supermarket") }}</div>
                                 <div class="col col-md-6 text-right">
-                                    <input type="checkbox" class="form-control settings-checkbox" v-model="settings.filter_to_supermarket" @change="saveSettings" />
+                                    <input type="checkbox" class="form-control settings-checkbox"
+                                           v-model="settings.filter_to_supermarket" @change="saveSettings"/>
                                 </div>
                             </div>
                             <div class="row sm mb-3">
@@ -505,7 +625,8 @@
                             <div class="row">
                                 <div class="col col-md-6">{{ $t("default_delay") }}</div>
                                 <div class="col col-md-6 text-right">
-                                    <input type="number" class="form-control" min="1" v-model="settings.default_delay" @change="saveSettings" />
+                                    <input type="number" class="form-control" min="1" v-model="settings.default_delay"
+                                           @change="saveSettings"/>
                                 </div>
                             </div>
                             <div class="row sm mb-3">
@@ -518,7 +639,7 @@
                             <div class="row">
                                 <div class="col col-md-6">{{ $t("csv_delim_label") }}</div>
                                 <div class="col col-md-6 text-right">
-                                    <input class="form-control" v-model="settings.csv_delim" @change="saveSettings" />
+                                    <input class="form-control" v-model="settings.csv_delim" @change="saveSettings"/>
                                 </div>
                             </div>
                             <div class="row sm mb-3">
@@ -531,7 +652,7 @@
                             <div class="row">
                                 <div class="col col-md-6">{{ $t("csv_prefix_label") }}</div>
                                 <div class="col col-md-6 text-right">
-                                    <input class="form-control" v-model="settings.csv_prefix" @change="saveSettings" />
+                                    <input class="form-control" v-model="settings.csv_prefix" @change="saveSettings"/>
                                 </div>
                             </div>
                             <div class="row sm mb-3">
@@ -544,7 +665,8 @@
                             <div class="row">
                                 <div class="col col-md-6">{{ $t("left_handed") }}</div>
                                 <div class="col col-md-6">
-                                    <input type="checkbox" class="form-control settings-checkbox" v-model="settings.left_handed" @change="saveSettings" />
+                                    <input type="checkbox" class="form-control settings-checkbox"
+                                           v-model="settings.left_handed" @change="saveSettings"/>
                                 </div>
                             </div>
                             <div class="row sm mb-3">
@@ -561,20 +683,25 @@
         </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="row fixed-bottom p-2 b-1 border-top text-center d-flex d-md-none"
+                 style="background: rgba(255, 255, 255, 0.6);width: 105%;" 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>
+                    <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" />
+                        <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>
@@ -585,23 +712,32 @@
                     <b-form-select v-model="group_by" :options="group_by_choices" size="sm"></b-form-select>
                 </b-form-group>
                 <b-form-group v-bind:label="$t('Supermarket')" label-for="popover-input-2" label-cols="6" class="mb-1">
-                    <b-form-select v-model="ui.selected_supermarket" :options="supermarkets" text-field="name" value-field="id" size="sm"></b-form-select>
+                    <b-form-select v-model="ui.selected_supermarket" :options="supermarkets" text-field="name"
+                                   value-field="id" size="sm"></b-form-select>
                 </b-form-group>
                 <!-- TODO: shade filters red when they are actually filtering content -->
-                <b-form-group v-bind:label="$t('ShowDelayed')" label-for="popover-input-3" content-cols="1" class="mb-1">
+                <b-form-group v-bind:label="$t('ShowDelayed')" label-for="popover-input-3" content-cols="1"
+                              class="mb-1">
                     <b-form-checkbox v-model="show_delay"></b-form-checkbox>
                 </b-form-group>
-                <b-form-group v-bind:label="$t('ShowUncategorizedFood')" label-for="popover-input-4" content-cols="1" class="mb-1" v-if="!ui.selected_supermarket">
+                <b-form-group v-bind:label="$t('ShowUncategorizedFood')" label-for="popover-input-4" content-cols="1"
+                              class="mb-1" v-if="!ui.selected_supermarket">
                     <b-form-checkbox v-model="show_undefined_categories"></b-form-checkbox>
                 </b-form-group>
-                <b-form-group v-bind:label="$t('SupermarketCategoriesOnly')" label-for="popover-input-5" content-cols="1" class="mb-1" v-if="ui.selected_supermarket">
+                <b-form-group v-bind:label="$t('SupermarketCategoriesOnly')" label-for="popover-input-5"
+                              content-cols="1" class="mb-1" v-if="ui.selected_supermarket">
                     <b-form-checkbox v-model="supermarket_categories_only"></b-form-checkbox>
                 </b-form-group>
             </div>
             <div class="row" style="margin-top: 1vh; min-width: 300px">
                 <div class="col-12" style="text-align: right">
-                    <b-button size="sm" variant="primary" class="mx-1" @click="resetFilters">{{ $t("Reset") }}</b-button>
-                    <b-button size="sm" variant="secondary" class="mr-3" @click="$root.$emit('bv::hide::popover')">{{ $t("Close") }} </b-button>
+                    <b-button size="sm" variant="primary" class="mx-1" @click="resetFilters">{{
+                            $t("Reset")
+                        }}
+                    </b-button>
+                    <b-button size="sm" variant="secondary" class="mr-3" @click="$root.$emit('bv::hide::popover')">
+                        {{ $t("Close") }}
+                    </b-button>
                 </div>
             </div>
         </b-popover>
@@ -610,7 +746,8 @@
                 <ContextMenuItem>
                     <b-input-group>
                         <template #prepend>
-                            <span class="dropdown-item p-2 text-decoration-none" style="user-select: none !important"><i class="fas fa-cubes"></i> {{ $t("MoveCategory") }}</span>
+                            <span class="dropdown-item p-2 text-decoration-none" style="user-select: none !important"><i
+                                class="fas fa-cubes"></i> {{ $t("MoveCategory") }}</span>
                         </template>
                         <b-form-select
                             class="form-control mt-1 mr-1"
@@ -639,7 +776,8 @@
                         delayThis(contextData)
                     "
                 >
-                    <a class="dropdown-item p-2" href="#"><i class="fas fa-hourglass"></i> {{ $t("DelayFor", { hours: delay }) }}</a>
+                    <a class="dropdown-item p-2" href="#"><i class="fas fa-hourglass"></i>
+                        {{ $t("DelayFor", {hours: delay}) }}</a>
                 </ContextMenuItem>
                 <ContextMenuItem
                     @click="
@@ -655,17 +793,20 @@
                         deleteThis(contextData)
                     "
                 >
-                    <a class="dropdown-item p-2 text-danger" href="#"><i class="fas fa-trash"></i> {{ $t("Delete") }}</a>
+                    <a class="dropdown-item p-2 text-danger" href="#"><i class="fas fa-trash"></i> {{
+                            $t("Delete")
+                        }}</a>
                 </ContextMenuItem>
             </template>
         </ContextMenu>
-        <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" />
+        <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>
 
 <script>
 import Vue from "vue"
-import { BootstrapVue } from "bootstrap-vue"
+import {BootstrapVue} from "bootstrap-vue"
 import "bootstrap-vue/dist/bootstrap-vue.css"
 import VueCookies from "vue-cookies"
 
@@ -681,8 +822,8 @@ import LookupInput from "@/components/Modals/LookupInput"
 import ShoppingModal from "@/components/Modals/ShoppingModal"
 import draggable from "vuedraggable"
 
-import { ApiMixin, getUserPreference, StandardToasts, makeToast } from "@/utils/utils"
-import { ApiApiFactory } from "@/utils/openapi/api"
+import {ApiMixin, getUserPreference, StandardToasts, makeToast} from "@/utils/utils"
+import {ApiApiFactory} from "@/utils/openapi/api"
 
 Vue.use(BootstrapVue)
 Vue.use(VueCookies)
@@ -736,8 +877,8 @@ export default {
                 shopping_add_onhand: true,
                 left_handed: false,
             },
-            new_supermarket: { entrymode: false, value: undefined, editmode: undefined },
-            new_category: { entrymode: false, value: undefined },
+            new_supermarket: {entrymode: false, value: undefined, editmode: undefined},
+            new_category: {entrymode: false, value: undefined},
             autosync_id: undefined,
             auto_sync_running: false, // track to not start a new sync before old one was finished
             auto_sync_blocked: false, // blocking auto sync while request to check item is still running
@@ -747,12 +888,13 @@ export default {
             fields: ["checked", "amount", "category", "unit", "food", "recipe", "details"],
             loading: true,
             entrymode: false,
-            new_item: { amount: 1, unit: undefined, food: undefined, ingredient: undefined },
+            new_item: {amount: 1, unit: undefined, food: undefined, ingredient: undefined},
             online: true,
             new_recipe: {
                 id: undefined,
             },
             add_recipe_servings: 1,
+            shopping_list_height: '60vh'
         }
     },
     computed: {
@@ -789,7 +931,7 @@ export default {
                 shopping_list = shopping_list.filter((x) => x?.food?.supermarket_category)
             }
 
-            var groups = { false: {}, true: {} } // force unchecked to always be first
+            var groups = {false: {}, true: {}} // force unchecked to always be first
             if (this.ui.selected_supermarket) {
                 // TODO: make nulls_first a user setting
                 groups.false[this.$t("Undefined")] = {}
@@ -829,7 +971,7 @@ export default {
         },
         csvData() {
             return this.items.map((x) => {
-                return { amount: x.amount, unit: x.unit?.name ?? "", food: x.food?.name ?? "" }
+                return {amount: x.amount, unit: x.unit?.name ?? "", food: x.food?.name ?? ""}
             })
         },
         defaultDelay() {
@@ -881,7 +1023,13 @@ export default {
             },
             deep: true,
         },
-
+        entrymode: {
+            handler() {
+                if (this.entrymode) {
+                    document.getElementById('shoppinglist').scrollTop = 0
+                }
+            }
+        },
         new_recipe: {
             handler() {
                 this.add_recipe_servings = this.new_recipe.servings
@@ -941,16 +1089,16 @@ export default {
         addItem: function () {
             if (this.ui.entry_mode_simple) {
                 if (this.new_item.ingredient !== "" && this.new_item.ingredient !== undefined) {
-                    this.genericPostAPI("api_ingredient_from_string", { text: this.new_item.ingredient }).then((result) => {
+                    this.genericPostAPI("api_ingredient_from_string", {text: this.new_item.ingredient}).then((result) => {
                         let unit = null
                         if (result.data.unit !== "") {
-                            unit = { name: result.data.unit }
+                            unit = {name: result.data.unit}
                         }
 
                         this.new_item = {
                             amount: result.data.amount,
                             unit: unit,
-                            food: { name: result.data.food },
+                            food: {name: result.data.food},
                         }
                         this.addEntry()
                     })
@@ -969,7 +1117,7 @@ export default {
                     } else {
                         console.log("no data returned")
                     }
-                    this.new_item = { amount: 1, unit: undefined, food: undefined, ingredient: undefined }
+                    this.new_item = {amount: 1, unit: undefined, food: undefined, ingredient: undefined}
                     this.clear += 1
                 })
                 .catch((err) => {
@@ -1019,7 +1167,7 @@ export default {
 
             if (Array.isArray(item)) {
                 item = item.map((x) => {
-                    return { ...x, delay_until: delay_date }
+                    return {...x, delay_until: delay_date}
                 })
                 entries = item.map((x) => x.id)
             } else {
@@ -1028,7 +1176,7 @@ export default {
             }
 
             entries.forEach((entry) => {
-                promises.push(this.saveThis({ id: entry, delay_until: delay_date }, false))
+                promises.push(this.saveThis({id: entry, delay_until: delay_date}, false))
             })
             Promise.all(promises).then(() => {
                 StandardToasts.makeStandardToast(StandardToasts.SUCCESS_UPDATE)
@@ -1074,7 +1222,7 @@ export default {
         },
         editSupermarket(s) {
             if (!s.editmode) {
-                this.new_supermarket = { entrymode: false, value: undefined, editmode: undefined }
+                this.new_supermarket = {entrymode: false, value: undefined, editmode: undefined}
                 this.supermarkets.map((x) => (x.editmode = false))
             } else {
                 this.new_supermarket.value = s
@@ -1095,7 +1243,7 @@ export default {
             let params = {}
             params.supermarket = this.ui.selected_supermarket
 
-            params.options = { query: { recent: 1 } }
+            params.options = {query: {recent: 1}}
             if (autosync) {
                 params.options.query["autosync"] = 1
             } else {
@@ -1130,7 +1278,7 @@ export default {
             })
         },
         getThis: function (id) {
-            return this.genericAPI(this.Models.SHOPPING_CATEGORY, this.Actions.FETCH, { id: id })
+            return this.genericAPI(this.Models.SHOPPING_CATEGORY, this.Actions.FETCH, {id: id})
         },
         mergeShoppingList: function (data) {
             this.items.map((x) =>
@@ -1164,7 +1312,7 @@ export default {
             this.updateFood(food, "supermarket_category").then((result) => {
                 this.items = this.items.map((x) => {
                     if (x.food.id === food.id) {
-                        return { ...x, food: { ...x.food, supermarket_category: supermarket_category } }
+                        return {...x, food: {...x.food, supermarket_category: supermarket_category}}
                     } else {
                         return x
                     }
@@ -1187,7 +1335,8 @@ export default {
                 })
                 .then((entries) => {
                     entries.forEach((x) => {
-                        api.destroyShoppingListEntry(x).then((result) => {})
+                        api.destroyShoppingListEntry(x).then((result) => {
+                        })
                     })
                 })
         },
@@ -1253,7 +1402,7 @@ export default {
                 if (update.checked) {
                     completed_at = new Date().toISOString()
                 }
-                promises.push(this.saveThis({ id: id, checked: update.checked }, false))
+                promises.push(this.saveThis({id: id, checked: update.checked}, false))
 
                 let item = this.items.filter((entry) => entry.id == id)[0]
                 Vue.set(item, "checked", update.checked)
@@ -1293,13 +1442,13 @@ export default {
         updateServings(e, plan) {
             // maybe this needs debounced?
             let api = new ApiApiFactory()
-            api.partialUpdateShoppingListRecipe(plan, { id: plan, servings: e }).then(() => {
+            api.partialUpdateShoppingListRecipe(plan, {id: plan, servings: e}).then(() => {
                 this.getShoppingList()
             })
         },
         addCategory: function () {
             let api = new ApiApiFactory()
-            api.createSupermarketCategory({ name: this.new_category.value })
+            api.createSupermarketCategory({name: this.new_category.value})
                 .then((result) => {
                     StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
                     this.shopping_categories.push(result.data)
@@ -1312,7 +1461,7 @@ export default {
         },
         addSupermarket: function () {
             let api = new ApiApiFactory()
-            api.createSupermarket({ name: this.new_supermarket.value })
+            api.createSupermarket({name: this.new_supermarket.value})
                 .then((result) => {
                     StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
                     this.supermarkets.push(result.data)
@@ -1332,7 +1481,7 @@ export default {
                 var promises = []
                 supermarket.category_to_supermarket.forEach((x, i) => {
                     x.order = i
-                    promises.push(apiClient.partialUpdateSupermarketCategoryRelation(x.id, { order: i }))
+                    promises.push(apiClient.partialUpdateSupermarketCategoryRelation(x.id, {order: i}))
                 })
                 return Promise.all(promises).then(() => {
                     return supermarket
@@ -1400,7 +1549,7 @@ export default {
             return item?.category?.name ?? item.name
         },
         updateOnlineStatus(e) {
-            const { type } = e
+            const {type} = e
             this.online = type === "online"
         },
         beforeDestroy() {
@@ -1412,18 +1561,26 @@ export default {
         },
         finishShopping() {
             this.add_recipe_servings = 1
-            this.new_recipe = { id: undefined }
+            this.new_recipe = {id: undefined}
             this.edit_recipe_list = undefined
             this.getShoppingList()
         },
         editRecipeList(e, r) {
-            this.new_recipe = { id: r.recipe_mealplan.recipe, name: r.recipe_mealplan.recipe_name, servings: r.recipe_mealplan.servings, list_recipe: r.list_recipe }
+            this.new_recipe = {
+                id: r.recipe_mealplan.recipe,
+                name: r.recipe_mealplan.recipe_name,
+                servings: r.recipe_mealplan.servings,
+                list_recipe: r.list_recipe
+            }
             this.$nextTick(function () {
                 this.$bvModal.show(`shopping_${this.new_recipe.id}`)
             })
 
             // this.$bvModal.show(`shopping_${this.new_recipe.id}`)
         },
+        handleResize: function () {
+            this.shoppinglist_height = document.body.clientHeight - 115
+        },
     },
     directives: {
         hover: {
@@ -1476,7 +1633,8 @@ export default {
 }
 
 .slide-fade-enter, .slide-fade-leave-to
-  /* .slider-fade-leave-active below version 2.1.8 */ {
+    /* .slider-fade-leave-active below version 2.1.8 */
+{
     transform: translateX(10px);
     opacity: 0;
 }
@@ -1485,30 +1643,43 @@ export default {
     font-size: 20px;
 }
 
-@media screen and (max-width: 768px) {
-    #shoppinglist {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        overflow-y: scroll;
-        overflow-x: hidden;
-        height: 60vh; /* TODO use proper fill height here to not render list underneath bottom buttons */
-        padding-right: 8px !important;
-    }
+#shoppinglist {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    height: calc(100% - 170px);
 }
-@media screen and (min-height: 700px) and (max-width: 768px) {
+
+#id_base_container {
+    padding-right: 5px;
+    padding-left: 5px;
+}
+
+@media (min-width: 768px) {
     #shoppinglist {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        overflow-y: scroll;
-        overflow-x: hidden;
-        height: 72vh;
-        padding-right: 8px !important;
+        overflow-y: auto;
+        overflow-x: auto;
+        height: auto;
+        margin: auto;
+    }
+
+    #id_base_container {
+        padding-right: 15px;
+        padding-left: 15px;
     }
 }
 
 .settings-checkbox {
     font-size: 0.3rem;
 }
+
+@media (max-width: 767.9px) {
+    .recipe-table {
+        font-size: 14px;
+    }
+}
+
+
 </style>
diff --git a/vue/src/components/MealPlanCard.vue b/vue/src/components/MealPlanCard.vue
index 2770f6423..b09373b83 100644
--- a/vue/src/components/MealPlanCard.vue
+++ b/vue/src/components/MealPlanCard.vue
@@ -127,4 +127,10 @@ export default {
 .meal-plan-card {
     background-color: #fff;
 }
+
+@media (max-width: 767.9px) {
+    .meal-plan-card {
+        font-size: 13px;
+    }
+}
 </style>
diff --git a/vue/src/components/ShoppingLineItem.vue b/vue/src/components/ShoppingLineItem.vue
index 05fee45ae..aa5e77593 100644
--- a/vue/src/components/ShoppingLineItem.vue
+++ b/vue/src/components/ShoppingLineItem.vue
@@ -1,34 +1,43 @@
 <template>
-    <div id="shopping_line_item">
-        <b-row align-h="start">
-            <b-col cols="2" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0" 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" />
-                <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>
+    <div id="shopping_line_item" class="pt-1">
+        <b-row align-h="start" v-touch:start="startHandler" v-touch:moving="moveHandler" v-touch:end="endHandler"
+               ref="shopping_line_item" class="invis-border">
+            <b-col cols="2" md="2" class="justify-content-start align-items-center d-flex d-md-none pr-0"
+                   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"/>
+                <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>
                 </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" @click.stop="$emit('open-context-menu', $event, entries)">
+            <b-col cols="1" class="align-items-center d-flex">
+                <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"
+                     @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-0 pl-1 dropdown-toggle-no-caret"
-                    >
+                        class="btn dropdown-toggle btn-link text-decoration-none text-body pr-0 pl-1 dropdown-toggle-no-caret">
                         <i class="fas fa-ellipsis-v"></i>
                     </button>
                 </div>
             </b-col>
             <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" @change="updateChecked" :key="entries[0].id" />
+                <input type="checkbox" class="form-control form-control-sm checkbox-control"
+                       :checked="formatChecked" @change="updateChecked" :key="entries[0].id"/>
             </b-col>
-            <b-col cols="8" >
+            <b-col cols="8">
                 <b-row class="d-flex h-100">
-                    <b-col cols="6" 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> {{ Object.entries(formatAmount)[0][0] }}
+                    <b-col cols="6" 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>
+                        {{ Object.entries(formatAmount)[0][0] }}
                     </b-col>
-                    <b-col cols="6" md="3" class="d-flex flex-column" v-if="Object.entries(formatAmount).length != 1">
+                    <b-col cols="6" 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;
                             {{ x[0] }}
@@ -38,20 +47,27 @@
                     <b-col cols="6" 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" 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-col cols="3" data-html2canvas-ignore="true"
+                           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">
                             <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>
+                                <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="2" class="justify-content-start align-items-center d-flex d-md-none pl-0 pr-0" 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>
+            <b-col cols="2" class="justify-content-start align-items-center d-flex d-md-none pl-0 pr-0"
+                   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>
                 </b-button>
-                <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>
         <b-row align-h="center" class="d-none d-md-flex">
@@ -83,11 +99,14 @@
                     </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" 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" />
+                    <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">
+                        <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="2" md="1" class="align-items-center d-flex">
-                        <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true" @click.stop="$emit('open-context-menu', $event, e)">
+                        <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"
+                             @click.stop="$emit('open-context-menu', $event, e)">
                             <button
                                 aria-haspopup="true"
                                 aria-expanded="false"
@@ -100,7 +119,8 @@
                         </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" @change="updateChecked" :key="entries[0].id" />
+                        <input type="checkbox" class="form-control form-control-sm checkbox-control"
+                               :checked="formatChecked" @change="updateChecked" :key="entries[0].id"/>
                     </b-col>
                     <b-col cols="7" md="9">
                         <b-row class="d-flex align-items-center h-100">
@@ -111,19 +131,23 @@
                                 {{ formatOneFood(e) }}
                             </b-col>
                             <b-col cols="12" class="d-flex d-md-none">
-                                <div class="small text-muted text-truncate" v-for="(n, i) in formatOneNote(e)" :key="i">{{ n }}</div>
+                                <div class="small text-muted text-truncate" v-for="(n, i) in formatOneNote(e)"
+                                     :key="i">{{ n }}
+                                </div>
                             </b-col>
                         </b-row>
                     </b-col>
-                    <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none" 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" />
+                    <b-col cols="3" md="2" class="justify-content-start align-items-center d-flex d-md-none"
+                           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"/>
                     </b-col>
                 </b-row>
-                <hr class="w-75" v-if="x !== entries.length - 1" />
-                <div class="pb-4" v-if="x === entries.length - 1"></div>
+                <hr class="w-75 mt-1 mb-1 mt-md-3 mb-md-3" v-if="x !== entries.length - 1"/>
+                <div class="pb-1 pb-md-4" v-if="x === entries.length - 1"></div>
             </div>
         </div>
-        <hr class="m-1" v-if="!showDetails" />
+        <hr class="m-1" v-if="!showDetails"/>
         <ContextMenu ref="recipe_card" triggers="click, hover" :title="$t('Filters')" style="max-width: 300">
             <template #menu="{ contextData }" v-if="recipe">
                 <ContextMenuItem>
@@ -132,7 +156,8 @@
                 <ContextMenuItem @click="$refs.menu.close()">
                     <b-form-group label-cols="9" content-cols="3" class="text-nowrap m-0 mr-2">
                         <template #label>
-                            <a class="dropdown-item p-2" href="#"><i class="fas fa-pizza-slice"></i> {{ $t("Servings") }}</a>
+                            <a class="dropdown-item p-2" href="#"><i class="fas fa-pizza-slice"></i>
+                                {{ $t("Servings") }}</a>
                         </template>
                         <div @click.prevent.stop>
                             <b-form-input class="mt-2" min="0" type="number" v-model="servings"></b-form-input>
@@ -141,38 +166,45 @@
                 </ContextMenuItem>
             </template>
         </ContextMenu>
+        <i class="fa fa-hourglass fa-lg" style="display: none; position: absolute" aria-hidden="true"
+           ref="delay_icon"></i>
+        <i class="fa fa-check fa-lg" style="display: none; position: absolute" aria-hidden="true" ref="check_icon"></i>
     </div>
 </template>
 
 <script>
 import Vue from "vue"
-import { BootstrapVue } from "bootstrap-vue"
+import {BootstrapVue} from "bootstrap-vue"
 import "bootstrap-vue/dist/bootstrap-vue.css"
 import ContextMenu from "@/components/ContextMenu/ContextMenu"
 import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem"
-import { ApiMixin } from "@/utils/utils"
+import {ApiMixin} from "@/utils/utils"
 import RecipeCard from "./RecipeCard.vue"
+import Vue2TouchEvents from "vue2-touch-events"
 
 Vue.use(BootstrapVue)
+Vue.use(Vue2TouchEvents)
 
 export default {
     // TODO ApiGenerator doesn't capture and share error information - would be nice to share error details when available
     // or i'm capturing it incorrectly
     name: "ShoppingLineItem",
     mixins: [ApiMixin],
-    components: { RecipeCard, ContextMenu, ContextMenuItem },
+    components: {RecipeCard, ContextMenu, ContextMenuItem},
     props: {
         entries: {
             type: Array,
         },
         settings: Object,
-        groupby: { type: String },
+        groupby: {type: String},
     },
     data() {
         return {
             showDetails: false,
             recipe: undefined,
             servings: 1,
+            dragStartX: 0,
+            distance_left: 0
         }
     },
     computed: {
@@ -249,6 +281,71 @@ export default {
                 timeStyle: "short",
             }).format(Date.parse(datetime))
         },
+        startHandler: function (event) {
+            if (event.changedTouches.length > 0) {
+                this.dragStartX = event.changedTouches[0].clientX
+            }
+        },
+        getOffset(el) {
+            let rect = el.getBoundingClientRect();
+            return {
+                left: rect.left + window.scrollX,
+                top: rect.top + window.scrollY,
+                right: rect.right - window.scrollX,
+            };
+        },
+        moveHandler: function (event) {
+            let item = this.$refs['shopping_line_item'];
+            this.distance_left = event.changedTouches[0].clientX - this.dragStartX;
+            item.style.marginLeft = this.distance_left
+            item.style.marginRight = -this.distance_left
+            item.style.backgroundColor = '#ddbf86'
+            item.style.border = "1px solid #000"
+
+            let delay_icon = this.$refs['delay_icon']
+            let check_icon = this.$refs['check_icon']
+
+            let color_factor = Math.abs(this.distance_left) / 100
+
+            if (this.distance_left > 0) {
+                item.parentElement.parentElement.style.backgroundColor = 'rgba(130,170,139,0)'.replace(/[^,]+(?=\))/, color_factor)
+                check_icon.style.display = "block"
+                check_icon.style.left = this.getOffset(item.parentElement.parentElement).left + 40
+                check_icon.style.top = this.getOffset(item.parentElement.parentElement).top - 92
+                check_icon.style.opacity = color_factor - 0.3
+            } else {
+                item.parentElement.parentElement.style.backgroundColor = 'rgba(185,135,102,0)'.replace(/[^,]+(?=\))/, color_factor)
+                delay_icon.style.display = "block"
+                console.log(item.parentElement.parentElement.clientWidth)
+                delay_icon.style.left = this.getOffset(item.parentElement.parentElement).right - 40
+                delay_icon.style.top = this.getOffset(item.parentElement.parentElement).top - 92
+                delay_icon.style.opacity = color_factor - 0.3
+            }
+        },
+        endHandler: function (event) {
+            let item = this.$refs['shopping_line_item'];
+            item.removeAttribute('style');
+            item.parentElement.parentElement.removeAttribute('style');
+
+            let delay_icon = this.$refs['delay_icon']
+            let check_icon = this.$refs['check_icon']
+
+            delay_icon.style.display = "none"
+            check_icon.style.display = "none"
+
+            if (Math.abs(this.distance_left) > window.screen.width / 6) {
+                if (this.distance_left > 0) {
+                    let checked = false;
+                    this.entries.forEach((cur) => {
+                        checked = cur.checked
+                    })
+                    let update = {entries: this.entries.map((x) => x.id), checked: !checked}
+                    this.$emit("update-checkbox", update)
+                } else {
+                    this.$emit("update-delaythis", this.entries)
+                }
+            }
+        },
         formatOneAmount: function (item) {
             return item?.amount ?? 1
         },
@@ -289,7 +386,7 @@ export default {
             return [this.$t("Added_by"), item?.created_by.username, "@", this.formatDate(item.created_at)].join(" ")
         },
         openRecipeCard: function (e, item) {
-            this.genericAPI(this.Models.RECIPE, this.Actions.FETCH, { id: item.recipe_mealplan.recipe }).then((result) => {
+            this.genericAPI(this.Models.RECIPE, this.Actions.FETCH, {id: item.recipe_mealplan.recipe}).then((result) => {
                 let recipe = result.data
                 recipe.steps = undefined
                 this.recipe = true
@@ -299,10 +396,11 @@ export default {
         updateChecked: function (e, item) {
             let update = undefined
             if (!item) {
-                update = { entries: this.entries.map((x) => x.id), checked: !this.formatChecked }
+                update = {entries: this.entries.map((x) => x.id), checked: !this.formatChecked}
             } else {
-                update = { entries: [item], checked: !item.checked }
+                update = {entries: [item], checked: !item.checked}
             }
+            console.log(update)
             this.$emit("update-checkbox", update)
         },
     },
@@ -351,4 +449,8 @@ export default {
         padding-right: 0 !important;
     }
 }
+
+.invis-border {
+    border: 1px solid transparent;
+}
 </style>