From be43e5bccd5532cf20bfcdf579ce1659757ea678 Mon Sep 17 00:00:00 2001
From: p0lycarpio <arsene.reymond@free.fr>
Date: Fri, 24 Nov 2023 10:40:35 +0100
Subject: [PATCH] improve spacing and fix layout on small screens

---
 .../components/Domain/Recipe/RecipeAssets.vue     |  2 +-
 .../Domain/Recipe/RecipeIngredientEditor.vue      |  4 +---
 .../RecipePageParts/RecipePageFooter.vue          | 10 +++++-----
 .../RecipePageIngredientEditor.vue                |  2 +-
 .../RecipePageParts/RecipePageInstructions.vue    | 15 +++++++++------
 .../RecipePageParts/RecipePageOrganizers.vue      |  6 +++---
 .../components/Domain/Recipe/RecipeTimeline.vue   |  4 ++--
 frontend/pages/g/_groupSlug/recipes/timeline.vue  |  2 +-
 8 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeAssets.vue b/frontend/components/Domain/Recipe/RecipeAssets.vue
index b439f1a20dc0..b0c595f8bf60 100644
--- a/frontend/components/Domain/Recipe/RecipeAssets.vue
+++ b/frontend/components/Domain/Recipe/RecipeAssets.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="value.length > 0 || edit">
-    <v-card class="mt-2">
+    <v-card class="mt-4">
       <v-card-title class="py-2">
         {{ $t("asset.assets") }}
       </v-card-title>
diff --git a/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue b/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
index 94d41593ae00..80b5bf7f5cac 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
@@ -18,7 +18,6 @@
           solo
           hide-details
           dense
-          class="mx-1"
           type="number"
           :placeholder="$t('recipe.quantity')"
           @keypress="quantityFilter"
@@ -89,7 +88,6 @@
             hide-details
             dense
             solo
-            class="mx-1"
             :placeholder="$t('recipe.notes')"
             @click="$emit('clickIngredientField', 'note')"
           >
@@ -100,7 +98,7 @@
           <BaseButtonGroup
             hover
             :large="false"
-            class="my-auto"
+            class="my-auto d-flex"
             :buttons="btns"
             @toggle-section="toggleTitle"
             @toggle-original="toggleOriginalText"
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageFooter.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageFooter.vue
index 8b7de6d106cc..86b6bc59e9ad 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageFooter.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageFooter.vue
@@ -24,13 +24,13 @@
       </v-btn>
     </v-card-actions>
     <AdvancedOnly>
-      <v-card v-if="isEditForm" flat class="ma-2 mb-2">
+      <v-card v-if="isEditForm" flat class="mb-2 mx-n2">
         <v-card-title> {{ $t('recipe.api-extras') }} </v-card-title>
-        <v-divider class="mx-2"></v-divider>
+        <v-divider class="ml-4"></v-divider>
         <v-card-text>
           {{ $t('recipe.api-extras-description') }}
           <v-row v-for="(_, key) in recipe.extras" :key="key" class="mt-1">
-            <v-col cols="8">
+            <v-col style="max-width: 400px;">
               <v-text-field v-model="recipe.extras[key]" dense :label="key">
                 <template #prepend>
                   <v-btn color="error" icon class="mt-n4" @click="removeApiExtra(key)">
@@ -41,8 +41,8 @@
             </v-col>
           </v-row>
         </v-card-text>
-        <v-card-actions class="d-flex">
-          <div style="max-width: 200px">
+        <v-card-actions class="d-flex ml-2 mt-n3">
+          <div>
             <v-text-field v-model="apiNewKey" :label="$t('recipe.message-key')"></v-text-field>
           </div>
           <BaseButton create small class="ml-5" @click="createApiExtra" />
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue
index ab36fb00d100..e57f96b99a08 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue
@@ -26,7 +26,7 @@
       </TransitionGroup>
     </draggable>
     <v-skeleton-loader v-else boilerplate elevation="2" type="list-item"> </v-skeleton-loader>
-    <div class="d-flex flex-wrap justify-center justify-sm-end mt-2">
+    <div class="d-flex flex-wrap justify-center justify-sm-end mt-3">
       <v-tooltip top color="accent">
         <template #activator="{ on, attrs }">
           <span v-on="on">
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
index bba7f3c24ed3..c3080328249b 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
@@ -49,11 +49,13 @@
         <v-card-actions>
           <BaseButton cancel @click="dialog = false"> </BaseButton>
           <v-spacer></v-spacer>
