basics of v2 search working

vue/src/apps/RecipeSearchView/RecipeSearchView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" style="margin-bottom: 4vh">
 
     <div class="row">
       <div class="col-xl-2 d-none d-xl-block">
@@ -10,19 +10,18 @@
 
         <div class="row">
           <div class="col col-md-12">
-            <b-input class="form-control" v-model="search_input" @keyup="refreshData"></b-input>
+            <b-input class="form-control" v-model="search_input" @keyup="refreshData" v-bind:placeholder="$t('Search')"></b-input>
           </div>
         </div>
 
-        <div class="row">
+        <div class="row" style="margin-top: 2vh">
           <div class="col col-md-12">
-            <b-card-group deck>
-              <recipe-card style="max-width: 15vw; height: 30vh" v-for="r in recipes" v-bind:key="r.id" :recipe="r"></recipe-card>
-            </b-card-group>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 1rem;">
+              <recipe-card v-for="r in recipes" v-bind:key="r.id" :recipe="r"></recipe-card>
 
+            </div>
           </div>
         </div>
-
       </div>
       <div class="col-xl-2 d-none d-xl-block">
 
@@ -68,7 +67,7 @@ export default {
     refreshData: function () {
       let apiClient = new ApiApiFactory()
 
-      apiClient.listRecipes({query: {query: this.search_input, limit: 10}}).then(result => {
+      apiClient.listRecipes({query: {query: this.search_input, limit: 20}}).then(result => {
         this.recipes = result.data
       })
     }

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>