From 65b451b465c82ae8a05e5f365d5f2be6d0c0b342 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Wed, 31 Jul 2024 18:56:43 +0200
Subject: [PATCH] improving the start page layout

---
 vue3/src/apps/tandoor/Tandoor.vue             |  20 +--
 .../display/HorizontalMealPlanWindow.vue      |  10 +-
 .../display/HorizontalRecipeWindow.vue        |   4 +-
 vue3/src/components/display/RecipeCard.vue    |  24 ++--
 vue3/src/pages/StartPage.vue                  | 121 +++++++++---------
 vue3/src/utils/breakpoint_utils.ts            |   6 +-
 6 files changed, 96 insertions(+), 89 deletions(-)

diff --git a/vue3/src/apps/tandoor/Tandoor.vue b/vue3/src/apps/tandoor/Tandoor.vue
index b331aa800..10677a9df 100644
--- a/vue3/src/apps/tandoor/Tandoor.vue
+++ b/vue3/src/apps/tandoor/Tandoor.vue
@@ -39,16 +39,16 @@
             <router-view></router-view>
         </v-main>
 
-        <v-navigation-drawer v-if="lgAndUp">
-            <v-list-item title="My Application" subtitle="Vuetify"></v-list-item>
-            <v-divider></v-divider>
-            <v-list-item prepend-icon="fas fa-book" title="Home" :to="{ name: 'view_home', params: {} }"></v-list-item>
-            <v-list-item prepend-icon="fas fa-calendar-alt" title="Mealplan" :to="{ name: 'view_mealplan', params: {} }"></v-list-item>
-            <v-list-item prepend-icon="fas fa-shopping-cart" title="Shopping" :to="{ name: 'view_shopping', params: {} }"></v-list-item>
-            <v-list-item prepend-icon="fas fa-bars" title="More" :to="{ name: 'view_books', params: {} }"></v-list-item>
-            <v-list-item prepend-icon="fas fa-bars" title="Test" :to="{ name: 'view_test', params: {} }"></v-list-item>
-            <!-- TODO link -->
-        </v-navigation-drawer>
+<!--        <v-navigation-drawer v-if="lgAndUp">-->
+<!--            <v-list-item title="My Application" subtitle="Vuetify"></v-list-item>-->
+<!--            <v-divider></v-divider>-->
+<!--            <v-list-item prepend-icon="fas fa-book" title="Home" :to="{ name: 'view_home', params: {} }"></v-list-item>-->
+<!--            <v-list-item prepend-icon="fas fa-calendar-alt" title="Mealplan" :to="{ name: 'view_mealplan', params: {} }"></v-list-item>-->
+<!--            <v-list-item prepend-icon="fas fa-shopping-cart" title="Shopping" :to="{ name: 'view_shopping', params: {} }"></v-list-item>-->
+<!--            <v-list-item prepend-icon="fas fa-bars" title="More" :to="{ name: 'view_books', params: {} }"></v-list-item>-->
+<!--            <v-list-item prepend-icon="fas fa-bars" title="Test" :to="{ name: 'view_test', params: {} }"></v-list-item>-->
+<!--            &lt;!&ndash; TODO link &ndash;&gt;-->
+<!--        </v-navigation-drawer>-->
 
         <v-bottom-navigation grow v-if="!lgAndUp">
             <v-btn value="recent" :to="{ name: 'view_home', params: {} }">
diff --git a/vue3/src/components/display/HorizontalMealPlanWindow.vue b/vue3/src/components/display/HorizontalMealPlanWindow.vue
index 355b2878a..36e660d53 100644
--- a/vue3/src/components/display/HorizontalMealPlanWindow.vue
+++ b/vue3/src/components/display/HorizontalMealPlanWindow.vue
@@ -1,9 +1,9 @@
 <template>
-    <v-row justify="space-between">
-        <v-col>
-            <h2><i class="fas fa-calendar-week fa-fw"></i> Meal Plans</h2>
-        </v-col>
-    </v-row>
+<!--    <v-row justify="space-between">-->
+<!--        <v-col>-->
+<!--            <h2><i class="fas fa-calendar-week fa-fw"></i> Meal Plans</h2>-->
+<!--        </v-col>-->
+<!--    </v-row>-->
 
     <v-row class="mt-0" v-if="mealPlanWindows.length > 0">
         <v-col>
diff --git a/vue3/src/components/display/HorizontalRecipeWindow.vue b/vue3/src/components/display/HorizontalRecipeWindow.vue
index cfd0d2657..612aa1233 100644
--- a/vue3/src/components/display/HorizontalRecipeWindow.vue
+++ b/vue3/src/components/display/HorizontalRecipeWindow.vue
@@ -1,7 +1,7 @@
 <template>
     <v-row justify="space-between">
         <v-col>
-            <h2><i v-if="icon != 'undefined'" :class="icon + ' fa-fw'"></i> {{ title }}</h2>
+            <h4><i v-if="icon != 'undefined'" :class="icon + ' fa-fw'"></i> {{ title }}</h4>
         </v-col>
     </v-row>
 
@@ -11,7 +11,7 @@
                 <v-window-item v-for="w in recipeWindows" class="pt-1 pb-1">
                     <v-row>
                         <v-col v-for="r in w" :key="r.id">
-                            <recipe-card :recipe="r" :show_description="true" :show_keywords="true" style="height: 25vh"></recipe-card>
+                            <recipe-card :recipe="r" :show_description="true" :show_keywords="true" style="height: 20vh"></recipe-card>
                         </v-col>
                     </v-row>
                 </v-window-item>
diff --git a/vue3/src/components/display/RecipeCard.vue b/vue3/src/components/display/RecipeCard.vue
index 7ec627294..30939e366 100644
--- a/vue3/src/components/display/RecipeCard.vue
+++ b/vue3/src/components/display/RecipeCard.vue
@@ -10,7 +10,7 @@
             >
                 <template v-slot:activator="{ props }">
                     <recipe-image
-                        height="60%"
+                        height="70%"
                         width="100%"
                         :recipe="componentProps.recipe"
                     >
@@ -31,17 +31,17 @@
                 <!-- TODO decide if context menu should be re-added (maybe make it a setting) -->
                 <!-- <recipe-context-menu class="float-end" :recipe="recipe"></recipe-context-menu>-->
             </v-card-item>
-            <v-card-text>
-                <div class="text-rows-2">
-                    <keywords-component variant="outlined" :keywords="componentProps.recipe.keywords">
-                        <template #prepend>
-                            <v-chip class="mb-1 me-1" size="x-small" prepend-icon="far fa-clock" label variant="outlined" v-if="componentProps.recipe.workingTime != undefined && componentProps.recipe.workingTime > 0">
-                                {{ recipe.workingTime! + recipe.waitingTime! }}
-                            </v-chip>
-                        </template>
-                    </keywords-component>
-                </div>
-            </v-card-text>
+<!--            <v-card-text>-->
+<!--                <div class="text-rows-2">-->
+<!--                    <keywords-component variant="outlined" :keywords="componentProps.recipe.keywords">-->
+<!--                        <template #prepend>-->
+<!--                            <v-chip class="mb-1 me-1" size="x-small" prepend-icon="far fa-clock" label variant="outlined" v-if="componentProps.recipe.workingTime != undefined && componentProps.recipe.workingTime > 0">-->
+<!--                                {{ recipe.workingTime! + recipe.waitingTime! }}-->
+<!--                            </v-chip>-->
+<!--                        </template>-->
+<!--                    </keywords-component>-->
+<!--                </div>-->
+<!--            </v-card-text>-->
 
         </v-card>
     </template>
diff --git a/vue3/src/pages/StartPage.vue b/vue3/src/pages/StartPage.vue
index 5cf3db8c4..66897b5bf 100644
--- a/vue3/src/pages/StartPage.vue
+++ b/vue3/src/pages/StartPage.vue
@@ -1,79 +1,86 @@
 <template>
-  <v-container>
+    <v-container>
 
-    <horizontal-meal-plan-window></horizontal-meal-plan-window>
+        <v-row >
+            <v-col class="pb-0" cols="6" offset="3">
+                <v-text-field variant="solo" :placeholder="$t('Search') + ' (CTRL + K)'" ></v-text-field>
+            </v-col>
+        </v-row>
 
-    <!--TODO ideas for "start page": new recipes, meal plan, "last year/month/cooked long ago", high rated, random keyword -->
-    <!--TODO if nothing comes up for a category, hide the element, probably move fetch logic into component -->
-    <horizontal-recipe-scroller title="New Recipes" :skeletons="4" :recipes="new_recipes" icon="fas fa-calendar-alt"></horizontal-recipe-scroller>
-    <horizontal-recipe-scroller title="Top Rated" :skeletons="2" :recipes="high_rated_recipes" icon="fas fa-star"></horizontal-recipe-scroller>
-    <horizontal-recipe-scroller
-      :title="random_keyword.label"
-      :skeletons="4"
-      :recipes="random_keyword_recipes"
-      icon="fas fa-tags"
-      v-if="random_keyword.label"
-    ></horizontal-recipe-scroller>
-  </v-container>
+
+        <horizontal-meal-plan-window></horizontal-meal-plan-window>
+
+        <!--TODO ideas for "start page": new recipes, meal plan, "last year/month/cooked long ago", high rated, random keyword -->
+        <!--TODO if nothing comes up for a category, hide the element, probably move fetch logic into component -->
+        <horizontal-recipe-scroller title="New Recipes" :skeletons="4" :recipes="new_recipes" icon="fas fa-calendar-alt"></horizontal-recipe-scroller>
+        <horizontal-recipe-scroller title="Top Rated" :skeletons="2" :recipes="high_rated_recipes" icon="fas fa-star"></horizontal-recipe-scroller>
+        <horizontal-recipe-scroller
+            :title="random_keyword.label"
+            :skeletons="4"
+            :recipes="random_keyword_recipes"
+            icon="fas fa-tags"
+            v-if="random_keyword.label"
+        ></horizontal-recipe-scroller>
+    </v-container>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue"
-import { ApiApi, Keyword, Recipe, RecipeOverview } from "@/openapi"
+import {defineComponent, ref} from "vue"
+import {ApiApi, Keyword, Recipe, RecipeOverview} from "@/openapi"
 import KeywordsComponent from "@/components/display/KeywordsBar.vue"
 import RecipeCardComponent from "@/components/display/RecipeCard.vue"
 import GlobalSearchDialog from "@/components/inputs/GlobalSearchDialog.vue"
 import RecipeCard from "@/components/display/RecipeCard.vue"
 import HorizontalRecipeScroller from "@/components/display/HorizontalRecipeWindow.vue"
