From 3478ff17f886414c6c276a0dd79bd19e663aec71 Mon Sep 17 00:00:00 2001
From: Oleh Astappiev <oleh@astappiev.me>
Date: Sun, 29 May 2022 16:56:13 +0200
Subject: [PATCH 1/6] fix: recipe's step header out of view on mobile in edit
 mode

---
 vue/src/apps/RecipeEditView/RecipeEditView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/vue/src/apps/RecipeEditView/RecipeEditView.vue b/vue/src/apps/RecipeEditView/RecipeEditView.vue
index 1a0183223..3cbc46583 100644
--- a/vue/src/apps/RecipeEditView/RecipeEditView.vue
+++ b/vue/src/apps/RecipeEditView/RecipeEditView.vue
@@ -185,14 +185,14 @@
                         <div class="card-body pr-2 pl-2 pr-md-5 pl-md-5" :id="`id_card_step_${step_index}`">
                             <!-- step card header -->
                             <div class="row">
-                                <div class="col-11">
+                                <div class="col">
                                     <h4 class="handle" :id="'id_step_' + step_index">
                                         <i class="fas fa-paragraph"></i>
                                         <template v-if="step.name !== ''">{{ step.name }}</template>
                                         <template v-else>{{ $t("Step") }} {{ step_index + 1 }}</template>
                                     </h4>
                                 </div>
-                                <div class="col-1" style="text-align: right">
+                                <div class="col-auto" style="text-align: right">
                                     <a class="btn shadow-none btn-lg" href="#" role="button" id="dropdownMenuLink"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                         <i class="fas fa-ellipsis-v text-muted"></i>

From ab446590a2564804899cf3a75813a2e21598b674 Mon Sep 17 00:00:00 2001
From: Oleh Astappiev <oleh@astappiev.me>
Date: Sun, 29 May 2022 16:58:46 +0200
Subject: [PATCH 2/6] fix: add some space in multi-row lists of elements on
 mobile

---
 .../apps/RecipeEditView/RecipeEditView.vue    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/vue/src/apps/RecipeEditView/RecipeEditView.vue b/vue/src/apps/RecipeEditView/RecipeEditView.vue
index 3cbc46583..9890fc7ef 100644
--- a/vue/src/apps/RecipeEditView/RecipeEditView.vue
+++ b/vue/src/apps/RecipeEditView/RecipeEditView.vue
@@ -238,27 +238,27 @@
                             <!-- step data visibility controller -->
                             <div class="row pt-2">
                                 <div class="col col-md-12">
-                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                    <b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
                                               @click="step.time_visible = true" v-if="!step.time_visible">
                                         <i class="fas fa-plus-circle"></i> {{ $t("Time") }}
                                     </b-button>
 
-                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                    <b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
                                               @click="step.ingredients_visible = true" v-if="!step.ingredients_visible">
                                         <i class="fas fa-plus-circle"></i> {{ $t("Ingredients") }}
                                     </b-button>
 
-                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                    <b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
                                               @click="step.instruction_visible = true" v-if="!step.instruction_visible">
                                         <i class="fas fa-plus-circle"></i> {{ $t("Instructions") }}
                                     </b-button>
 
-                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                    <b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
                                               @click="step.step_recipe_visible = true" v-if="!step.step_recipe_visible">
                                         <i class="fas fa-plus-circle"></i> {{ $t("Recipe") }}
                                     </b-button>
 
-                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                    <b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
                                               @click="step.file_visible = true" v-if="!step.file_visible">
                                         <i class="fas fa-plus-circle"></i> {{ $t("File") }}
                                     </b-button>
@@ -266,7 +266,7 @@
                                         pill
                                         variant="primary"
                                         size="sm"
-                                        class="ml-1"
+                                        class="ml-1 mb-1 mb-md-0"
                                         @click="
                                             paste_step = step.id
                                             $bvModal.show('id_modal_paste_ingredients')
@@ -609,22 +609,22 @@
             <!-- bottom buttons save/close/view -->
             <div class="row fixed-bottom p-2 b-2 border-top text-center" style="background: white"
                  v-if="recipe !== undefined">
-                <div class="col-md-3 col-6">
+                <div class="col-md-3 col-6 mb-1 mb-md-0">
                     <a :href="resolveDjangoUrl('delete_recipe', recipe.id)"
                        class="btn btn-block btn-danger shadow-none">{{ $t("Delete") }}</a>
                 </div>
