From ca2b05b16196a78cc61011b81142199d9bd43e4e Mon Sep 17 00:00:00 2001
From: jableader <jacobdunk@gmail.com>
Date: Sat, 13 Jan 2024 19:43:15 +1100
Subject: [PATCH] Recipe image

---
 src/components/EditRecipePage.vue | 33 ++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/EditRecipePage.vue b/src/components/EditRecipePage.vue
index 1978c85..9364028 100644
--- a/src/components/EditRecipePage.vue
+++ b/src/components/EditRecipePage.vue
@@ -1,16 +1,19 @@
 <template>
 <div>
-    <div v-if="!id">
+    <div v-if="!id && !recipe">
         <input class="recipe-link" type="text" v-model="link" placeholder="Link to Recipe" />
         <button @click="parseLink">Parse</button>
     </div>
+
     <div v-if="parse_failed">
         <p>Recipe not found</p>
     </div>
 
     <div v-if="!parse_failed && recipe">
+        <div class="image-container" v-if="image_styling" :style="image_styling" ></div>
         <h1><input class="recipe-name" type="text" :value="recipe.name"></h1>
-        <h3>Ingredients</h3>
+        <h3 class="recipe-link"><a :href="recipe.link">View Recipe</a></h3>
+        <h2>Ingredients</h2>
         <ul>
             <li v-for="ingredient in recipe.ingredients" :key="ingredient.line">
                 <ingredient-line 
@@ -37,8 +40,22 @@ input.recipe-link {
     width: 80%;
 }
 
+.image-container {
+    max-height: 20vh;
+    min-height: 20vh;
+    display: flex;
+    flex-direction: column;
+}
+
 input.recipe-name {
     width: 100%;
+    font-weight: bold;
+    font-size: larger;
+}
+
+.recipe-link {
+    color: #0000EE;
+    text-decoration: none;
 }
 
 ul {
@@ -68,12 +85,22 @@ export default {
             link: this.$route.query.url ?? "",
             parse_failed: false,
             recipe: null,
-            chefs: []
+            chefs: [],
         }
     },
     mounted() {
         this.refreshRecipe();
     },
+    computed: {
+        image_styling() {
+            if (this.recipe?.image_urls && this.recipe.image_urls[0]) {
+                const image = this.recipe.image_urls[0];
+                    //  linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%), url('https://i2.wp.com/www.downshiftology.com/wp-content/uploads/2019/04/steamed-broccoli-4.jpg') center/cover no-repeat;
+                return {background: `linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%), url('${image}') center/cover no-repeat` }
+            }
+            return null;
+        }
+    },
     methods: {
         parseLink() {
             this.$router.push({ path: '/recipes/add', query: { url: this.link }})