From 8d7b4f614cc61b11d96391a551f951bd6d2673bb Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Fri, 22 Dec 2023 09:25:30 +0100
Subject: [PATCH] improved mobile shopping entry adding layout

---
 .../ShoppingListView/ShoppingListView.vue     | 29 +++++++++++++------
 vue/src/components/BottomNavigationBar.vue    |  6 ++++
 vue/yarn.lock                                 | 24 +--------------
 3 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index 309a8276..66867227 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -28,7 +28,7 @@
             </div>
         </div>
 
-        <b-tabs content-class="mt-2" v-model="current_tab" class="mt-md-1" style="margin-top: 22px">
+        <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>
@@ -37,12 +37,12 @@
                     <span
                         class="d-none d-md-inline-block">{{ $t('Shopping_list') + ` (${items.filter(x => x.checked === false).length})` }}</span>
                 </template>
-                <div class="container p-0 p-md-3" id="shoppinglist">
-                    <div class="row">
+                <div class="container p-0 p-md-3 pb-5" id="shoppinglist">
+                    <div class="row pb-5">
                         <div class="col col-md-12 p-0 p-lg-3">
                             <div role="tablist">
                                 <!-- add to shopping form -->
-                                <div class="container">
+                                <div class="container d-lg-block d-print-none d-none">
                                     <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"
@@ -567,14 +567,25 @@
                         :modal_id="new_recipe.id" @finish="finishShopping" :list_recipe="new_recipe.list_recipe"/>
 
         <bottom-navigation-bar active-view="view_shopping">
+            <template #custom_nav_content>
+                <div class="d-flex flex-row justify-content-around mb-3">
+
+                    <b-input-group>
+                        <b-form-input v-model="new_item.ingredient" :placeholder="$t('Food')"></b-form-input>
+                        <b-input-group-append>
+                            <b-button @click="addItem" variant="success">
+                                <i class="fas fa-cart-plus "/>
+                            </b-button>
+                        </b-input-group-append>
+                    </b-input-group>
+
+                </div>
+            </template>
+
             <template #custom_create_functions>
 
                 <div class="dropdown-divider"></div>
-                <h6 class="dropdown-header">{{ $t('Shopping_list')}}</h6>
-
-                <a class="dropdown-item" @click="entrymode = !entrymode; " ><i class="fas fa-cart-plus"></i>
-                    {{ $t("New_Entry") }}
-                </a>
+                <h6 class="dropdown-header">{{ $t('Shopping_list') }}</h6>
 
                 <DownloadPDF dom="#shoppinglist" name="shopping.pdf" :label="$t('download_pdf')"
                              icon="far fa-file-pdf fa-fw"/>
diff --git a/vue/src/components/BottomNavigationBar.vue b/vue/src/components/BottomNavigationBar.vue
index 01fae4fd..3801d9bd 100644
--- a/vue/src/components/BottomNavigationBar.vue
+++ b/vue/src/components/BottomNavigationBar.vue
@@ -1,6 +1,12 @@
 <template>
     <!-- bottom button nav -->
     <div class="fixed-bottom p-1 pt-2 pl-2 pr-2 border-top text-center d-lg-none d-print-none bottom-action-bar bg-white">
+
+        <slot name="custom_nav_content">
+
+        </slot>
+
+
         <div class="d-flex flex-row justify-content-around">
             <div class="flex-column" v-if="show_button_1">
                 <slot name="button_1">
diff --git a/vue/yarn.lock b/vue/yarn.lock
index 98f41081..fe8f0149 100644
--- a/vue/yarn.lock
+++ b/vue/yarn.lock
@@ -1258,7 +1258,7 @@
     "@codemirror/view" "^6.17.0"
     "@lezer/common" "^1.0.0"
 
-"@codemirror/commands@^6.0.0", "@codemirror/commands@^6.3.2":
+"@codemirror/commands@^6.3.2":
   version "6.3.2"
   resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.3.2.tgz#9fa47ccdacbea52fcddc6845089dfbf5be03f126"
   integrity sha512-tjoi4MCWDNxgIpoLZ7+tezdS9OEB6pkiDKhfKx9ReJ/XBcs2G2RXIu+/FxXBlWsPTsz6C9q/r4gjzrsxpcnqCQ==
@@ -1341,15 +1341,6 @@
     "@codemirror/view" "^6.0.0"
     crelt "^1.0.5"
 
-"@codemirror/search@^6.0.0":
-  version "6.5.5"
-  resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-6.5.5.tgz#cf97e201da364da2285c2a250167af25bbd2a4a2"
-  integrity sha512-PIEN3Ke1buPod2EHbJsoQwlbpkz30qGZKcnmH1eihq9+bPQx8gelauUwLYaY4vBOuBAuEhmpDLii4rj/uO0yMA==
-  dependencies:
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-    crelt "^1.0.5"
-
 "@codemirror/state@^6.0.0", "@codemirror/state@^6.1.4", "@codemirror/state@^6.2.0", "@codemirror/state@^6.3.3":
   version "6.3.3"
   resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.3.3.tgz#6a647c2fa62b68604187152de497e91aabf43f82"
@@ -4358,19 +4349,6 @@ coa@2.0.2:
     chalk "^2.4.1"
     q "^1.1.2"
 
-codemirror@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-6.0.1.tgz#62b91142d45904547ee3e0e0e4c1a79158035a29"
-  integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==
-  dependencies:
-    "@codemirror/autocomplete" "^6.0.0"
-    "@codemirror/commands" "^6.0.0"
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/lint" "^6.0.0"
-    "@codemirror/search" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"