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-bottom: 1px solid #ccc;
|
||||
font-size: large;
|
||||
margin: 1ex 1em;
|
||||
}
|
||||
|
||||
input.recipe-link {
|
||||
|
|
|
|||
|
|
@ -20,28 +20,17 @@ export default {
|
|||
components: { IngredientLine },
|
||||
data() {
|
||||
return {
|
||||
ingredient: {
|
||||
name: '',
|
||||
quantity: '',
|
||||
unit: '',
|
||||
link: ''
|
||||
},
|
||||
ingredient: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addIngredient() {
|
||||
this.$emit('add-ingredient', this.ingredient);
|
||||
this.ingredient = {
|
||||
name: '',
|
||||
quantity: '',
|
||||
unit: '',
|
||||
link: ''
|
||||
};
|
||||
this.ingredient = {};
|
||||
},
|
||||
updateProduct(ingredient, product_link) {
|
||||
data.parseProduct(ingredient, product_link).then(product => {
|
||||
this.ingredient.product = product;
|
||||
this.ingredient.product_link = product.link;
|
||||
});
|
||||
},
|
||||
updateIngredient(ingredient, line) {
|
||||
|
|
@ -58,7 +47,7 @@ export default {
|
|||
|
||||
.ingredient-add-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ingredient-line {
|
||||
|
|
|
|||
|
|
@ -1,46 +1,13 @@
|
|||
<template>
|
||||
<div class="ingredient-item">
|
||||
<div class="full-ingredient">
|
||||
<p>
|
||||
<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" @focusout="updateProductLink" />
|
||||
<input v-model="ingredientText" @keyup.enter="updateIngredient" @blur="updateIngredient" placeholder="Enter an ingredient" />
|
||||
<input v-model="productLink" class="product-link-input" placeholder="Enter product link" @keyup.enter="updateProductLink" @blur="updateProductLink" />
|
||||
</p>
|
||||
</div>
|
||||
<!-- Full ingredient line text bar -->
|
||||
<div class="action_items">
|
||||
<div class="action-bar">
|
||||
<p>
|
||||
<!-- 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>
|
||||
</template>
|
||||
|
||||
|
|
@ -57,7 +24,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
ingredientText: this.ingredient.line,
|
||||
productLink: this.ingredient.product?.link ?? "",
|
||||
productLink: this.ingredient.product?.product_link ?? "",
|
||||
showDetails: this.showExpanded
|
||||
};
|
||||
},
|
||||
|
|
@ -76,63 +43,7 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
|
||||
.compact-parse-results {
|
||||
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 {
|
||||
input {
|
||||
border: 0;
|
||||
font-size: larger;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
|
@ -143,23 +54,7 @@ export default {
|
|||
.product-link-input {
|
||||
padding: 0.5vh;
|
||||
color: #777;
|
||||
margin-top: 0.2vh;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-top: 0.5vh;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue