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

Ingredient mobile tweaks

Browse source
This commit is contained in:
jableader 2024-05-11 11:27:26 +10:00
parent 850d86eb25
commit 5100ff0206
6 changed files with 85 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/assets/close.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 32 32" xml:space="preserve">
<style type="text/css">
.bentblocks_een{fill:#0B1719;}
</style>
<path class="bentblocks_een" d="M24.485,7.515c-4.686-4.686-12.284-4.686-16.971,0c-4.686,4.686-4.686,12.284,0,16.971
c4.686,4.686,12.284,4.686,16.971,0C29.172,19.799,29.172,12.201,24.485,7.515z M23.071,23.071c-3.908,3.908-10.234,3.908-14.142,0
c-3.899-3.899-3.899-10.243,0-14.142c3.908-3.908,10.234-3.909,14.142,0C24.96,10.818,26,13.329,26,16
C26,18.671,24.96,21.182,23.071,23.071z M21.657,11.757L17.414,16l4.243,4.243l-1.414,1.414L16,17.414l-4.243,4.243l-1.414-1.414
L14.586,16l-4.243-4.243l1.414-1.414L16,14.586l4.243-4.243L21.657,11.757z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 947 B

11
src/assets/create.svg Normal file
View file

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 32 32" xml:space="preserve">
<style type="text/css">
.bentblocks_een{fill:#0B1719;}
</style>
<path class="bentblocks_een" d="M24,15v2h-7v7h-2v-7H8v-2h7V8h2v7H24z M24.485,24.485c-4.686,4.686-12.284,4.686-16.971,0
c-4.686-4.686-4.686-12.284,0-16.971c4.687-4.686,12.284-4.686,16.971,0C29.172,12.201,29.172,19.799,24.485,24.485z M23.071,8.929
c-3.842-3.842-10.167-3.975-14.142,0c-3.899,3.899-3.899,10.243,0,14.142c3.975,3.975,10.301,3.841,14.142,0
C26.97,19.172,26.97,12.828,23.071,8.929z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 797 B

6
src/assets/trash.svg Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.16565 10.1534C5.07629 8.99181 5.99473 8 7.15975 8H16.8402C18.0053 8 18.9237 8.9918 18.8344 10.1534L18.142 19.1534C18.0619 20.1954 17.193 21 16.1479 21H7.85206C6.80699 21 5.93811 20.1954 5.85795 19.1534L5.16565 10.1534Z" stroke="#000000" stroke-width="2"/>
<path d="M19.5 5H4.5" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
<path d="M10 3C10 2.44772 10.4477 2 11 2H13C13.5523 2 14 2.44772 14 3V5H10V3Z" stroke="#000000" stroke-width="2"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 696 B

4
src/components/ingredients/IngredientLine.vue
View file

@ -2,9 +2,9 @@
<div class="ingredient-item">
<p>
<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" />
<input v-model="productLink" v-if="ingredient.line" class="product-link-input" placeholder="Enter product link" @keyup.enter="updateProductLink" @blur="updateProductLink" />
</p>
<p>
<p v-if="ingredient.line">
<!-- Single line parse results -->
<compact-parsed-ingredient :ingredient="ingredient" />
</p>

19
src/components/meals/EditMealPage.vue
View file

@ -15,7 +15,9 @@
<p class="recipe-card">
<recipe-card :recipe="recipe" />
</p>
<button @click="removeRecipe(recipe)">Remove</button>
<button @click="removeRecipe(recipe)">
<img class="icon" :src="require('@/assets/trash.svg')" />
</button>
</li>
</ul>
<div v-else>
@ -29,10 +31,10 @@
<h2>Sides & Additional Ingredients</h2>
<ul v-if="meal.extra_ingredients && meal.extra_ingredients.length">
<li v-for="ingredient in meal.extra_ingredients" :key="ingredient" class="saved-ingredient">
<p>
<compact-parsed-ingredient :ingredient="ingredient" />
</p>
<button @click="deleteIngredient(ingredient)">Delete</button>
<button @click="deleteIngredient(ingredient)">
<img class="icon" :src="require('@/assets/trash.svg')" />
</button>
</li>
</ul>
<div v-else>
@ -123,9 +125,14 @@ export default {
<style scoped>
img.icon {
width: 2em;
height: 2em;
}
.persons-list {
text-align: left;
padding-left: 2em;
padding: 1ex 2em;
}
.persons-list p {
@ -142,7 +149,6 @@ export default {
margin: 1em auto;
}
ul {
list-style-type: none;
margin: 0;
@ -157,7 +163,6 @@ li {
display: flex;
justify-content: space-between;
align-items: center;
margin: 1vh 1em;
}
.saved-recipe {

45
src/components/meals/IngredientAddBox.vue
View file

@ -1,11 +1,24 @@
<template>
<div class="ingredient-add-box">
<p class="ingredient-line">
<ingredient-line :ingredient="ingredient"
<div class="ingredient-add-box" :class="{ 'adding-ingredient': showIngredientLine}">
<p class="ingredient-line" v-if="showIngredientLine">
<ingredient-line ref="line" :ingredient="ingredient"
@update-ingredient="updateIngredient"
@update-product-link="updateProduct" />
</p>
<button @click="addIngredient(ingredient)">Add</button>
<p>
<button v-if="showIngredientLine" @click="addIngredient(ingredient)">
<img :src="require('@/assets/chevron-up.svg')" /> <br>
Add ingredient
</button>
<button v-if="showIngredientLine" @click="showIngredientLine = false">
<img :src="require('@/assets/close.svg')" /> <br>
Cancel
</button>
<button v-else @click="showIngredientLine = true">
<img :src="require('@/assets/create.svg')" /> <br>
Add ingredient
</button>
</p>
</div>
</template>
@ -19,12 +32,14 @@ export default {
data() {
return {
ingredient: {},
showIngredientLine: false,
}
},
methods: {
addIngredient() {
this.$emit('add-ingredient', this.ingredient);
this.ingredient = {};
this.showIngredientLine = false;
},
async updateProduct(ingredient, product_link) {
this.ingredient.product = await data.parseProduct(ingredient, product_link);
@ -43,10 +58,32 @@ export default {
.ingredient-add-box {
display: flex;
flex-direction: column;
margin: 1ex 2em;
padding: 1em;
}
.adding-ingredient {
border: solid 1px #ccc;
border-radius: 5px;
}
.ingredient-line {
flex: 1;
}
button {
border: 0;
background: none;
cursor: pointer;
padding: 2ex 1em;
}
button img {
width: 3em;
}
button:hover {
background-color: #ccc;
}
</style>