properly integrated bottom nav

This commit is contained in:
vabene1111
2023-02-19 13:54:16 +01:00
parent 59d1c1dcdc
commit dff9f91d4c
4 changed files with 62 additions and 55 deletions

View File

@ -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>

View File

@ -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 (results.data?.length) {
this.items = results.data
} else {
console.log("no data returned")
}
this.loading = false
if (!autosync) {
if (results.data?.length) {
this.items = results.data
} 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()
}
})
}
console.log("no data returned")
}
})
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)

View File

@ -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>

View File

@ -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"
}