Simplify ingredients
This commit is contained in:
parent
cfaba1f52c
commit
1ad41888f9
3 changed files with 14 additions and 131 deletions
|
|
@ -36,7 +36,6 @@ input {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
||||||
font-size: large;
|
font-size: large;
|
||||||
margin: 1ex 1em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input.recipe-link {
|
input.recipe-link {
|
||||||
|
|
|
||||||
|
|
@ -20,28 +20,17 @@ export default {
|
||||||
components: { IngredientLine },
|
components: { IngredientLine },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
ingredient: {
|
ingredient: {},
|
||||||
name: '',
|
|
||||||
quantity: '',
|
|
||||||
unit: '',
|
|
||||||
link: ''
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
addIngredient() {
|
addIngredient() {
|
||||||
this.$emit('add-ingredient', this.ingredient);
|
this.$emit('add-ingredient', this.ingredient);
|
||||||
this.ingredient = {
|
this.ingredient = {};
|
||||||
name: '',
|
|
||||||
quantity: '',
|
|
||||||
unit: '',
|
|
||||||
link: ''
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
updateProduct(ingredient, product_link) {
|
updateProduct(ingredient, product_link) {
|
||||||
data.parseProduct(ingredient, product_link).then(product => {
|
data.parseProduct(ingredient, product_link).then(product => {
|
||||||
this.ingredient.product = product;
|
this.ingredient.product = product;
|
||||||
this.ingredient.product_link = product.link;
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
updateIngredient(ingredient, line) {
|
updateIngredient(ingredient, line) {
|
||||||
|
|
@ -58,7 +47,7 @@ export default {
|
||||||
|
|
||||||
.ingredient-add-box {
|
.ingredient-add-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ingredient-line {
|
.ingredient-line {
|
||||||
|
|
|
||||||
|
|
@ -1,46 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="ingredient-item">
|
<div class="ingredient-item">
|
||||||
<div class="full-ingredient">
|
<p>
|
||||||
<p>
|
<input v-model="ingredientText" @keyup.enter="updateIngredient" @blur="updateIngredient" placeholder="Enter an ingredient" />
|
||||||
<input v-model="ingredientText" @keyup.enter="updateIngredient" @focusout="updateIngredient" placeholder="Enter an ingredient" />
|
<input v-model="productLink" class="product-link-input" placeholder="Enter product link" @keyup.enter="updateProductLink" @blur="updateProductLink" />
|
||||||
<input v-model="productLink" class="product-link-input" placeholder="Enter product link" @keyup.enter="updateProductLink" @focusout="updateProductLink" />
|
</p>
|
||||||
</p>
|
<p>
|
||||||
</div>
|
<!-- Single line parse results -->
|
||||||
<!-- Full ingredient line text bar -->
|
<compact-parsed-ingredient :ingredient="ingredient" />
|
||||||
<div class="action_items">
|
</p>
|
||||||
<div class="action-bar">
|
|
||||||
<!-- Single line parse results -->
|
|
||||||
<div class="compact-parse-results">
|
|
||||||
<compact-parsed-ingredient :ingredient="ingredient" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Expand details button with animated chevron -->
|
|
||||||
<button class="expand-button" @click="showDetails = !showDetails">
|
|
||||||
<span :class="{'rotate-chevron': showDetails}">▾</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- Details section -->
|
|
||||||
<div v-if="showDetails" class="expanded-section">
|
|
||||||
<div class="details-section ingredient-details">
|
|
||||||
<div class="parse-result">
|
|
||||||
<p><small>Ingredient: </small><strong>{{ ingredient.name }}</strong></p>
|
|
||||||
<p><small>Quantity: </small> <strong>{{ ingredient.quantity }}</strong></p>
|
|
||||||
<p><small>Unit: </small> <strong>{{ ingredient.unit }}</strong></p>
|
|
||||||
<p><small>Preparation: </small> <strong>{{ ingredient.preparation }}</strong></p>
|
|
||||||
</div>
|
|
||||||
<div v-if="ingredient.product" class="product-result">
|
|
||||||
<p>
|
|
||||||
<a :href="ingredient?.product?.link"><small>Product: </small>
|
|
||||||
<strong>{{ ingredient.product.name }}</strong>
|
|
||||||
<img src="@/assets/external-link.svg" style="width: 1em; height: 1em; vertical-align: middle; margin-left: 0.5em; margin-bottom: 0.2em;" target=”_blank”/>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
<p><img :src="ingredient.product.img_small" /></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -57,7 +24,7 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
ingredientText: this.ingredient.line,
|
ingredientText: this.ingredient.line,
|
||||||
productLink: this.ingredient.product?.link ?? "",
|
productLink: this.ingredient.product?.product_link ?? "",
|
||||||
showDetails: this.showExpanded
|
showDetails: this.showExpanded
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
@ -76,63 +43,7 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
.compact-parse-results {
|
input {
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ingredient-item {
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.full-ingredient {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
text-align: left;
|
|
||||||
padding-left: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-bar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: right;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-button,
|
|
||||||
.expand-button {
|
|
||||||
padding: 8px 16px;
|
|
||||||
margin: 0 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.expand-button {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rotate-chevron {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.details-section {
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.full-ingredient p {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.full-ingredient input {
|
|
||||||
border: 0;
|
border: 0;
|
||||||
font-size: larger;
|
font-size: larger;
|
||||||
border-bottom: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
||||||
|
|
@ -143,23 +54,7 @@ export default {
|
||||||
.product-link-input {
|
.product-link-input {
|
||||||
padding: 0.5vh;
|
padding: 0.5vh;
|
||||||
color: #777;
|
color: #777;
|
||||||
margin-top: 0.2vh;
|
margin-top: 0.5vh;
|
||||||
}
|
|
||||||
|
|
||||||
.ingredient-details {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
text-align: left;
|
|
||||||
padding-left: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.parse-result {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-result {
|
|
||||||
flex: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue