quite nice

.idea/dictionaries/vaben.xml

@@ -0,0 +1,8 @@
+<component name="ProjectDictionaryState">
+  <dictionary name="vaben">
+    <words>
+      <w>pinia</w>
+      <w>selfhosted</w>
+    </words>
+  </dictionary>
+</component>

vue/src/apps/RecipeSearchView/RecipeSearchView.vue

@@ -832,7 +832,7 @@
                     <div class="row">
                         <div class="col col-md-12">
                             <div
-                                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 0.4rem">
+                                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 0.6rem; grid-auto-rows: max-content;">
                                 <template v-if="!searchFiltered()">
                                     <recipe-card
                                         v-bind:key="`mp_${m.id}`"

vue/src/apps/TestView/TestView.vue

@@ -5,25 +5,43 @@
         DIV
 
         <div class="row">
+            <div class="col-md-12">
+                <div style="height: 25vh; width: 15vw;">
+                    <b-img style="height: 15vh; width: 15vw; object-fit: cover"
+                           src="http://127.0.0.1:8000/media/recipes/6a2fd228-c589-4a14-b21f-365bca3fbd94_119.png"
+                           rounded></b-img>
+                    <div style="height: 10vh">
+                        <span style="font-size: 18px" class="two-row-text"><b>Zwiebelkuchen mit einem wirklich langen namen und einer ewigen Beschreibung</b></span>
+                        <span style="font-size: 14px" class="two-row-text text-muted">
+                            <a href="#">Import 1</a> -
+                            <a href="#">Hauptgang</a> -
+                            <a href="#">Backen</a> </span>
+
+                        <i class="fas fa-ellipsis-v"></i>
+                    </div>
+
+                </div>
+            </div>
+
             <div class="col-md-3">
 
                 <div class="row">
                     <div class="col-12">
-                        <b-img style="height: 15vh; width: 25vw; object-fit: cover"
+                        <b-img style="height: 15vh; width: 15vw; object-fit: cover"
-                               src="http://127.0.0.1:8000/media/recipes/40527e70-82f4-4062-93cc-5d091f68279b_119.png"
+                               src="http://127.0.0.1:8000/media/recipes/6a2fd228-c589-4a14-b21f-365bca3fbd94_119.png"
                                rounded></b-img>
                     </div>
                 </div>
                 <div class="row mt-3">
-                    <div class="col-2">
+                    <div class="col-1">
-                        <div class="dot">
-                            75%
-                        </div>
-                    </div>
 
-                    <div class="col-9">
+                    </div>
-                        <h6><b>Zwiebelkuchen mit einem wirklich langen namen und einer ewigen Beschreibung</b></h6>
+                    <div class="col-10">
-                        <span class="text-muted text-small">📥 Import 1 - 🍽 Hauptgang - 🔥 Backen</span>
+                        <span style="font-size: 18px"><b>Zwiebelkuchen mit einem wirklich langen namen und einer ewigen Beschreibung</b></span> <br/>
+                        <span style="font-size: 14px" class="text-muted text-small">
+                            <a href="#">Import 1</a> -
+                            <a href="#">Hauptgang</a> -
+                            <a href="#">Backen</a> </span>
                     </div>
                     <div class="col-1 align-items-end">
                         <i class="fas fa-ellipsis-v"></i>
@@ -66,6 +84,11 @@
     </div>
 </template>
 
+<!--
+<span class="text-muted text-small">📥 Import 1 - 🍽 Hauptgang - 🔥 Backen</span>
+
+-->
+
 <script>
 import Vue from "vue"
 import {BootstrapVue} from "bootstrap-vue"
@@ -104,11 +127,20 @@ export default {
 
 <style>
 .dot {
-  height: 40px;
+    height: 40px;
-  width: 40px;
+    width: 40px;
-  background-color: #bbb;
+    background-color: #bbb;
-  border-radius: 50%;
+    border-radius: 50%;
-  display: inline-block;
+    display: inline-block;
+}
+
+.two-row-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* number of lines to show */
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
 }
 
 </style>

vue/src/components/KeywordsComponent.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-if="recipe.keywords.length > 0">
-      <span :key="k.id" v-for="k in recipe.keywords.filter((kk) => { return kk.show || kk.show === undefined })" class="pl-1">
+      <span :key="k.id" v-for="k in recipe.keywords.slice(0,keyword_splice).filter((kk) => { return kk.show || kk.show === undefined })" class="pl-1">
           <a :href="`${resolveDjangoUrl('view_search')}?keyword=${k.id}`"><b-badge pill variant="light"
                                                                                    class="font-weight-normal">{{ k.label }}</b-badge></a>
 
@@ -17,6 +17,15 @@ export default {
     mixins: [ResolveUrlMixin],
     props: {
         recipe: Object,
+        limit: Number,
     },
+    computed: {
+        keyword_splice: function (){
+            if(this.limit){
+                return this.limit
+            }
+            return this.recipe.keywords.lenght
+        }
+    }
 }
 </script>

vue/src/components/RecipeCard.vue

@@ -46,21 +46,21 @@
                     </div>
                 </a>
 
-                <b-card-body class="p-4">
+                <b-card-body class="p-2 pl-3 pr-3">
-                    <h6>
+                    <span>
-                        <a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null" class="text-body font-weight-bold">
+                        <a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null" class="text-body two-row-text">
                             <template v-if="recipe !== null">{{ recipe.name }}</template>
                             <template v-else>{{ meal_plan.title }}</template>
                         </a>
-                    </h6>
+                    </span>
 
                     <b-card-text style="text-overflow: ellipsis">
                         <template v-if="recipe !== null">
 
 
-                            <p class="mt-1">
+                            <p class="mt-1 mb-1">
                                 <last-cooked :recipe="recipe"></last-cooked>
-                                <keywords-component :recipe="recipe"
+                                <keywords-component :recipe="recipe" :limit="3"
                                                     style="margin-top: 4px; position: relative; z-index: 3;"></keywords-component>
                             </p>
                             <transition name="fade" mode="in-out">
@@ -81,12 +81,11 @@
 
                             <b-badge pill variant="info" v-if="!recipe.internal">{{ $t("External") }}</b-badge>
                         </template>
-                        <template v-else>{{ meal_plan.note }}</template>
+
                     </b-card-text>
                 </b-card-body>
 
-                <b-card-footer v-if="footer_text !== undefined"><i v-bind:class="footer_icon"></i> {{ footer_text }}
+
-                </b-card-footer>
             </b-card>
         </template>
 
@@ -105,6 +104,11 @@
                         </span>
                             </template>
 
+    <b-card-footer v-if="footer_text !== undefined"><i v-bind:class="footer_icon"></i> {{ footer_text }}
+                </b-card-footer>
+
+    <template v-else>{{ meal_plan.note }}</template>
+
     -->
 </template>
 
@@ -198,4 +202,13 @@ export default {
 {
     opacity: 0;
 }
+
+.two-row-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* number of lines to show */
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
 </style>