-import { DateTime } from "luxon"
-import { useMealPlanStore } from "@/stores/MealPlanStore"
+import {DateTime} from "luxon"
+import {useMealPlanStore} from "@/stores/MealPlanStore"
 import HorizontalMealPlanWindow from "@/components/display/HorizontalMealPlanWindow.vue"
 import MealPlanDialog from "@/components/dialogs/MealPlanDialog.vue"
 import ModelSelect from "@/components/inputs/ModelSelect.vue"
 
 export default defineComponent({
-  name: "StartPage",
-  components: { ModelSelect, MealPlanDialog, HorizontalMealPlanWindow, HorizontalRecipeScroller, RecipeCard, GlobalSearchDialog, RecipeCardComponent, KeywordsComponent },
-  computed: {},
-  data() {
-    return {
-      recipes: [] as Recipe[],
-      items: Array.from({ length: 50 }, (k, v) => v + 1),
+    name: "StartPage",
+    components: {ModelSelect, MealPlanDialog, HorizontalMealPlanWindow, HorizontalRecipeScroller, RecipeCard, GlobalSearchDialog, RecipeCardComponent, KeywordsComponent},
+    computed: {},
+    data() {
+        return {
+            recipes: [] as Recipe[],
+            items: Array.from({length: 50}, (k, v) => v + 1),
 
-      new_recipes: [] as RecipeOverview[],
-      high_rated_recipes: [] as RecipeOverview[],
-      random_keyword: {} as Keyword,
-      random_keyword_recipes: [] as RecipeOverview[],
-    }
-  },
-  mounted() {
-    const api = new ApiApi()
+            new_recipes: [] as RecipeOverview[],
+            high_rated_recipes: [] as RecipeOverview[],
+            random_keyword: {} as Keyword,
+            random_keyword_recipes: [] as RecipeOverview[],
+        }
+    },
+    mounted() {
+        const api = new ApiApi()
 
-    api.apiRecipeList({ _new: "true", pageSize: 16 }).then((r) => {
-      if (r.results != undefined) {
-        // TODO openapi generator makes arrays nullable for some reason
-        this.new_recipes = r.results
-      }
-    })
-
-    api.apiRecipeList({ rating: 4, pageSize: 16 }).then((r) => {
-      if (r.results != undefined) {
-        this.high_rated_recipes = r.results
-      }
-    })
-
-    api.apiKeywordList({ random: "true", limit: "1" }).then((r) => {
-      if (r.results != undefined && r.results.length > 0) {
-        this.random_keyword = r.results[0]
-        api.apiRecipeList({ keywords: r.results[0].id }).then((r) => {
-          if (r.results != undefined) {
-            this.random_keyword_recipes = r.results
-          }
+        api.apiRecipeList({_new: "true", pageSize: 16}).then((r) => {
+            if (r.results != undefined) {
+                // TODO openapi generator makes arrays nullable for some reason
+                this.new_recipes = r.results
+            }
         })
-      }
-    })
-  },
-  methods: {},
+
+        api.apiRecipeList({rating: 4, pageSize: 16}).then((r) => {
+            if (r.results != undefined) {
+                this.high_rated_recipes = r.results
+            }
+        })
+
+        api.apiKeywordList({random: "true", limit: "1"}).then((r) => {
+            if (r.results != undefined && r.results.length > 0) {
+                this.random_keyword = r.results[0]
+                api.apiRecipeList({keywords: r.results[0].id}).then((r) => {
+                    if (r.results != undefined) {
+                        this.random_keyword_recipes = r.results
+                    }
+                })
+            }
+        })
+    },
+    methods: {},
 })
 </script>
 
diff --git a/vue3/src/utils/breakpoint_utils.ts b/vue3/src/utils/breakpoint_utils.ts
index be3621bc6..933859df9 100644
--- a/vue3/src/utils/breakpoint_utils.ts
+++ b/vue3/src/utils/breakpoint_utils.ts
@@ -11,13 +11,13 @@ export function homePageCols(breakpoint: string){
             return 4
         }
         case "lg": {
-            return 5
+            return 4
         }
         case "xl": {
-            return 6
+            return 5
         }
         case "xxl": {
-            return 7
+            return 6
         }
         default: {
             return 1