improved bottom nav with slots and more
This commit is contained in:
vabene1111
parent
2cff936b5b
commit
59d1c1dcdc
@ -208,7 +208,7 @@
|
||||
></meal-plan-edit-modal>
|
||||
|
||||
<transition name="slide-fade">
|
||||
<div class="row fixed-bottom p-2 b-1 border-top text-center" style="background: rgba(255, 255, 255, 0.6)"
|
||||
<div class="row fixed-bottom p-2 b-1 border-top text-center d-none d-lg-block" style="background: rgba(255, 255, 255, 0.6)"
|
||||
v-if="current_tab === 0">
|
||||
<div class="col-md-3 col-6 mb-1 mb-md-0">
|
||||
<button class="btn btn-block btn-success shadow-none" @click="createEntryClick(new Date())"><i
|
||||
@ -221,12 +221,12 @@
|
||||
{{ $t("Export_To_ICal") }}
|
||||
</a>
|
||||
</div>
|
||||
<!-- <div class="col-md-3 col-6 mb-1 mb-md-0">-->
|
||||
<!-- <button class="btn btn-block btn-primary shadow-none disabled" v-b-tooltip.focus.top-->
|
||||
<!-- :title="$t('Coming_Soon')">-->
|
||||
<!-- {{ $t("Auto_Planner") }}-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="col-md-3 col-6 mb-1 mb-md-0">-->
|
||||
<!-- <button class="btn btn-block btn-primary shadow-none disabled" v-b-tooltip.focus.top-->
|
||||
<!-- :title="$t('Coming_Soon')">-->
|
||||
<!-- {{ $t("Auto_Planner") }}-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
<div class="col-12 d-flex justify-content-center mt-2 d-block d-md-none">
|
||||
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
|
||||
<b-button-group class="mx-1">
|
||||
@ -249,7 +249,12 @@
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<bottom-navigation-bar></bottom-navigation-bar>
|
||||
<bottom-navigation-bar :create_links="[{label:$t('Export_To_ICal'), url: iCalUrl, icon:'fas fa-download'}]">
|
||||
<template #custom_create_functions>
|
||||
<a class="dropdown-item" @click="createEntryClick(new Date())"><i
|
||||
class="fas fa-calendar-plus"></i> {{$t("Create")}}</a>
|
||||
</template>
|
||||
</bottom-navigation-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -957,7 +957,9 @@
|
||||
:create_date="mealplan_default_date"
|
||||
></meal-plan-edit-modal>
|
||||
|
||||
<bottom-navigation-bar></bottom-navigation-bar>
|
||||
<bottom-navigation-bar>
|
||||
|
||||
</bottom-navigation-bar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,20 +2,58 @@
|
||||
<!-- bottom button nav -->
|
||||
<div class="fixed-bottom p-1 pt-2 border-top text-center d-lg-none" style="background: white">
|
||||
<div class="d-flex flex-row justify-content-around">
|
||||
<div class="flex-column"><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>
|
||||
<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 -->
|
||||
</slot>
|
||||
|
||||
</div>
|
||||
<div class="flex-column"><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>
|
||||
<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 -->
|
||||
</slot>
|
||||
|
||||
</div>
|
||||
<div class="flex-column"><a class="nav-link bottom-nav-link p-0" v-bind:href="resolveDjangoUrl('new_recipe')">
|
||||
<i class="fas fa-plus-circle fa-2x"></i><br/></a>
|
||||
<div class="flex-column" v-if="show_button_create">
|
||||
<slot name="button_create">
|
||||
<div class="dropup">
|
||||
<a class="nav-link bottom-nav-link p-0" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus-circle fa-2x bottom-nav-link"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu center-dropup" aria-labelledby="navbarDropdownMenuLink">
|
||||
<slot name="custom_create_functions">
|
||||
|
||||
</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 }}
|
||||
</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 -->
|
||||
<a class="dropdown-item" v-bind:href="resolveDjangoUrl('data_import_url')"><i
|
||||
class="fas fa-file-import"></i> Import</a> <!-- TODO localize -->
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
|
||||
</div>
|
||||
<div class="flex-column"><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>
|
||||
<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 -->
|
||||
</slot>
|
||||
</div>
|
||||
<div class="flex-column"><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>
|
||||
<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 -->
|
||||
</slot>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -27,7 +65,19 @@ import {ResolveUrlMixin} from "@/utils/utils";
|
||||
|
||||
export default {
|
||||
name: "BottomNavigationBar",
|
||||
mixins: [ResolveUrlMixin]
|
||||
mixins: [ResolveUrlMixin],
|
||||
props: {
|
||||
create_links: {
|
||||
type: Array, default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
show_button_1: {type: Boolean, default: true},
|
||||
show_button_2: {type: Boolean, default: true},
|
||||
show_button_3: {type: Boolean, default: true},
|
||||
show_button_4: {type: Boolean, default: true},
|
||||
show_button_create: {type: Boolean, default: true},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -36,4 +86,12 @@ export default {
|
||||
.bottom-nav-link {
|
||||
color: #666666
|
||||
}
|
||||
|
||||
.center-dropup {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
-o-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user