properly integrated bottom nav

vue/src/apps/CookbookView/CookbookView.vue

@@ -18,7 +18,8 @@
                 </div>
             </div>
         </div>
-        <div class="mb-3" v-for="book in filteredBooks" :key="book.id">
+        <div style="padding-bottom: 55px">
+            <div class="mb-3" v-for="book in filteredBooks" :key="book.id">
             <div class="row">
                 <div class="col-md-12">
                     <b-card class="d-flex flex-column" v-hover v-on:click="openBook(book.id)">
@@ -54,8 +55,17 @@
                 ></cookbook-slider>
             </transition>
 
-            <bottom-navigation-bar></bottom-navigation-bar>
         </div>
+        </div>
+
+
+        <bottom-navigation-bar>
+            <template #custom_create_functions>
+                <a class="dropdown-item" @click="createNew()"><i
+                                class="fa fa-book"></i> {{$t("Create")}}</a>
+                 <div class="dropdown-divider" ></div>
+            </template>
+        </bottom-navigation-bar>
     </div>
 </template>
 

vue/src/apps/ShoppingListView/ShoppingListView.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="app" style="margin-bottom: 4vh">
+    <div id="app">
         <b-alert :show="!online" dismissible class="small float-up" variant="warning">{{ $t("OfflineAlert") }}</b-alert>
 
         <div class="row float-top w-100">
@@ -470,30 +470,6 @@
             </b-tab>
         </b-tabs>
 
-        <transition name="slided-fade">
-            <div class="row fixed-bottom p-2 b-1 border-top text-center d-flex d-md-none"
-                 style="background: rgba(255, 255, 255, 0.6);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>
-                        {{ $t("New_Entry") }}
-                    </a>
-                </div>
-                <div class="col-6">
-                    <b-dropdown id="dropdown-dropup" block dropup variant="primary" class="shadow-none">
-                        <template #button-content><i class="fas fa-download"></i> {{ $t("Export") }}</template>
-                        <DownloadPDF dom="#shoppinglist" name="shopping.pdf" :label="$t('download_pdf')"
-                                     icon="far fa-file-pdf"/>
-                        <DownloadCSV :items="csvData" :delim="settings.csv_delim" name="shopping.csv"
-                                     :label="$t('download_csv')" icon="fas fa-file-csv"/>
-                        <CopyToClipboard :items="csvData" :settings="settings" :label="$t('copy_to_clipboard')"
-                                         icon="fas fa-clipboard-list"/>
-                        <CopyToClipboard :items="csvData" :settings="settings" format="table"
-                                         :label="$t('copy_markdown_table')" icon="fab fa-markdown"/>
-                    </b-dropdown>
-                </div>
-            </div>
-        </transition>
         <b-popover target="id_filters_button" triggers="click" placement="bottomleft" :title="$t('Filters')">
             <div>
                 <b-form-group v-bind:label="$t('GroupBy')" label-for="popover-input-1" label-cols="6" class="mb-1">
@@ -590,7 +566,26 @@
         <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"/>
 
-        <bottom-navigation-bar></bottom-navigation-bar>
+        <bottom-navigation-bar>
+            <template #custom_create_functions>
+
+                <a class="dropdown-item" @click="entrymode = !entrymode; "
+                ><i class="fas fa-cart-plus"></i>
+                    {{ $t("New_Entry") }}
+                </a>
+
+                <DownloadPDF dom="#shoppinglist" name="shopping.pdf" :label="$t('download_pdf')"
+                             icon="far fa-file-pdf fa-fw"/>
+                <DownloadCSV :items="csvData" :delim="settings.csv_delim" name="shopping.csv"
+                             :label="$t('download_csv')" icon="fas fa-file-csv fa-fw"/>
+                <CopyToClipboard :items="csvData" :settings="settings" :label="$t('copy_to_clipboard')"
+                                 icon="fas fa-clipboard-list fa-fw"/>
+                <CopyToClipboard :items="csvData" :settings="settings" format="table"
+                                 :label="$t('copy_markdown_table')" icon="fab fa-markdown fa-fw"/>
+
+                <div class="dropdown-divider"></div>
+            </template>
+        </bottom-navigation-bar>
     </div>
 </template>
 
