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>
<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 }})