Ingredient mobile tweaks

src/assets/close.svg

@@ -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>

src/assets/create.svg

@@ -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>

src/assets/trash.svg

@@ -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>

src/components/ingredients/IngredientLine.vue

@@ -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>

src/components/meals/EditMealPage.vue

@@ -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)">
-                    <button @click="deleteIngredient(ingredient)">Delete</button>
+                        <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 {

src/components/meals/IngredientAddBox.vue

@@ -1,11 +1,24 @@
 <template>
-<div class="ingredient-add-box">
+<div class="ingredient-add-box" :class="{ 'adding-ingredient': showIngredientLine}">
-    <p class="ingredient-line">
+    <p class="ingredient-line" v-if="showIngredientLine">
-        <ingredient-line :ingredient="ingredient"
+        <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>