mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-01 04:10:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

recipe switcher and navbar fixes

Browse Source 
also added left_hand to global preferences
This commit is contained in:
Kaibu
2022-04-18 14:13:23 +02:00
parent d1065c8ac4
commit 45a86a22e3
5 changed files with 115 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cookbook/forms.py
View File

@@ -49,7 +49,7 @@ class UserPreferenceForm(forms.ModelForm):
fields = ( fields = (
'default_unit', 'use_fractions', 'use_kj', 'theme', 'nav_color', 'default_unit', 'use_fractions', 'use_kj', 'theme', 'nav_color',
'sticky_navbar', 'default_page', 'show_recent', 'search_style', 'sticky_navbar', 'default_page', 'show_recent', 'search_style',
'plan_share', 'ingredient_decimals', 'comments', 'plan_share', 'ingredient_decimals', 'comments', 'left_handed',
) )
labels = { labels = {
@@ -65,7 +65,8 @@ class UserPreferenceForm(forms.ModelForm):
'plan_share': _('Plan sharing'), 'plan_share': _('Plan sharing'),
'ingredient_decimals': _('Ingredient decimal places'), 'ingredient_decimals': _('Ingredient decimal places'),
'shopping_auto_sync': _('Shopping list auto sync period'), 'shopping_auto_sync': _('Shopping list auto sync period'),
'comments': _('Comments') 'comments': _('Comments'),
'left_handed': _('Left-handed mode')
} }
help_texts = { help_texts = {
@@ -89,6 +90,7 @@ class UserPreferenceForm(forms.ModelForm):
'sticky_navbar': _('Makes the navbar stick to the top of the page.'), # noqa: E501 '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_autoadd_shopping': _('Automatically add meal plan ingredients to shopping list.'),
'mealplan_autoexclude_onhand': _('Exclude ingredients that are on hand.'), 'mealplan_autoexclude_onhand': _('Exclude ingredients that are on hand.'),
'left_handed': _('Will optimize the UI for use with your left hand.')
} }
widgets = { widgets = {

8
cookbook/static/css/app.min.css vendored
View File

@@ -2,6 +2,14 @@
height: 40px; height: 40px;
} }
@media (max-width: 991.98px) {
.menu-dropdown-text {
font-size: 14px;
font-weight: 200;
}
}
.spinner-tandoor { .spinner-tandoor {
animation: rotation 3s infinite linear; animation: rotation 3s infinite linear;
content: url("../assets/spinner.svg"); content: url("../assets/spinner.svg");

83
cookbook/templates/base.html
View File

@@ -56,23 +56,46 @@
{% block extra_head %} <!-- block for templates to put stuff into header --> {% block extra_head %} <!-- block for templates to put stuff into header -->
{% endblock %} {% endblock %}
<style>
{% if request.user.userpreference.left_handed %}
@media screen and (max-width: 600px) {
#switcher .btn-circle {
left: 80px !important;
}
}
{% endif %}
</style>
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-dark bg-{% nav_color request %} bg-header" id="id_main_nav" <nav class="navbar navbar-expand-lg navbar-dark bg-{% nav_color request %} bg-header"
id="id_main_nav"
style="{% sticky_nav request %}"> 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 %} {% 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"> <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"> <img class="brand-icon" src="{% static 'assets/brand_logo.svg' %}" alt="Logo">
</a> </a>
{% endif %} {% endif %}
{% endif %}
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </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"> <div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item {% if request.resolver_match.url_name in 'view_search' %}active{% endif %}"> <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> <i class="fas fa-toolbox fa-lg"></i>
</a> </a>
<div class="dropdown-menu dropdown-menu-center dropdown-menu-center-large"> <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"> <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 p-0 no-gutters border-0">
<div class="card-body text-center p-0 no-gutters"> <div class="card-body text-center p-0 no-gutters">
<i class="fas fa-tags fa-2x"></i> <i class="fas fa-tags fa-2x"></i>
</div> </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' %} {% trans 'Keyword' %}
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<div class="col-4"> <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 p-0 no-gutters border-0">
<div class="card-body text-center p-0 no-gutters"> <div class="card-body text-center p-0 no-gutters">
<i class="fas fa-leaf fa-2x"></i> <i class="fas fa-leaf fa-2x"></i>
</div> </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' %} {% trans 'Foods' %}
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<div class="col-4"> <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 p-0 no-gutters border-0">
<div class="card-body text-center p-0 no-gutters"> <div class="card-body text-center p-0 no-gutters">
<i class="fas fa-balance-scale fa-2x"></i> <i class="fas fa-balance-scale fa-2x"></i>
</div> </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' %} {% trans 'Units' %}
</div> </div>
</div> </div>
</a> </a>
</div> </div>
</div> </div>
<div class="row m-0"> <div class="row m-0 mt-2 mt-md-0">
<div class="col-4"> <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 p-0 no-gutters border-0">
<div class="card-body text-center p-0 no-gutters"> <div class="card-body text-center p-0 no-gutters">
<i class="fas fa-store-alt fa-2x"></i> <i class="fas fa-store-alt fa-2x"></i>
</div> </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' %} {% trans 'Supermarket' %}
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<div class="col-4"> <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 p-0 no-gutters border-0">
<div class="card-body text-center p-0 no-gutters"> <div class="card-body text-center p-0 no-gutters">
<i class="fas fa-cubes fa-2x"></i> <i class="fas fa-cubes fa-2x"></i>
</div> </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' %} {% trans 'Supermarket Category' %}
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<div class="col-4"> <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 p-0 no-gutters border-0">
<div class="card-body text-center p-0 no-gutters"> <div class="card-body text-center p-0 no-gutters">
<i class="fas fa-robot fa-2x"></i> <i class="fas fa-robot fa-2x"></i>
</div> </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' %} {% trans 'Automations' %}
</div> </div>
</div> </div>
</a> </a>
</div> </div>
</div> </div>
<div class="row m-0"> <div class="row m-0 mt-2 mt-md-0">
<div class="col-4"> <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 p-0 no-gutters border-0">
<div class="card-body text-center p-0 no-gutters"> <div class="card-body text-center p-0 no-gutters">
<i class="fas fa-file fa-2x"></i> <i class="fas fa-file fa-2x"></i>
</div> </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' %} {% trans 'Files' %}
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<div class="col-4"> <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 p-0 no-gutters border-0">
<div class="card-body text-center p-0 no-gutters"> <div class="card-body text-center p-0 no-gutters">
<i class="fas fa-edit fa-2x"></i> <i class="fas fa-edit fa-2x"></i>
</div> </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' %} {% trans 'Batch Edit' %}
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<div class="col-4"> <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 p-0 no-gutters border-0">
<div class="card-body text-center p-0 no-gutters"> <div class="card-body text-center p-0 no-gutters">
<i class="fas fa-history fa-2x"></i> <i class="fas fa-history fa-2x"></i>
</div> </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' %} {% trans 'History' %}
</div> </div>
</div> </div>
</a> </a>
</div> </div>
</div> </div>
<div class="row m-0"> <div class="row m-0 mt-2 mt-md-0">
<div class="col-4"> <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 p-0 no-gutters border-0">
<div class="card-body text-center p-0 no-gutters"> <div class="card-body text-center p-0 no-gutters">
<i class="fas fa-th-list fa-2x"></i> <i class="fas fa-th-list fa-2x"></i>
</div> </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' %} {% trans 'Ingredient Editor' %}
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<div class="col-4"> <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 p-0 no-gutters border-0">
<div class="card-body text-center p-0 no-gutters"> <div class="card-body text-center p-0 no-gutters">
<i class="fas fa-file-export fa-2x"></i> <i class="fas fa-file-export fa-2x"></i>
</div> </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' %} {% trans 'Export' %}
</div> </div>
</div> </div>
@@ -315,7 +337,8 @@
</div> </div>
{% endif %} {% 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="row">
<div class="col-xl-2 d-none d-xl-block"> <div class="col-xl-2 d-none d-xl-block">
{% block content_xl_left %} {% block content_xl_left %}

1
cookbook/views/views.py
View File

@@ -318,6 +318,7 @@ def user_settings(request):
up.use_fractions = form.cleaned_data['use_fractions'] up.use_fractions = form.cleaned_data['use_fractions']
up.use_kj = form.cleaned_data['use_kj'] up.use_kj = form.cleaned_data['use_kj']
up.sticky_navbar = form.cleaned_data['sticky_navbar'] up.sticky_navbar = form.cleaned_data['sticky_navbar']
up.left_handed = form.cleaned_data['left_handed']
up.save() up.save()

35
vue/src/components/Buttons/RecipeSwitcher.vue
View File

@@ -3,7 +3,8 @@
<div id="switcher" class="align-center"> <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> </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 }"> <template #default="{ hide }">
<div class="d-flex flex-column justify-content-end h-100 p-3 align-items-end"> <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>
@@ -35,7 +36,8 @@
<div v-for="r in pinned_recipes" :key="`pin${r.id}`"> <div v-for="r in pinned_recipes" :key="`pin${r.id}`">
<b-row class="pb-1 pt-1"> <b-row class="pb-1 pt-1">
<b-col cols="2"> <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>
<b-col cols="10"> <b-col cols="10">
<a <a
@@ -158,7 +160,12 @@ export default {
// get related recipes and save them for later // get related recipes and save them for later
if (this.$parent.recipe) { if (this.$parent.recipe) {
this.related_recipes = [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) this.related_recipes = this.related_recipes.concat(result.data)
}) })
} }
@@ -213,20 +220,28 @@ export default {
z-index: 9000; z-index: 9000;
} }
@media screen and (max-width: 600px) {
@media (max-width: 991.98px) {
#switcher .btn-circle { #switcher .btn-circle {
position: fixed; position: fixed;
top: 9px; top: 12px;
left: 80px; right: 79px;
color: white; 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 { #switcher .btn-circle {
position: fixed; position: fixed;
bottom: 10px; bottom: 40px;
right: 50px; right: 40px;
} }
} }
</style> </style>