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"