recipe card

vue3/src/components/display/HorizontalRecipeScroller.vue

@@ -8,10 +8,10 @@
     <v-row v-if="recipeWindows.length > 0">
         <v-col>
             <v-window show-arrows>
-                <v-window-item v-for="w in recipeWindows">
+                <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: 20vh"></recipe-card>
+                            <recipe-card :recipe="r" :show_description="true" :show_keywords="true" style="height: 25vh"></recipe-card>
                         </v-col>
                     </v-row>
                 </v-window-item>
@@ -57,7 +57,7 @@ const props = defineProps(
 const {title, recipes} = toRefs(props)
 
 let numberOfCols = computed(() => {
-    return mdAndUp.value ? 4 : 2
+    return mdAndUp.value ? 5 : 2
 })
 
 type CustomWindow = {

vue3/src/components/display/RecipeCard.vue

@@ -1,42 +1,48 @@
 <template>
-    <v-card :to="`/recipe/${recipe.id}`">
+    <template v-if="!loading">
+        <v-card :to="`/recipe/${recipe.id}`" :style="{'height': height}">
 
-        <v-img v-if="recipe.image != null"
-            cover
-            height="50%"
-            :src="recipe.image"
-        ></v-img>
-        <v-img v-else src="../../assets/recipe_no_image.svg" cover
-            height="50%"></v-img>
+            <v-img v-if="recipe.image != null"
+                   cover
+                   height="60%"
+                   :src="recipe.image"
+            ></v-img>
+            <v-img v-else src="../../assets/recipe_no_image.svg" cover
+                   height="60%"></v-img>
 
-        <v-card-item>
-            <v-card-title>{{ recipe.name }}</v-card-title>
+            <v-card-item>
+                <v-card-title>{{ recipe.name }}</v-card-title>
 
-            <v-card-subtitle v-if="show_keywords">
-                <KeywordsComponent :keywords="recipe.keywords"></KeywordsComponent>
-            </v-card-subtitle>
-        </v-card-item>
+                <v-card-subtitle v-if="show_keywords">
+                    <KeywordsComponent :keywords="recipe.keywords"></KeywordsComponent>
+                </v-card-subtitle>
+            </v-card-item>
 
-        <v-card-text v-if="show_description">
-            <v-row align="center" class="mx-0" v-if="recipe.rating">
-                <v-rating
-                    :model-value="recipe.rating"
-                    color="amber"
-                    density="compact"
-                    half-increments
-                    readonly
-                    size="small"
-                ></v-rating>
+            <v-card-text v-if="show_description">
+                <v-row align="center" class="mx-0" v-if="recipe.rating">
+                    <v-rating
+                        :model-value="recipe.rating"
+                        color="amber"
+                        density="compact"
+                        half-increments
+                        readonly
+                        size="small"
+                    ></v-rating>
 
-                <div class="text-grey ">
-                    {{ recipe.rating }}
-                </div>
-            </v-row>
+                    <div class="text-grey ">
+                        {{ recipe.rating }}
+                    </div>
+                </v-row>
 
-            <div>{{ recipe.description }}</div>
-        </v-card-text>
+                <div>{{ recipe.description }}</div>
+            </v-card-text>
+
+        </v-card>
+    </template>
+    <template v-else>
+        <v-skeleton-loader :elevation="3" type="image, heading, subtitle" v-if="loading" ></v-skeleton-loader>
+    </template>
 
-    </v-card>
 </template>
 
 <script lang="ts">
@@ -48,9 +54,11 @@ export default defineComponent({
     name: "RecipeCard",
     components: {KeywordsComponent},
     props: {
-        recipe: {type: {} as PropType<Recipe|RecipeOverview>, required: true,},
+        recipe: {type: {} as PropType<Recipe | RecipeOverview>, required: true,},
+        loading: {type: Boolean, required: false},
         show_keywords: {type: Boolean, required: false},
         show_description: {type: Boolean, required: false},
+        height: {type: String, required: false, default: '25vh'},
     }
 })
 </script>

vue3/src/components/inputs/ModelSelect.vue

@@ -1,6 +1,6 @@
 <template>
     <v-input>
-
+        <!--TODO Problems: 1. behind other cards when those are underneath the element, making card overflow visible breaks cards -->
         <VueMultiselect
             :id="id"
             v-model="selected_items"

vue3/src/pages/MealPlanPage.vue

@@ -16,6 +16,15 @@
                 </v-card>
             </v-col>
         </v-row>
+
+        <v-row>
+            <v-col >
+                <recipe-card :recipe="recipe" ></recipe-card>
+            </v-col>
+            <v-col>
+                <recipe-card :recipe="recipe_not_loaded" :loading="true"></recipe-card>
+            </v-col>
+        </v-row>
     </v-container>
 
 
@@ -24,14 +33,28 @@
 <script lang="ts">
 import {defineComponent} from 'vue'
 import ModelSelect from "@/components/inputs/ModelSelect.vue";
+import RecipeCard from "@/components/display/RecipeCard.vue";
+import {ApiApi, Recipe, RecipeOverview} from "@/openapi";
 
 
 export default defineComponent({
     name: "MealPlanPage",
-    components: {ModelSelect},
+    components: {ModelSelect, RecipeCard},
     data() {
-        return {}
-    }
+        return {
+            recipe: {} as RecipeOverview,
+            recipe_not_loaded: {} as RecipeOverview,
+        }
+    },
+    mounted() {
+        const api = new ApiApi()
+        api.apiRecipeList({pageSize: 1}).then(r => {
+            if(r.results){
+                this.recipe = r.results[0]
+            }
+        })
+    },
+
 })
 </script>
 

vue3/src/pages/RecipeSearchPage.vue

@@ -47,6 +47,7 @@
 
 
         <!--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"></horizontal-recipe-scroller>