-                <div class="col-md-3 col-6">
+                <div class="col-md-3 col-6 mb-1 mb-md-0">
                     <a :href="resolveDjangoUrl('view_recipe', recipe.id)">
                         <button class="btn btn-block btn-primary shadow-none">{{ $t("View") }}</button>
                     </a>
                 </div>
-                <div class="col-md-3 col-6">
+                <div class="col-md-3 col-6 mb-1 mb-md-0">
                     <button type="button" @click="updateRecipe(false)" v-b-tooltip.hover
                             :title="`${$t('Key_Ctrl')} + S`" class="btn btn-sm btn-block btn-info shadow-none">
                         {{ $t("Save") }}
                     </button>
                 </div>
-                <div class="col-md-3 col-6">
+                <div class="col-md-3 col-6 mb-1 mb-md-0">
                     <button type="button" @click="updateRecipe(true)" v-b-tooltip.hover
                             :title="`${$t('Key_Ctrl')} + ${$t('Key_Shift')} + S`"
                             class="btn btn-sm btn-block btn-success shadow-none">

From b0c3ea09349a27e94519de8a731a26948d8ad727 Mon Sep 17 00:00:00 2001
From: Oleh Astappiev <oleh@astappiev.me>
Date: Sun, 29 May 2022 17:16:18 +0200
Subject: [PATCH 3/6] fix: make menu icons centered on mobile

---
 cookbook/templates/base.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/cookbook/templates/base.html b/cookbook/templates/base.html
index f5fc196da..6c7a81735 100644
--- a/cookbook/templates/base.html
+++ b/cookbook/templates/base.html
@@ -100,19 +100,19 @@
         <ul class="navbar-nav mr-auto">
             <li class="nav-item {% if request.resolver_match.url_name in 'view_search' %}active{% endif %}">
                 <a class="nav-link" href="{% url 'view_search' %}"><i
-                        class="fas fa-book"></i> {% trans 'Recipes' %}</a>
+                        class="fas fa-fw fa-book"></i> {% trans 'Recipes' %}</a>
             </li>
             <li class="nav-item {% if request.resolver_match.url_name in 'view_plan' %}active{% endif %}">
                 <a class="nav-link" href="{% url 'view_plan' %}"><i
-                        class="fas fa-calendar"></i> {% trans 'Meal-Plan' %}</a>
+                        class="fas fa-fw fa-calendar"></i> {% trans 'Meal-Plan' %}</a>
             </li>
             <li class="nav-item {% if request.resolver_match.url_name in 'list_shopping_list,view_shopping' %}active{% endif %}">
                 <a class="nav-link" href="{% url 'list_shopping_list' %}"><i
-                        class="fas fa-shopping-cart"></i> {% trans 'Shopping' %}</a>
+                        class="fas fa-fw fa-shopping-cart"></i> {% trans 'Shopping' %}</a>
             </li>
             <li class="nav-item {% if request.resolver_match.url_name in 'view_books' %}active{% endif %}">
                 <a class="nav-link" href="{% url 'view_books' %}"><i
-                        class="fas fa-book-open"></i> {% trans 'Books' %}</a>
+                        class="fas fa-fw fa-book-open"></i> {% trans 'Books' %}</a>
             </li>
         </ul>
 
@@ -124,7 +124,7 @@
                 <li class="nav-item dropdown {% if request.resolver_match.url_name in 'list_keyword,list_food,list_unit,view_supermarket,data_batch_edit,view_history' %}active{% endif %}">
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
-                        <i class="fas fa-toolbox fa-lg"></i>
+                        <i class="fas fa-fw fa-toolbox fa-lg"></i>
                     </a>
                     <div class="dropdown-menu dropdown-menu-center dropdown-menu-center-large">
                         <div class="row m-0 mt-2 mt-md-0">
@@ -272,7 +272,7 @@
                 <li class="nav-item dropdown {% if request.resolver_match.url_name in 'data_import_url,new_recipe' %}active{% endif %}">
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false"><i
-                            class="fas fa-plus fa-lg"></i>
+                            class="fas fa-fw fa-plus fa-lg"></i>
                     </a>
                     <div class="dropdown-menu dropdown-menu-center"
                          aria-labelledby="navbarDropdownMenuLink">
@@ -285,7 +285,7 @@
                 <li class="nav-item dropdown {% if request.resolver_match.url_name in 'view_space,view_settings,view_history,view_system,docs_markdown' %}active{% endif %}">
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false"><i
-                            class="fas fa-user-alt"></i> {{ user.get_user_name }}
+                            class="fas fa-fw fa-user-alt"></i> {{ user.get_user_name }}
                     </a>
 
                     <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
