jacob/munch-ease-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Recipe image

Browse source
This commit is contained in:
jableader 2024-01-13 19:43:15 +11:00
parent 7a5e7ca938
commit ca2b05b161
1 changed files with 30 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/EditRecipePage.vue
View file

@ -1,16 +1,19 @@
<template> <template>
<div> <div>
<div v-if="!id"> <div v-if="!id && !recipe">
<input class="recipe-link" type="text" v-model="link" placeholder="Link to Recipe" /> <input class="recipe-link" type="text" v-model="link" placeholder="Link to Recipe" />
<button @click="parseLink">Parse</button> <button @click="parseLink">Parse</button>
</div> </div>
<div v-if="parse_failed"> <div v-if="parse_failed">
<p>Recipe not found</p> <p>Recipe not found</p>
</div> </div>
<div v-if="!parse_failed && recipe"> <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> <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> <ul>
<li v-for="ingredient in recipe.ingredients" :key="ingredient.line"> <li v-for="ingredient in recipe.ingredients" :key="ingredient.line">
<ingredient-line <ingredient-line
@ -37,8 +40,22 @@ input.recipe-link {
width: 80%; width: 80%;
} }
.image-container {
max-height: 20vh;
min-height: 20vh;
display: flex;
flex-direction: column;
}
input.recipe-name { input.recipe-name {
width: 100%; width: 100%;
font-weight: bold;
font-size: larger;
}
.recipe-link {
color: #0000EE;
text-decoration: none;
} }
ul { ul {
@ -68,12 +85,22 @@ export default {
link: this.$route.query.url ?? "", link: this.$route.query.url ?? "",
parse_failed: false, parse_failed: false,
recipe: null, recipe: null,
chefs: [] chefs: [],
} }
}, },
mounted() { mounted() {
this.refreshRecipe(); 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: { methods: {
parseLink() { parseLink() {
this.$router.push({ path: '/recipes/add', query: { url: this.link }}) this.$router.push({ path: '/recipes/add', query: { url: this.link }})