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,13 +1,14 @@
 <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%"
+                   height="60%"
                    :src="recipe.image"
             ></v-img>
             <v-img v-else src="../../assets/recipe_no_image.svg" cover
-            height="50%"></v-img>
+                   height="60%"></v-img>
 
             <v-card-item>
                 <v-card-title>{{ recipe.name }}</v-card-title>
@@ -38,6 +39,11 @@
 
         </v-card>
     </template>
+    <template v-else>
+        <v-skeleton-loader :elevation="3" type="image, heading, subtitle" v-if="loading" ></v-skeleton-loader>
+    </template>
+
+</template>
 
 <script lang="ts">
 import {defineComponent, PropType} from 'vue'
@@ -49,8 +55,10 @@ export default defineComponent({
     components: {KeywordsComponent},
     props: {
         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>