lots of visual improvements

vue3/src/components/display/IngredientsTableRow.vue

@@ -8,12 +8,12 @@
             <td><span v-if="ingredient.unit != null">{{ ingredient.unit.name }}</span></td>
             <td><span v-if="ingredient.food != null">{{ ingredient.food.name }}</span></td>
             <td v-if="showNotes">
-                <v-icon class="far fa-comment" v-if="ingredient.note != ''" @click="show_tooltip = !show_tooltip">
+                <v-icon class="far fa-comment float-right" v-if="ingredient.note != ''" @click="show_tooltip = !show_tooltip">
                     <v-tooltip v-model="show_tooltip" activator="parent" location="start">{{ ingredient.note }}</v-tooltip>
                 </v-icon>
             </td>
             <td v-if="draggable">
-                <i class="fas fa-grip-lines drag-handle"></i>
+                <i class="fas fa-grip-lines drag-handle cursor-move"></i>
             </td>
         </template>
 

vue3/src/components/display/KeywordsBar.vue

@@ -1,7 +1,7 @@
 <template>
-    <template v-if="keywords">
-        <v-chip color="info" size="x-small" v-for="k in keywords"> {{ k.label }}</v-chip>
-    </template>
+    <div v-if="keywords">
+        <v-chip class="ms-1" :color="color" :size="size" :variant="variant" v-for="k in keywords"> {{ k.label }}</v-chip>
+    </div>
 
 </template>
 
@@ -15,8 +15,12 @@ export default {
     mixins: [],
     props: {
         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'},
+    },
+    computed: {
     },
-    computed: {},
     methods: {}
 }
 </script>

vue3/src/components/display/RecipeCard.vue

@@ -14,11 +14,11 @@
                            :src="recipeImageUrl"
                     >
                         <v-chip size="x-small" prepend-icon="fa fa-clock" label color="light" variant="elevated"
-                                class="float-start ms-1 mt-1">
+                                class="float-start ms-1 mt-1" v-if="recipe.workingTime != undefined && recipe.workingTime > 0">
                             {{ recipe.workingTime }}
                         </v-chip>
                         <v-chip size="x-small" prepend-icon="fa fa-pause" label color="secondary" variant="elevated"
-                                class="float-start ms-1 mt-1">
+                                class="float-start ms-1 mt-1" v-if="recipe.waitingTime != undefined && recipe.waitingTime > 0">
                             {{ recipe.waitingTime }}
                         </v-chip>
                     </v-img>

vue3/src/components/display/RecipeView.vue

@@ -1,28 +1,34 @@
 <template>
 
-    <v-card>
-        <v-card-title>{{ recipe.name }}
-            <recipe-context-menu :recipe="recipe"></recipe-context-menu>
-        </v-card-title>
 
-        <v-img max-height="25vh" cover lazy :src="recipe.image">
-            <!-- TODO placement in image -->
-            <KeywordsBar :keywords="recipe?.keywords"></KeywordsBar>
+    <v-card class="mt-md-4">
 
-            <v-chip size="small" color="primary" label>
-                <v-icon icon="fas fa-calendar" class="mr-2"></v-icon>
-                {{ recipe.lastCooked }}
-            </v-chip>
-
-            <v-rating v-model="recipe.rating" color="tandoor"></v-rating>
+        <v-img max-height="25vh" cover lazy :src="recipe.image" v-if="recipe.image != undefined" class="align-end">
+            <KeywordsComponent variant="flat" class="ms-1 mb-2" :keywords="recipe.keywords"></KeywordsComponent>
         </v-img>
 
+        <v-card>
+            <v-sheet class="d-flex align-center">
+                <span class="ps-2 text-h5 text-truncate flex-grow-1">{{ recipe.name }}</span>
+                <recipe-context-menu :recipe="recipe"></recipe-context-menu>
+            </v-sheet>
+        </v-card>
 
+<!--        <v-card class="mt-1">-->
+<!--            <v-sheet class="d-flex ">-->
+<!--                <span class="ps-2 text-h5 flex-grow-1">{{ recipe.name }}</span>-->
+<!--                <recipe-context-menu :recipe="recipe"></recipe-context-menu>-->
+<!--            </v-sheet>-->
+<!--        </v-card>-->
+
+    </v-card>
+
+    <v-card class="mt-1">
         <v-container>
             <v-row class="text-center text-body-2">
                 <v-col class="pt-1 pb-1">
                     <i class="fas fa-cogs"></i> {{ recipe.workingTime }} min<br/>
-                    <v-label>Working Time</v-label>
+                    <div class="text-grey">Working Time</div>
                 </v-col>
                 <v-col class="pt-1 pb-1">
                     <div><i class="fas fa-hourglass-half"></i> {{ recipe.waitingTime }} min</div>
@@ -38,15 +44,12 @@
                 </v-col>
             </v-row>
         </v-container>
-
-
     </v-card>
 
-    <v-card class="mt-1">
+    <v-card class="mt-1" v-if="recipe.steps.length > 1">
         <StepsOverview :steps="recipe.steps"></StepsOverview>
     </v-card>
 
-
     <v-card class="mt-1" v-for="s in recipe.steps" :key="s.id">
         <Step :step="s" :ingredient_factor="ingredient_factor"></Step>
     </v-card>
@@ -66,10 +69,11 @@ import StepsOverview from "@/components/display/StepsOverview.vue";
 import Step from "@/components/display/Step.vue";
 import RecipeActivity from "@/components/display/RecipeActivity.vue";
 import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
+import KeywordsComponent from "@/components/display/KeywordsBar.vue";
 
 export default defineComponent({
     name: "RecipeView",
-    components: {RecipeContextMenu, RecipeActivity, Step, StepsOverview, IngredientsTable, NumberScalerDialog, KeywordsBar},
+    components: {KeywordsComponent, RecipeContextMenu, RecipeActivity, Step, StepsOverview, IngredientsTable, NumberScalerDialog, KeywordsBar},
     computed: {
         ingredient_factor: function () {
             return this.servings / this.recipe.servings
@@ -82,7 +86,7 @@ export default defineComponent({
     },
     watch: {
         'recipe.servings': function () {
-            if (this.recipe.servings){
+            if (this.recipe.servings) {
                 this.servings = this.recipe.servings
             }
         }

vue3/src/components/display/StepsOverview.vue

@@ -1,6 +1,7 @@
 <template>
     <v-expansion-panels>
-        <v-expansion-panel title="Steps Overview">
+        <v-expansion-panel>
+            <v-expansion-panel-title><i class="far fa-list-alt fa-fw me-2"></i> Steps Overview</v-expansion-panel-title>
             <v-expansion-panel-text>
                 <v-container>
                     <v-row v-for="(s, i) in steps">

vue3/src/components/inputs/RecipeContextMenu.vue

@@ -2,7 +2,7 @@
 
     <v-menu open-on-hover open-delay="0" :open-on-click="true">
         <template v-slot:activator="{ props }">
-            <v-btn color="primary" v-bind="props" icon="fas fa-ellipsis-v" variant="plain"></v-btn>
+            <v-btn v-bind="props" icon="fas fa-ellipsis-v" variant="plain"></v-btn>
         </template>
 
         <v-list>

vue3/src/pages/RecipeViewPage.vue

@@ -1,5 +1,8 @@
 <template>
-    <RecipeView :recipe="recipe"></RecipeView>
+    <v-container class="ps-0 pe-0 pt-0">
+        <RecipeView :recipe="recipe"></RecipeView>
+    </v-container>
+
 </template>
 
 <script lang="ts">