-          <BaseButton color="info" @click="autoSetReferences">
-            <template #icon> {{ $globals.icons.robot }}</template>
-            {{ $t("recipe.auto") }}
-          </BaseButton>
-          <BaseButton save @click="setIngredientIds"> </BaseButton>
+          <div class="d-flex flex-wrap justify-end">
+            <BaseButton color="info" @click="autoSetReferences">
+              <template #icon> {{ $globals.icons.robot }}</template>
+              {{ $t("recipe.auto") }}
+            </BaseButton>
+            <BaseButton class="ml-2" save @click="setIngredientIds"> </BaseButton>
+          </div>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -84,7 +86,7 @@
         <div v-for="(step, index) in value" :key="step.id" class="list-group-item">
           <v-app-bar
             v-if="step.id && showTitleEditor[step.id]"
-            class="primary mx-1 mt-6"
+            class="primary mt-6"
             style="cursor: pointer"
             dark
             dense
@@ -219,6 +221,7 @@
         </div>
       </TransitionGroup>
     </draggable>
+    <v-divider class="mt-10 d-flex d-md-none"/>
   </section>
 </template>
 
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue
index f2c6acd50006..9e97a11d81ea 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- Recipe Categories -->
-    <v-card v-if="recipe.recipeCategory.length > 0 || isEditForm" class="mt-2">
+    <v-card v-if="recipe.recipeCategory.length > 0 || isEditForm" class="mt-10">
       <v-card-title class="py-2">
         {{ $t("recipe.categories") }}
       </v-card-title>
@@ -19,7 +19,7 @@
     </v-card>
 
     <!-- Recipe Tags -->
-    <v-card v-if="recipe.tags.length > 0 || isEditForm" class="mt-2">
+    <v-card v-if="recipe.tags.length > 0 || isEditForm" class="mt-4">
       <v-card-title class="py-2">
         {{ $t("tag.tags") }}
       </v-card-title>
@@ -45,7 +45,7 @@
       </v-card-text>
     </v-card>
 
-    <RecipeNutrition v-if="recipe.settings.showNutrition" v-model="recipe.nutrition" class="mt-10" :edit="isEditForm" />
+    <RecipeNutrition v-if="recipe.settings.showNutrition" v-model="recipe.nutrition" class="mt-4" :edit="isEditForm" />
     <RecipeAssets
       v-if="recipe.settings.showAssets"
       v-model="recipe.assets"
diff --git a/frontend/components/Domain/Recipe/RecipeTimeline.vue b/frontend/components/Domain/Recipe/RecipeTimeline.vue
index e7c03c963ebc..7dc56e650302 100644
--- a/frontend/components/Domain/Recipe/RecipeTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimeline.vue
@@ -8,7 +8,7 @@
         </v-btn>
       </v-col>
     </v-row>
-    <v-divider class="mx-2" />
+    <v-divider class="mx-2"/>
     <div
       v-if="timelineEvents.length"
       id="timeline-container"
@@ -34,7 +34,7 @@
         {{ $t("recipe.timeline-is-empty") }}
       </v-card-title>
     </v-card>
-    <div v-if="loading" class="mb-3">
+    <div v-if="loading" class="mb-3 text-center">
       <AppLoader :loading="loading" :waiting-text="$tc('general.loading-events')" />
     </div>
   </div>
diff --git a/frontend/pages/g/_groupSlug/recipes/timeline.vue b/frontend/pages/g/_groupSlug/recipes/timeline.vue
index 8e13802b8934..913baaafafd8 100644
--- a/frontend/pages/g/_groupSlug/recipes/timeline.vue
+++ b/frontend/pages/g/_groupSlug/recipes/timeline.vue
@@ -1,6 +1,6 @@
 <template>
   <v-sheet :class="$vuetify.breakpoint.smAndDown ? 'pa-0' : 'px-3 py-0'">
-    <BasePageTitle v-if="groupName" divider>
+    <BasePageTitle v-if="groupName">
       <template #header>
         <v-img max-height="200" max-width="150" :src="require('~/static/svgs/manage-members.svg')" />
       </template>