recipe switcher and navbar fixes
also added left_hand to global preferences
This commit is contained in:
Kaibu
parent
d1065c8ac4
commit
45a86a22e3
@ -49,7 +49,7 @@ class UserPreferenceForm(forms.ModelForm):
|
||||
fields = (
|
||||
'default_unit', 'use_fractions', 'use_kj', 'theme', 'nav_color',
|
||||
'sticky_navbar', 'default_page', 'show_recent', 'search_style',
|
||||
'plan_share', 'ingredient_decimals', 'comments',
|
||||
'plan_share', 'ingredient_decimals', 'comments', 'left_handed',
|
||||
)
|
||||
|
||||
labels = {
|
||||
@ -65,7 +65,8 @@ class UserPreferenceForm(forms.ModelForm):
|
||||
'plan_share': _('Plan sharing'),
|
||||
'ingredient_decimals': _('Ingredient decimal places'),
|
||||
'shopping_auto_sync': _('Shopping list auto sync period'),
|
||||
'comments': _('Comments')
|
||||
'comments': _('Comments'),
|
||||
'left_handed': _('Left-handed mode')
|
||||
}
|
||||
|
||||
help_texts = {
|
||||
@ -89,6 +90,7 @@ class UserPreferenceForm(forms.ModelForm):
|
||||
'sticky_navbar': _('Makes the navbar stick to the top of the page.'), # noqa: E501
|
||||
'mealplan_autoadd_shopping': _('Automatically add meal plan ingredients to shopping list.'),
|
||||
'mealplan_autoexclude_onhand': _('Exclude ingredients that are on hand.'),
|
||||
'left_handed': _('Will optimize the UI for use with your left hand.')
|
||||
}
|
||||
|
||||
widgets = {
|
||||
|
||||
8
cookbook/static/css/app.min.css
vendored
8
cookbook/static/css/app.min.css
vendored
@ -2,6 +2,14 @@
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.menu-dropdown-text {
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.spinner-tandoor {
|
||||
animation: rotation 3s infinite linear;
|
||||
content: url("../assets/spinner.svg");
|
||||
|
||||
@ -56,23 +56,46 @@
|
||||
{% block extra_head %} <!-- block for templates to put stuff into header -->
|
||||
{% endblock %}
|
||||
|
||||
<style>
|
||||
{% if request.user.userpreference.left_handed %}
|
||||
@media screen and (max-width: 600px) {
|
||||
#switcher .btn-circle {
|
||||
left: 80px !important;
|
||||
}
|
||||
}
|
||||
{% endif %}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-{% nav_color request %} bg-header" id="id_main_nav"
|
||||
style="{% sticky_nav request %}">
|
||||
|
||||
{% if not request.user.is_authenticated or request.user.userpreference.theme == request.user.userpreference.TANDOOR %}
|
||||
<a class="navbar-brand p-0 me-2 justify-content-center" href="{% base_path request 'base' %}" aria-label="Tandoor">
|
||||
<img class="brand-icon" src="{% static 'assets/brand_logo.svg' %}" alt="Logo">
|
||||
</a>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-{% nav_color request %} bg-header"
|
||||
id="id_main_nav"
|
||||
style="{% sticky_nav request %}">
|
||||
|
||||
{% if not request.user.userpreference.left_handed %}
|
||||
{% if not request.user.is_authenticated or request.user.userpreference.theme == request.user.userpreference.TANDOOR %}
|
||||
<a class="navbar-brand p-0 me-2 justify-content-center" href="{% base_path request 'base' %}"
|
||||
aria-label="Tandoor">
|
||||
<img class="brand-icon" src="{% static 'assets/brand_logo.svg' %}" alt="Logo">
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
|
||||
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
{% if request.user.userpreference.left_handed %}
|
||||
{% if not request.user.is_authenticated or request.user.userpreference.theme == request.user.userpreference.TANDOOR %}
|
||||
<a class="navbar-brand p-0 me-2 justify-content-center" href="{% base_path request 'base' %}"
|
||||
aria-label="Tandoor">
|
||||
<img class="brand-icon" src="{% static 'assets/brand_logo.svg' %}" alt="Logo">
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarText">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item {% if request.resolver_match.url_name in 'view_search' %}active{% endif %}">
|
||||
@ -104,141 +127,140 @@
|
||||
<i class="fas fa-toolbox fa-lg"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-center dropdown-menu-center-large">
|
||||
<div class="row m-0">
|
||||
<div class="row m-0 mt-2 mt-md-0">
|
||||
<div class="col-4">
|
||||
<a href="{% url 'list_keyword' %}" class="p-1">
|
||||
<a href="{% url 'list_keyword' %}" class="p-0 p-md-1">
|
||||
<div class="card p-0 no-gutters border-0">
|
||||
<div class="card-body text-center p-0 no-gutters">
|
||||
<i class="fas fa-tags fa-2x"></i>
|
||||
</div>
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted">
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted menu-dropdown-text">
|
||||
{% trans 'Keyword' %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="{% url 'list_food' %}" class="p-1">
|
||||
<a href="{% url 'list_food' %}" class="p-0 p-md-1">
|
||||
<div class="card p-0 no-gutters border-0">
|
||||
<div class="card-body text-center p-0 no-gutters">
|
||||
<i class="fas fa-leaf fa-2x"></i>
|
||||
</div>
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted">
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted menu-dropdown-text">
|
||||
{% trans 'Foods' %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="{% url 'list_unit' %}" class="p-1">
|
||||
<a href="{% url 'list_unit' %}" class="p-0 p-md-1">
|
||||
<div class="card p-0 no-gutters border-0">
|
||||
<div class="card-body text-center p-0 no-gutters">
|
||||
<i class="fas fa-balance-scale fa-2x"></i>
|
||||
</div>
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted">
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted menu-dropdown-text">
|
||||
{% trans 'Units' %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-0">
|
||||
<div class="row m-0 mt-2 mt-md-0">
|
||||
<div class="col-4">
|
||||
<a href="{% url 'list_supermarket' %}" class="p-1">
|
||||
<a href="{% url 'list_supermarket' %}" class="p-0 p-md-1">
|
||||
<div class="card p-0 no-gutters border-0">
|
||||
<div class="card-body text-center p-0 no-gutters">
|
||||
<i class="fas fa-store-alt fa-2x"></i>
|
||||
</div>
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted">
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted menu-dropdown-text">
|
||||
{% trans 'Supermarket' %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="{% url 'list_supermarket_category' %}" class="p-1">
|
||||
<a href="{% url 'list_supermarket_category' %}" class="p-0 p-md-1">
|
||||
<div class="card p-0 no-gutters border-0">
|
||||
<div class="card-body text-center p-0 no-gutters">
|
||||
<i class="fas fa-cubes fa-2x"></i>
|
||||
</div>
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted">
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted menu-dropdown-text">
|
||||
{% trans 'Supermarket Category' %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="{% url 'list_automation' %}" class="p-1">
|
||||
<a href="{% url 'list_automation' %}" class="p-0 p-md-1">
|
||||
<div class="card p-0 no-gutters border-0">
|
||||
<div class="card-body text-center p-0 no-gutters">
|
||||
<i class="fas fa-robot fa-2x"></i>
|
||||
</div>
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted">
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted menu-dropdown-text">
|
||||
{% trans 'Automations' %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-0">
|
||||
<div class="row m-0 mt-2 mt-md-0">
|
||||
<div class="col-4">
|
||||
<a href="{% url 'list_user_file' %}" class="p-1">
|
||||
<a href="{% url 'list_user_file' %}" class="p-0 p-md-1">
|
||||
<div class="card p-0 no-gutters border-0">
|
||||
<div class="card-body text-center p-0 no-gutters">
|
||||
<i class="fas fa-file fa-2x"></i>
|
||||
</div>
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted">
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted menu-dropdown-text">
|
||||
{% trans 'Files' %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="{% url 'data_batch_edit' %}" class="p-1">
|
||||
<a href="{% url 'data_batch_edit' %}" class="p-0 p-md-1">
|
||||
<div class="card p-0 no-gutters border-0">
|
||||
<div class="card-body text-center p-0 no-gutters">
|
||||
<i class="fas fa-edit fa-2x"></i>
|
||||
</div>
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted">
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted menu-dropdown-text">
|
||||
{% trans 'Batch Edit' %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="{% url 'view_history' %}" class="p-1">
|
||||
<a href="{% url 'view_history' %}" class="p-0 p-md-1">
|
||||
<div class="card p-0 no-gutters border-0">
|
||||
<div class="card-body text-center p-0 no-gutters">
|
||||
<i class="fas fa-history fa-2x"></i>
|
||||
</div>
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted">
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted menu-dropdown-text">
|
||||
{% trans 'History' %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row m-0">
|
||||
<div class="row m-0 mt-2 mt-md-0">
|
||||
<div class="col-4">
|
||||
<a href="{% url 'view_ingredient_editor' %}" class="p-1">
|
||||
<a href="{% url 'view_ingredient_editor' %}" class="p-0 p-md-1">
|
||||
<div class="card p-0 no-gutters border-0">
|
||||
<div class="card-body text-center p-0 no-gutters">
|
||||
<i class="fas fa-th-list fa-2x"></i>
|
||||
</div>
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted">
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted menu-dropdown-text">
|
||||
{% trans 'Ingredient Editor' %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="{% url 'view_export' %}" class="p-1">
|
||||
<a href="{% url 'view_export' %}" class="p-0 p-md-1">
|
||||
<div class="card p-0 no-gutters border-0">
|
||||
<div class="card-body text-center p-0 no-gutters">
|
||||
<i class="fas fa-file-export fa-2x"></i>
|
||||
</div>
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted">
|
||||
<div class="card-body text-break text-center p-0 no-gutters text-muted menu-dropdown-text">
|
||||
{% trans 'Export' %}
|
||||
</div>
|
||||
</div>
|
||||
@ -315,7 +337,8 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="container-fluid mt-2 mt-md-5 mt-xl-5 mt-lg-5" id="id_base_container">
|
||||
<div class="container-fluid mt-2 mt-md-5 mt-xl-5 mt-lg-5{% if request.user.userpreference.left_handed %} left-handed {% endif %}"
|
||||
id="id_base_container">
|
||||
<div class="row">
|
||||
<div class="col-xl-2 d-none d-xl-block">
|
||||
{% block content_xl_left %}
|
||||
@ -350,7 +373,7 @@
|
||||
{% block content_fluid %}
|
||||
{% endblock %}
|
||||
|
||||
{% user_prefs request as prefs%}
|
||||
{% user_prefs request as prefs %}
|
||||
{{ prefs|json_script:'user_preference' }}
|
||||
|
||||
</div>
|
||||
|
||||
@ -318,6 +318,7 @@ def user_settings(request):
|
||||
up.use_fractions = form.cleaned_data['use_fractions']
|
||||
up.use_kj = form.cleaned_data['use_kj']
|
||||
up.sticky_navbar = form.cleaned_data['sticky_navbar']
|
||||
up.left_handed = form.cleaned_data['left_handed']
|
||||
|
||||
up.save()
|
||||
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<div v-if="recipes !== {}">
|
||||
<div id="switcher" class="align-center">
|
||||
<i class="btn btn-primary fas fa-receipt fa-xl fa-fw shadow-none btn-circle" v-b-toggle.related-recipes />
|
||||
<i class="btn btn-primary fas fa-receipt fa-xl fa-fw shadow-none btn-circle" v-b-toggle.related-recipes/>
|
||||
</div>
|
||||
<b-sidebar id="related-recipes" backdrop right bottom no-header shadow="sm" style="z-index: 10000" @shown="updatePinnedRecipes()">
|
||||
<b-sidebar id="related-recipes" backdrop right bottom no-header shadow="sm" style="z-index: 10000"
|
||||
@shown="updatePinnedRecipes()">
|
||||
<template #default="{ hide }">
|
||||
<div class="d-flex flex-column justify-content-end h-100 p-3 align-items-end">
|
||||
<h5>{{$t("Planned")}} <i class="fas fa-calendar fa-fw"></i></h5>
|
||||
<h5>{{ $t("Planned") }} <i class="fas fa-calendar fa-fw"></i></h5>
|
||||
|
||||
<div class="text-right">
|
||||
<template v-if="planned_recipes.length > 0">
|
||||
@ -18,24 +19,25 @@
|
||||
hide()
|
||||
"
|
||||
href="javascript:void(0);"
|
||||
>{{ r.name }}</a
|
||||
>{{ r.name }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="text-muted">{{$t("nothing_planned_today")}}</span>
|
||||
<span class="text-muted">{{ $t("nothing_planned_today") }}</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<h5>{{$t("Pinned")}} <i class="fas fa-thumbtack fa-fw"></i></h5>
|
||||
<h5>{{ $t("Pinned") }} <i class="fas fa-thumbtack fa-fw"></i></h5>
|
||||
|
||||
<template v-if="pinned_recipes.length > 0">
|
||||
<div class="text-right">
|
||||
<div v-for="r in pinned_recipes" :key="`pin${r.id}`">
|
||||
<b-row class="pb-1 pt-1">
|
||||
<b-col cols="2">
|
||||
<a href="javascript:void(0)" @click="unPinRecipe(r)" class="text-muted"><i class="fas fa-times"></i></a>
|
||||
<a href="javascript:void(0)" @click="unPinRecipe(r)" class="text-muted"><i
|
||||
class="fas fa-times"></i></a>
|
||||
</b-col>
|
||||
<b-col cols="10">
|
||||
<a
|
||||
@ -45,7 +47,7 @@
|
||||
"
|
||||
href="javascript:void(0);"
|
||||
class="align-self-end"
|
||||
>{{ r.name }}
|
||||
>{{ r.name }}
|
||||
</a>
|
||||
</b-col>
|
||||
</b-row>
|
||||
@ -53,7 +55,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="text-muted">{{$t("no_pinned_recipes")}}</span>
|
||||
<span class="text-muted">{{ $t("no_pinned_recipes") }}</span>
|
||||
</template>
|
||||
|
||||
<template v-if="related_recipes.length > 0">
|
||||
@ -67,7 +69,7 @@
|
||||
hide()
|
||||
"
|
||||
href="javascript:void(0);"
|
||||
>{{ r.name }}</a
|
||||
>{{ r.name }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -77,8 +79,8 @@
|
||||
</template>
|
||||
<template #footer="{ hide }">
|
||||
<div class="d-flex bg-dark text-light align-items-center px-3 py-2">
|
||||
<strong class="mr-auto">{{$t("Quick actions")}}</strong>
|
||||
<b-button size="sm" @click="hide">{{$t("Close")}}</b-button>
|
||||
<strong class="mr-auto">{{ $t("Quick actions") }}</strong>
|
||||
<b-button size="sm" @click="hide">{{ $t("Close") }}</b-button>
|
||||
</div>
|
||||
</template>
|
||||
</b-sidebar>
|
||||
@ -86,14 +88,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const { ApiApiFactory } = require("@/utils/openapi/api")
|
||||
import { ResolveUrlMixin } from "@/utils/utils"
|
||||
const {ApiApiFactory} = require("@/utils/openapi/api")
|
||||
import {ResolveUrlMixin} from "@/utils/utils"
|
||||
|
||||
export default {
|
||||
name: "RecipeSwitcher",
|
||||
mixins: [ResolveUrlMixin],
|
||||
props: {
|
||||
recipe: { type: Number, default: undefined },
|
||||
recipe: {type: Number, default: undefined},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -158,7 +160,12 @@ export default {
|
||||
// get related recipes and save them for later
|
||||
if (this.$parent.recipe) {
|
||||
this.related_recipes = [this.$parent.recipe]
|
||||
return apiClient.relatedRecipe(this.$parent.recipe.id, { query: { levels: 2, format: "json" } }).then((result) => {
|
||||
return apiClient.relatedRecipe(this.$parent.recipe.id, {
|
||||
query: {
|
||||
levels: 2,
|
||||
format: "json"
|
||||
}
|
||||
}).then((result) => {
|
||||
this.related_recipes = this.related_recipes.concat(result.data)
|
||||
})
|
||||
}
|
||||
@ -172,16 +179,16 @@ export default {
|
||||
// TODO move to utility function moment is in maintenance mode https://momentjs.com/docs/
|
||||
var tzoffset = new Date().getTimezoneOffset() * 60000 //offset in milliseconds
|
||||
let today = new Date(Date.now() - tzoffset).toISOString().split("T")[0]
|
||||
return apiClient.listMealPlans({ query: { from_date: today, to_date: today } }).then((result) => {
|
||||
return apiClient.listMealPlans({query: {from_date: today, to_date: today}}).then((result) => {
|
||||
let promises = []
|
||||
result.data.forEach((mealplan) => {
|
||||
this.planned_recipes.push({ ...mealplan?.recipe, servings: mealplan?.servings })
|
||||
this.planned_recipes.push({...mealplan?.recipe, servings: mealplan?.servings})
|
||||
const serving_factor = (mealplan?.servings ?? mealplan?.recipe?.servings ?? 1) / (mealplan?.recipe?.servings ?? 1)
|
||||
promises.push(
|
||||
apiClient.relatedRecipe(mealplan?.recipe?.id, { query: { levels: 2 } }).then((r) => {
|
||||
apiClient.relatedRecipe(mealplan?.recipe?.id, {query: {levels: 2}}).then((r) => {
|
||||
// scale all recipes to mealplan servings
|
||||
r.data = r.data.map((x) => {
|
||||
return { ...x, factor: serving_factor }
|
||||
return {...x, factor: serving_factor}
|
||||
})
|
||||
this.planned_recipes = [...this.planned_recipes, ...r.data]
|
||||
})
|
||||
@ -213,20 +220,28 @@ export default {
|
||||
z-index: 9000;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
#switcher .btn-circle {
|
||||
position: fixed;
|
||||
top: 9px;
|
||||
left: 80px;
|
||||
color: white;
|
||||
top: 12px;
|
||||
right: 79px;
|
||||
color: rgba(46, 46, 46, 0.5);
|
||||
width: 56px;
|
||||
height: 40px;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(46, 46, 46, 0.5);
|
||||
border-radius: 0.1875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 2000px) {
|
||||
@media (min-width: 992px) {
|
||||
#switcher .btn-circle {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 50px;
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user