@@ -323,7 +323,7 @@
             {% else %}
                 <li class="nav-item">
                     <a class="nav-link" href="{% url 'account_login' %}">{% trans 'Login' %} <i
-                            class="fas fa-sign-in-alt"></i></a>
+                            class="fas fa-fw fa-sign-in-alt"></i></a>
                 </li>
             {% endif %}
         </ul>

From d5dd64acd28baf07a550dc7cf9a7b85b95871fbb Mon Sep 17 00:00:00 2001
From: Oleh Astappiev <oleh@astappiev.me>
Date: Sun, 29 May 2022 17:41:51 +0200
Subject: [PATCH 4/6] fix: improve buttons visualization on mobile

---
 vue/src/apps/MealPlanView/MealPlanView.vue         | 6 +++---
 vue/src/apps/RecipeSearchView/RecipeSearchView.vue | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue
index 1e441829f..0866a293f 100644
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -212,18 +212,18 @@
         <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)"
                  v-if="current_tab === 0">
-                <div class="col-md-3 col-6">
+                <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
                         class="fas fa-calendar-plus"></i> {{ $t("Create") }}
                     </button>
                 </div>
-                <div class="col-md-3 col-6">
+                <div class="col-md-3 col-6 mb-1 mb-md-0">
                     <a class="btn btn-block btn-primary shadow-none" :href="iCalUrl"
                     ><i class="fas fa-download"></i>
                         {{ $t("Export_To_ICal") }}
                     </a>
                 </div>
-                <div class="col-md-3 col-6">
+                <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") }}
diff --git a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
index be1ab987c..427f87185 100644
--- a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
+++ b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
@@ -37,15 +37,15 @@
                             <div class="card">
                                 <div class="card-body p-4">
                                     <div class="row">
-                                        <div class="col-md-3">
+                                        <div class="col-md-3 col-6 mb-1 mb-md-0">
                                             <a class="btn btn-primary btn-block text-uppercase"
                                                :href="resolveDjangoUrl('new_recipe')">{{ $t("New_Recipe") }}</a>
                                         </div>
-                                        <div class="col-md-3">
+                                        <div class="col-md-3 col-6 mb-1 mb-md-0">
                                             <a class="btn btn-primary btn-block text-uppercase"
                                                :href="resolveDjangoUrl('data_import_url')">{{ $t("Import") }}</a>
                                         </div>
-                                        <div class="col-md-3">
+                                        <div class="col-md-3 col-6 mb-1 mb-md-0">
                                             <button
                                                 class="btn btn-block text-uppercase"
                                                 v-b-tooltip.hover
@@ -61,7 +61,7 @@
                                             </button>
                                         </div>
 
-                                        <div class="col-md-3">
+                                        <div class="col-md-3 col-6 mb-1 mb-md-0">
                                             <button id="id_settings_button"
                                                     class="btn btn-primary btn-block text-uppercase"><i
                                                 class="fas fa-cog fa-lg m-1"></i></button>

From 43666e1f631c54027da86600205388f9584be9e5 Mon Sep 17 00:00:00 2001
From: Oleh Astappiev <oleh@astappiev.me>
Date: Sun, 29 May 2022 17:42:40 +0200
Subject: [PATCH 5/6] fix: improve recipe toolbar visualization on mobile and
 position of elements

---
 vue/src/apps/RecipeView/RecipeView.vue | 38 ++++++++++++--------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index bab762da5..c55c89f5f 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -30,16 +30,14 @@
             </div>
 
             <hr/>
-            <div class="row">
+            <div class="row align-items-center">
                 <div class="col col-md-3">
-                    <div class="row d-flex" style="padding-left: 16px">
-                        <div class="my-auto" style="padding-right: 4px">
-                            <i class="fas fa-user-clock fa-2x text-primary"></i>
+                    <div class="d-flex">
+                        <div class="my-auto mr-1">
+                            <i class="fas fa-fw fa-user-clock fa-2x text-primary"></i>
                         </div>
-                        <div class="my-auto" style="padding-right: 4px">
-                            <span class="text-primary"
-                            ><b>{{ $t("Preparation") }}</b></span
-                            ><br/>
+                        <div class="my-auto mr-1">
+                            <span class="text-primary"><b>{{ $t("Preparation") }}</b></span><br/>
                             {{ recipe.working_time }} {{ $t("min") }}
                         </div>
                     </div>
@@ -47,27 +45,25 @@
 
                 <div class="col col-md-3">
                     <div class="row d-flex">
-                        <div class="my-auto" style="padding-right: 4px">
-                            <i class="far fa-clock fa-2x text-primary"></i>
+                        <div class="my-auto mr-1">
+                            <i class="far fa-fw fa-clock fa-2x text-primary"></i>
                         </div>
-                        <div class="my-auto" style="padding-right: 4px">
-                            <span class="text-primary"
-                            ><b>{{ $t("Waiting") }}</b></span
-                            ><br/>
+                        <div class="my-auto mr-1">
+                            <span class="text-primary"><b>{{ $t("Waiting") }}</b></span><br/>
                             {{ recipe.waiting_time }} {{ $t("min") }}
                         </div>
                     </div>
                 </div>
 
-                <div class="col col-md-4 col-10 mt-2 mt-md-0 mt-lg-0 mt-xl-0">
-                    <div class="row d-flex" style="padding-left: 16px">
-                        <div class="my-auto" style="padding-right: 4px">
-                            <i class="fas fa-pizza-slice fa-2x text-primary"></i>
+                <div class="col col-md-4 col-10 mt-2 mt-md-0">
+                    <div class="d-flex">
+                        <div class="my-auto mr-1">
+                            <i class="fas fa-fw fa-pizza-slice fa-2x text-primary"></i>
                         </div>
-                        <div class="my-auto" style="padding-right: 4px">
+                        <div class="my-auto mr-1">
                             <CustomInputSpinButton v-model.number="servings"/>
                         </div>
-                        <div class="my-auto">
+                        <div class="my-auto mr-1">
                             <span class="text-primary">
                                 <b>
                                     <template v-if="recipe.servings_text === ''">{{ $t("Servings") }}</template>
@@ -78,7 +74,7 @@
                     </div>
                 </div>
 
-                <div class="col col-md-2 col-2 my-auto" style="text-align: right; padding-right: 1vw">
+                <div class="col col-md-2 col-2 mt-2 mt-md-0 text-right">
                     <recipe-context-menu v-bind:recipe="recipe" :servings="servings"></recipe-context-menu>
                 </div>
             </div>

From 37c87b43754eb7f1b51c9495e8bd88f9a293ab4e Mon Sep 17 00:00:00 2001
From: Oleh Astappiev <oleh@astappiev.me>
Date: Sun, 29 May 2022 18:25:18 +0200
Subject: [PATCH 6/6] fix: ingredients table out of page bounds

---
 .../IngredientEditorView/IngredientEditorView.vue    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/vue/src/apps/IngredientEditorView/IngredientEditorView.vue b/vue/src/apps/IngredientEditorView/IngredientEditorView.vue
index 65e410f46..f1a5803c4 100644
--- a/vue/src/apps/IngredientEditorView/IngredientEditorView.vue
+++ b/vue/src/apps/IngredientEditorView/IngredientEditorView.vue
@@ -98,7 +98,7 @@
                             <th>{{ $t('Unit') }}</th>
                             <th>{{ $t('Food') }}</th>
                             <th>{{ $t('Note') }}</th>
-                            <th>
+                            <th class="text-right">
                                 <b-button variant="success" class="btn btn-sm" @click="updateIngredient()"><i
                                     class="fas fa-save"></i>
                                 </b-button>
@@ -119,11 +119,11 @@
                                 </td>
                             </tr>
                             <tr>
-                                <td style="">
+                                <td>
                                     <input type="number" class="form-control" v-model="i.amount"
                                            @input="$set(i, 'changed', true)">
                                 </td>
-                                <td style="min-width: 30vw">
+                                <td>
                                     <generic-multiselect @change="i.unit = $event.val; $set(i, 'changed', true)"
                                                          :initial_single_selection="i.unit"
                                                          :model="Models.UNIT"
@@ -132,7 +132,7 @@
                                                          :create_placeholder="$t('Create')"
                                                          :multiple="false"></generic-multiselect>
                                 </td>
-                                <td style="min-width: 30vw">
+                                <td>
                                     <generic-multiselect @change="i.food = $event.val; $set(i, 'changed', true)"
                                                          :initial_single_selection="i.food"
                                                          :model="Models.FOOD"
@@ -141,11 +141,11 @@
                                                          :create_placeholder="$t('Create')"
                                                          :multiple="false"></generic-multiselect>
                                 </td>
-                                <td style="min-width: 30vw">
+                                <td>
                                     <input class="form-control" v-model="i.note" @keydown="$set(i, 'changed', true)">
 
                                 </td>
-                                <td style="">
+                                <td class="text-right">
                                     <b-button-group>
                                         <b-button :disabled="i.changed !== true"
                                                   :variant="(i.changed !== true) ? 'primary' : 'success'"