From 7a2b3c2d2ed1eb49423102e10ef0048c952b18b4 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Mon, 23 Dec 2024 12:28:42 +0100
Subject: [PATCH] some styling stuff

---
 vue3/src/apps/tandoor/Tandoor.vue             |  2 +-
 .../display/HorizontalMealPlanWindow.vue      |  2 +-
 .../display/HorizontalRecipeWindow.vue        |  4 ++--
 vue3/src/components/display/KeywordsBar.vue   | 16 +++++++++++++---
 vue3/src/components/display/RecipeCard.vue    | 19 ++++++++++++++++---
 .../components/inputs/GlobalSearchDialog.vue  |  6 ++++--
 6 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/vue3/src/apps/tandoor/Tandoor.vue b/vue3/src/apps/tandoor/Tandoor.vue
index 80cadca71..21d48e423 100644
--- a/vue3/src/apps/tandoor/Tandoor.vue
+++ b/vue3/src/apps/tandoor/Tandoor.vue
@@ -7,7 +7,7 @@
             <v-spacer></v-spacer>
             <global-search-dialog></global-search-dialog>
             <v-btn icon="$add">
-                <v-icon icon="$add"></v-icon>
+                <v-icon icon="$add" class="fa-fw"></v-icon>
                 <v-menu activator="parent">
                     <v-list>
                         <v-list-item prepend-icon="$add" :to="{ name: 'ModelEditPage', params: {model: 'recipe'} }">{{ $t('Create Recipe') }}</v-list-item>
diff --git a/vue3/src/components/display/HorizontalMealPlanWindow.vue b/vue3/src/components/display/HorizontalMealPlanWindow.vue
index 9de1ef067..dac65f569 100644
--- a/vue3/src/components/display/HorizontalMealPlanWindow.vue
+++ b/vue3/src/components/display/HorizontalMealPlanWindow.vue
@@ -28,7 +28,7 @@
 
                                 </v-list-item>
                                 <v-divider v-if="mealPlanGridItem.plan_entries.length > 0"></v-divider>
-                                <v-list-item v-for="p in mealPlanGridItem.plan_entries">
+                                <v-list-item v-for="p in mealPlanGridItem.plan_entries" link>
                                     <template #prepend>
                                         <v-avatar :image="p.recipe.image" v-if="p.recipe?.image"></v-avatar>
                                         <v-avatar image="../../assets/recipe_no_image.svg" v-else></v-avatar>
diff --git a/vue3/src/components/display/HorizontalRecipeWindow.vue b/vue3/src/components/display/HorizontalRecipeWindow.vue
index a6dcfa52e..0b7a7a1de 100644
--- a/vue3/src/components/display/HorizontalRecipeWindow.vue
+++ b/vue3/src/components/display/HorizontalRecipeWindow.vue
@@ -10,8 +10,8 @@
             <v-col>
                 <v-window show-arrows>
                     <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">
+                        <v-row dense>
+                            <v-col class="pr-0 pl-0" v-for="r in w" :key="r.id">
                                 <recipe-card :recipe="r" :show_description="true" :show_keywords="true" style="height: 20vh"></recipe-card>
                             </v-col>
                         </v-row>
diff --git a/vue3/src/components/display/KeywordsBar.vue b/vue3/src/components/display/KeywordsBar.vue
index b9e56cfda..1dc7ed7cb 100644
--- a/vue3/src/components/display/KeywordsBar.vue
+++ b/vue3/src/components/display/KeywordsBar.vue
@@ -2,7 +2,7 @@
     <div v-if="props.keywords">
         <slot name="prepend"></slot>
 
-        <v-chip class="me-1 mb-1" :label="props.label" :color="props.color" :size="props.size" :variant="props.variant" v-for="k in props.keywords"> {{ k.label }}</v-chip>
+        <v-chip class="me-1 mb-1" :label="props.label" :color="props.color" :size="props.size" :variant="props.variant" v-for="k in keywords"> {{ k.label }}</v-chip>
 
         <slot name="append"></slot>
     </div>
@@ -12,14 +12,24 @@
 <script setup lang="ts">
 
 import {Keyword, KeywordLabel} from "@/openapi";
-import {PropType} from "vue";
+import {computed, PropType} from "vue";
 
 const props = defineProps({
     keywords: Array as PropType<Array<Keyword> | Array<KeywordLabel> | undefined>,
     size: {type: String, default: 'x-small'},
     color: {type: String, default: ''},
     variant: {type: String as PropType<NonNullable<"tonal" | "flat" | "text" | "elevated" | "outlined" | "plain"> | undefined>, default: 'tonal'},
-    label: {type: Boolean, default: true}
+    label: {type: Boolean, default: true},
+    // maximum number of keywords, 0 for all
+    maxKeywords : {type: Number, default: 0},
+})
+
+const keywords = computed(() => {
+    if (props.maxKeywords > 0){
+        return props.keywords?.slice(0, props.maxKeywords)
+    } else {
+        return props.keywords
+    }
 })
 
 </script>
diff --git a/vue3/src/components/display/RecipeCard.vue b/vue3/src/components/display/RecipeCard.vue
index ffee78de8..d880810dc 100644
--- a/vue3/src/components/display/RecipeCard.vue
+++ b/vue3/src/components/display/RecipeCard.vue
@@ -1,12 +1,14 @@
 <template>
     <template v-if="!props.loading">
 
-        <recipe-image :to="`/recipe/${props.recipe.id}`" :style="{'height': props.height}" :recipe="props.recipe" rounded="lg" class="mr-3 ml-3">
+        <router-link :to="{name: 'view_recipe', params: {id: props.recipe.id}}">
+            <recipe-image :style="{'height': props.height}" :recipe="props.recipe" rounded="lg" class="mr-3 ml-3">
 
-        </recipe-image>
+            </recipe-image>
+        </router-link>
         <div class="ml-3">
             <div class="d-flex ">
-                <div class="flex-grow-1 ">
+                <div class="flex-grow-1 cursor-pointer" @click="router.push({name: 'view_recipe', params: {id: props.recipe.id}})">
                     <p class="font-weight-bold mt-2">{{ props.recipe.name }}</p>
                 </div>
                 <div class="mt-1">
@@ -15,6 +17,14 @@
                 </div>
             </div>
             <!--            <p class="text-disabled">{{ props.recipe.createdBy.displayName}}</p>-->
+            <keywords-component variant="outlined" :keywords="props.recipe.keywords" :max-keywords="3">
+                <template #prepend>
+                    <v-chip class="mb-1 me-1" size="x-small" prepend-icon="far fa-clock" label variant="outlined"
+                            v-if="props.recipe.workingTime != undefined && props.recipe.workingTime > 0">
+                        {{ recipe.workingTime! + recipe.waitingTime! }}
+                    </v-chip>
+                </template>
+            </keywords-component>
         </div>
 
 
@@ -85,6 +95,7 @@ import {Recipe, RecipeOverview} from "@/openapi";
 
 import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
 import RecipeImage from "@/components/display/RecipeImage.vue";
+import {useRouter} from "vue-router";
 
 const props = defineProps({
     recipe: {type: {} as PropType<Recipe | RecipeOverview>, required: true,},
@@ -94,6 +105,8 @@ const props = defineProps({
     height: {type: String, required: false, default: '15vh'},
 })
 
+const router = useRouter()
+
 </script>
 
 <style scoped>
diff --git a/vue3/src/components/inputs/GlobalSearchDialog.vue b/vue3/src/components/inputs/GlobalSearchDialog.vue
index 20a6df68b..5aba4dbba 100644
--- a/vue3/src/components/inputs/GlobalSearchDialog.vue
+++ b/vue3/src/components/inputs/GlobalSearchDialog.vue
@@ -1,7 +1,7 @@
 <template>
     <slot name="activator">
-        <v-btn @click="dialog = true" variant="plain" density="default">
-            <i class="fas fa-search mr-1"></i>
+        <v-btn @click="dialog = true" variant="plain" density="default" :icon="mobile">
+            <v-icon icon="fa-solid fa-search" class="mr-1 fa-fw"></v-icon>
             <span class="d-none d-sm-block">{{$t('Search')}}</span>
             <v-chip size="x-small" variant="tonal" class="d-none d-md-flex ml-1" label>{{$t('Ctrl+K')}}</v-chip>
         </v-btn>
@@ -62,8 +62,10 @@ import {computed, defineComponent, onMounted, ref, watch} from 'vue'
 import {SearchResult} from "@/types/SearchTypes";
 import {ApiApi, Recipe, RecipeFlat} from "@/openapi";
 import {useRouter} from "vue-router";
+import {useDisplay} from "vuetify";
 
 const router = useRouter()
+const {mobile} = useDisplay()
 
 const dialog = ref(false)
 const recipes = ref([] as Recipe[])