basics of v2 search working

vue/src/components/Keywords.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-if="recipe.keywords.length > 0">
       <small :key="k.id" v-for="k in recipe.keywords" style="padding: 2px">
-        {{k.icon}} {{k.name}}
+        <b-badge pill variant="light">{{k.label}}</b-badge>
       </small>
     </div>
 </template>

vue/src/components/RecipeCard.vue

@@ -1,31 +1,52 @@
 <template>
-  <div>
-    <div>
-      <b-card no-body>
 
-        <b-card-img-lazy :src=recipe.image v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
 
-        <b-card-body :title=recipe.name>
-          <recipe-context-menu :recipe="recipe"></recipe-context-menu>
-          <b-card-text>
-            {{ recipe.description }}
-          </b-card-text>
-        </b-card-body>
+  <b-card no-body>
+    <b-card-img-lazy style="height: 15vh; object-fit: cover" :src=recipe_image v-bind:alt="$t('Recipe_Image')"
+                     top></b-card-img-lazy>
+
+    <div class="card-img-overlay h-100 d-flex flex-column justify-content-right"
+           style="float:right; text-align: right; padding-top: 10px; padding-right: 5px">
+        <recipe-context-menu :recipe="recipe" style="float:right"></recipe-context-menu>
+      </div>
+
+    <b-card-body :title=recipe.name title-tag="h5">
+
+      <b-card-text style="text-overflow: ellipsis">
+        {{ recipe.description }}
+        <keywords :recipe="recipe" style="margin-top: 4px"></keywords>
+      </b-card-text>
+
+
+    </b-card-body>
+
+  </b-card>
 
-      </b-card>
 
-    </div>
-  </div>
 </template>
 
 <script>
 import RecipeContextMenu from "@/components/RecipeContextMenu";
+import Keywords from "@/components/Keywords";
+
 export default {
   name: "RecipeCard",
-  components: {RecipeContextMenu},
+  components: {Keywords, RecipeContextMenu},
   props: {
     recipe: Object,
   },
+  data() {
+    return {
+      recipe_image: '',
+    }
+  },
+  mounted() {
+    if (this.recipe.image === null) {
+      this.recipe_image = window.IMAGE_PLACEHOLDER
+    } else {
+      this.recipe_image = this.recipe.image
+    }
+  }
 }
 </script>