From 900c28caba8bfe89aeeeef939371f7122e6222b2 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Thu, 16 Feb 2023 19:10:19 +0100
Subject: [PATCH] playing around with the recipe card

---
 vue/src/apps/TestView/TestView.vue | 48 ++++++++++++++++++++++++++--
 vue/src/components/RecipeCard.vue  | 51 +++++++++++++++++-------------
 2 files changed, 75 insertions(+), 24 deletions(-)

diff --git a/vue/src/apps/TestView/TestView.vue b/vue/src/apps/TestView/TestView.vue
index d6ecf27a2..302310fa9 100644
--- a/vue/src/apps/TestView/TestView.vue
+++ b/vue/src/apps/TestView/TestView.vue
@@ -2,9 +2,43 @@
 
     <div id="app">
 
+        DIV
+
+        <div class="row">
+            <div class="col-md-3">
+
+                <div class="row">
+                    <div class="col-12">
+                        <b-img style="height: 15vh; width: 25vw; object-fit: cover"
+                               src="http://127.0.0.1:8000/media/recipes/40527e70-82f4-4062-93cc-5d091f68279b_119.png"
+                               rounded></b-img>
+                    </div>
+                </div>
+                <div class="row mt-3">
+                    <div class="col-2">
+                        <div class="dot">
+                            75%
+                        </div>
+                    </div>
+
+                    <div class="col-9">
+                        <h6><b>Zwiebelkuchen mit einem wirklich langen namen und einer ewigen Beschreibung</b></h6>
+                        <span class="text-muted text-small">📥 Import 1 - 🍽 Hauptgang - 🔥 Backen</span>
+                    </div>
+                    <div class="col-1 align-items-end">
+                        <i class="fas fa-ellipsis-v"></i>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+
+        <hr class="mt-3"/>
+
         Recipe Card
         <b-checkbox v-model="recipe_detailed"></b-checkbox>
-        <div class="row">
+        <div class="row ">
             <div class="col-md-3">
                 <recipe-card
                     v-if="recipe !== undefined"
@@ -28,6 +62,7 @@
             </div>
         </div>
 
+
     </div>
 </template>
 
@@ -67,4 +102,13 @@ export default {
 }
 </script>
 
-<style></style>
+<style>
+.dot {
+  height: 40px;
+  width: 40px;
+  background-color: #bbb;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+</style>
diff --git a/vue/src/components/RecipeCard.vue b/vue/src/components/RecipeCard.vue
index a40315e0d..7a4418699 100755
--- a/vue/src/components/RecipeCard.vue
+++ b/vue/src/components/RecipeCard.vue
@@ -28,7 +28,8 @@
                         class="card-img-overlay h-100 d-flex flex-column justify-content-right float-right text-right pt-2 pr-1"
                         v-if="show_context_menu">
                         <a>
-                            <recipe-context-menu :recipe="recipe" class="float-right" :disabled_options="context_disabled_options"
+                            <recipe-context-menu :recipe="recipe" class="float-right"
+                                                 :disabled_options="context_disabled_options"
                                                  v-if="recipe !== null"></recipe-context-menu>
                         </a>
                     </div>
@@ -47,7 +48,7 @@
 
                 <b-card-body class="p-4">
                     <h6>
-                        <a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null">
+                        <a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null" class="text-body font-weight-bold">
                             <template v-if="recipe !== null">{{ recipe.name }}</template>
                             <template v-else>{{ meal_plan.title }}</template>
                         </a>
@@ -55,15 +56,8 @@
 
                     <b-card-text style="text-overflow: ellipsis">
                         <template v-if="recipe !== null">
-                            <recipe-rating :recipe="recipe"></recipe-rating>
-                            <template v-if="recipe.description !== null && recipe.description !== undefined">
-                        <span v-if="recipe.description.length > text_length">
-                            {{ recipe.description.substr(0, text_length) + "\u2026" }}
-                        </span>
-                                <span v-if="recipe.description.length <= text_length">
-                            {{ recipe.description }}
-                        </span>
-                            </template>
+
+
                             <p class="mt-1">
                                 <last-cooked :recipe="recipe"></last-cooked>
                                 <keywords-component :recipe="recipe"
@@ -75,15 +69,15 @@
                                         <h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}
                                         </h6>
 
-                                <ingredients-card 
-                                    :steps="recipe.steps"
-                                    :header="false"
-                                    :detailed="false"
-                                    :servings="recipe.servings"
-                                    :use_plural="use_plural" />
-                            </div>
-                        </div>
-                    </transition>
+                                        <ingredients-card
+                                            :steps="recipe.steps"
+                                            :header="false"
+                                            :detailed="false"
+                                            :servings="recipe.servings"
+                                            :use_plural="use_plural"/>
+                                    </div>
+                                </div>
+                            </transition>
 
                             <b-badge pill variant="info" v-if="!recipe.internal">{{ $t("External") }}</b-badge>
                         </template>
@@ -98,6 +92,20 @@
 
     </div>
 
+    <!--
+
+    <recipe-rating :recipe="recipe"></recipe-rating>
+
+      <template v-if="recipe.description !== null && recipe.description !== undefined">
+                        <span v-if="recipe.description.length > text_length">
+                            {{ recipe.description.substr(0, text_length) + "\u2026" }}
+                        </span>
+                                <span v-if="recipe.description.length <= text_length">
+                            {{ recipe.description }}
+                        </span>
+                            </template>
+
+    -->
 </template>
 
 <script>
@@ -117,7 +125,6 @@ export default {
     mixins: [ResolveUrlMixin],
     components: {
         LastCooked,
-        RecipeRating,
         KeywordsComponent,
         "recipe-context-menu": RecipeContextMenu,
         IngredientsCard
@@ -125,7 +132,7 @@ export default {
     props: {
         recipe: Object,
         meal_plan: Object,
-        use_plural: { type: Boolean, default: false},
+        use_plural: {type: Boolean, default: false},
         footer_text: String,
         footer_icon: String,
         detailed: {type: Boolean, default: true},