cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix bottom navigation bar

Browse Source
This commit is contained in:
Jan-Niklas Weghorn
2023-11-10 14:09:24 +01:00
parent 243cac0389
commit 9b367e5d08
7 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
cookbook/static/themes/tandoor_dark.min.css vendored
View File

@ -10560,3 +10560,11 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
.b-sidebar-body {
background-color: #303030 !important;
}
.bottom-nav-link {
color: #898989 !important;
}
.bottom-nav-link-active {
color: var(--primary) !important;
}

2
vue/src/apps/CookbookView/CookbookView.vue
View File

@ -56,7 +56,7 @@
</div>
<bottom-navigation-bar>
<bottom-navigation-bar active-view="view_books">
<template #custom_create_functions>
<div class="dropdown-divider" ></div>
<h6 class="dropdown-header">{{ $t('Books')}}</h6>

2
vue/src/apps/MealPlanView/MealPlanView.vue
View File

@ -230,7 +230,7 @@
:current_period="current_period"
></auto-meal-plan-modal>
<bottom-navigation-bar :create_links="[{label:$t('Export_To_ICal'), url: iCalUrl, icon:'fas fa-download'}]">
<bottom-navigation-bar active-view="view_plan" :create_links="[{label:$t('Export_To_ICal'), url: iCalUrl, icon:'fas fa-download'}]">
<template #custom_create_functions>
<h6 class="dropdown-header">{{ $t('Meal_Plan') }}</h6>
<a class="dropdown-item" @click="createEntryClick(new Date())"><i

2
vue/src/apps/RecipeSearchView/RecipeSearchView.vue
View File

@ -846,7 +846,7 @@
<meal-plan-edit-modal :entry="mealplan_entry_edit" :create_date="mealplan_default_date"></meal-plan-edit-modal>
<bottom-navigation-bar></bottom-navigation-bar>
<bottom-navigation-bar active-view="view_search"></bottom-navigation-bar>
</div>
</div>
</div>

2
vue/src/apps/RecipeView/RecipeView.vue
View File

@ -2,7 +2,7 @@
<div id="app" v-if="recipe_id !== undefined">
<recipe-view-component :recipe_id="recipe_id"></recipe-view-component>
<bottom-navigation-bar></bottom-navigation-bar>
<bottom-navigation-bar active-view="view_search"></bottom-navigation-bar>
</div>
</template>

2
vue/src/apps/ShoppingListView/ShoppingListView.vue
View File

@ -566,7 +566,7 @@
<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 active-view="view_shopping">
<template #custom_create_functions>
<div class="dropdown-divider"></div>

17
vue/src/components/BottomNavigationBar.vue
View File

@ -1,17 +1,17 @@
<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" style="background: white">
<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">
<div class="d-flex flex-row justify-content-around">
<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')">
<a class="nav-link bottom-nav-link p-0" v-bind:class="{'bottom-nav-link-active': activeView === 'view_search' }" v-bind:href="resolveDjangoUrl('view_search')">
<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')">
<a class="nav-link bottom-nav-link p-0" v-bind:class="{'bottom-nav-link-active': activeView === 'view_plan' }" v-bind:href="resolveDjangoUrl('view_plan')">
<i class="fas fa-calendar-alt" style="font-size: 1.5em"></i><br/><small>{{ $t('Meal_Plan') }}</small></a>
</slot>
@ -20,7 +20,7 @@
<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>
aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus-circle fa-2x bottom-nav-link bottom-nav-link-active"></i>
</a>
<div class="dropdown-menu center-dropup" aria-labelledby="navbarDropdownMenuLink">
@ -46,14 +46,14 @@
</div>
<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')">
<a class="nav-link bottom-nav-link p-0" v-bind:class="{'bottom-nav-link-active': activeView === 'view_shopping' }" v-bind:href="resolveDjangoUrl('view_shopping')">
<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')">
<a class="nav-link bottom-nav-link p-0" v-bind:class="{'bottom-nav-link-active': activeView === 'view_books' }" v-bind:href="resolveDjangoUrl('view_books')">
<i class="fas fa-book-open" style="font-size: 1.5em"></i><br/><small>{{ $t('Books') }}</small></a> <!-- TODO localize -->
</slot>
@ -80,6 +80,7 @@ export default {
show_button_3: {type: Boolean, default: true},
show_button_4: {type: Boolean, default: true},
show_button_create: {type: Boolean, default: true},
activeView: {type: String, default: ""}
}
}
</script>
@ -90,6 +91,10 @@ export default {
color: #666666
}
.bottom-nav-link-active {
color: var(--primary);
}
.center-dropup {
right: auto;
left: 50%;