@@ -926,7 +921,7 @@ export default {
          * get the number of entries left in the sync queue for entry check events
          * @returns {Promise<Number>} promise resolving to the number of entries left
          */
-        getSyncQueueLength: function (){
+        getSyncQueueLength: function () {
             const wb = new Workbox('/service-worker.js');
             wb.register();
             return wb.messageSW({type: 'BGSYNC_COUNT_QUEUE'}).then((r) => {
@@ -1071,26 +1066,26 @@ export default {
                 this.loading = true
             }
             this.genericAPI(this.Models.SHOPPING_LIST, this.Actions.LIST, params).then((results) => {
-                    if (!autosync) {
+                if (!autosync) {
-                        if (results.data?.length) {
+                    if (results.data?.length) {
-                            this.items = results.data
+                        this.items = results.data
-                        } else {
-                            console.log("no data returned")
-                        }
-                        this.loading = false
                     } else {
-                        if (!this.auto_sync_blocked) {
+                        console.log("no data returned")
-                            this.getSyncQueueLength().then((r) => {
-                                if (r === 0){
-                                    this.mergeShoppingList(results.data)
-                                } else {
-                                    this.auto_sync_running = false
-                                    this.replaySyncQueue()
-                                }
-                            })
-                        }
                     }
-                })
+                    this.loading = false
+                } else {
+                    if (!this.auto_sync_blocked) {
+                        this.getSyncQueueLength().then((r) => {
+                            if (r === 0) {
+                                this.mergeShoppingList(results.data)
+                            } else {
+                                this.auto_sync_running = false
+                                this.replaySyncQueue()
+                            }
+                        })
+                    }
+                }
+            })
                 .catch((err) => {
                     if (!autosync) {
                         StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)

vue/src/components/BottomNavigationBar.vue

@@ -5,14 +5,14 @@
             <div class="flex-column" v-if="show_button_1">
                 <slot name="button_1">
                     <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_search')">
-                        <i class="fas fa-fw fa-book " style="font-size: 1.5em"></i><br/><small>Recipes</small></a> <!-- TODO localize -->
+                        <i class="fas fa-fw fa-book " style="font-size: 1.5em"></i><br/><small>{{ $t('Recipes') }}</small></a> <!-- TODO localize -->
                 </slot>
 
             </div>
             <div class="flex-column" v-if="show_button_2">
                 <slot name="button_2">
                     <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_plan')">
-                        <i class="fas fa-calendar-alt" style="font-size: 1.5em"></i><br/><small>Plans</small></a> <!-- TODO localize -->
+                        <i class="fas fa-calendar-alt" style="font-size: 1.5em"></i><br/><small>{{ $t('Meal_Plan') }}</small></a>
                 </slot>
 
             </div>
@@ -28,14 +28,14 @@
                             </slot>
 
                             <a class="dropdown-item" v-bind:href="cl.url" v-for="cl in create_links" v-bind:key="cl.label">
-                                <i :class="cl.icon"></i> {{ cl.label }}
+                                <i :class="cl.icon + ' fa-fw'"></i> {{ cl.label }}
                             </a>
                             <div class="dropdown-divider" v-if="create_links.length > 0"></div>
 
                             <a class="dropdown-item" v-bind:href="resolveDjangoUrl('new_recipe')"><i
-                                class="fas fa-plus"></i> Create</a>  <!-- TODO localize -->
+                                class="fas fa-fw fa-plus"></i> {{ $t('Create Recipe') }}</a>
                             <a class="dropdown-item" v-bind:href="resolveDjangoUrl('data_import_url')"><i
-                                class="fas fa-file-import"></i> Import</a>  <!-- TODO localize -->
+                                class="fas fa-fw fa-file-import"></i> {{ $t('Import Recipe') }}</a>
                         </div>
                     </div>
                 </slot>
@@ -44,14 +44,14 @@
             <div class="flex-column" v-if="show_button_3">
                 <slot name="button_3">
                     <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_shopping')">
-                        <i class="fas fa-shopping-cart" style="font-size: 1.5em"></i><br/><small>Shopping</small></a> <!-- TODO localize -->
+                        <i class="fas fa-shopping-cart" style="font-size: 1.5em"></i><br/><small>{{ $t('Shopping_list') }}</small></a>
                 </slot>
             </div>
             <div class="flex-column">
 
                 <slot name="button_4" v-if="show_button_4">
                     <a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('view_books')">
-                        <i class="fas fa-book-open" style="font-size: 1.5em"></i><br/><small>Books</small></a> <!-- TODO localize -->
+                        <i class="fas fa-book-open" style="font-size: 1.5em"></i><br/><small>{{ $t('Books') }}</small></a> <!-- TODO localize -->
                 </slot>
 
             </div>

vue/src/locales/en.json

@@ -476,5 +476,7 @@
     "Use_Plural_Unit_Simple": "Use plural form for unit dynamically",
     "Use_Plural_Food_Always": "Use plural form for food always",
     "Use_Plural_Food_Simple": "Use plural form for food dynamically",
-    "plural_usage_info": "Use the plural form for units and food inside this space."
+    "plural_usage_info": "Use the plural form for units and food inside this space.",
+	"Create Recipe": "Create Recipe",
+    "Import Recipe": "Import Recipe"
 }