Re-style merchant setup page. Make merchant setup page responsive as possible.

views/merchantSetupPage/addIngredients.js

@@ -41,6 +41,7 @@ addIngredientsObj = {
             quantityInput.type = "number";
             quantityInput.step = "0.01";
             quantityInput.min = "0";
+            quantityInput.classList = "inputField";
             quantity.appendChild(quantityInput);
             
             let unit = document.createElement("td");

views/merchantSetupPage/createIngredients.js

@@ -2,12 +2,21 @@ let createIngredientsObj = {
     display: function(){
         controller.clearScreen();
         controller.createIngredientsStrand.style.display = "flex";
+
+        let tbody = document.querySelector("#createIngredientsStrand tbody");
+        if(tbody.children.length === 0){
+            document.querySelector("#createIngredientsStrand thead").style.display = "none";
+            document.querySelector("#finishButton").innerText = "No new ingredients";
+        }
     },
 
     //Creates a new, empty row in table to input data
     newIngredientField: function(){
         let tbody = document.querySelector("#inputField tbody");
 
+        document.querySelector("#inputField thead").style.display = "table-header-group"
+        document.querySelector("#finishButton").innerText = "Finish";
+
         let row = document.createElement("tr");
         tbody.appendChild(row);
     
@@ -16,6 +25,7 @@ let createIngredientsObj = {
 
         let nameInput = document.createElement("input");
         nameInput.type = "text";
+        nameInput.classList = "inputField";
         nameInput.onblur = ()=>{controller.checkValid("name", nameInput)};
         name.appendChild(nameInput);
         
@@ -24,6 +34,7 @@ let createIngredientsObj = {
 
         let categoryInput = document.createElement("input");
         categoryInput.type = "text"
+        categoryInput.classList = "inputField";
         categoryInput.onblur = ()=>{controller.checkValid("category", categoryInput)};
         category.appendChild(categoryInput);
         
@@ -33,6 +44,7 @@ let createIngredientsObj = {
         let quantityInput = document.createElement("input");
         quantityInput.type = "number";
         quantityInput.step = "0.01";
+        quantityInput.classList = "inputField";
         quantityInput.onblur = ()=>{controller.checkValid("quantity", quantityInput)};
         quantity.appendChild(quantityInput);
     
@@ -41,6 +53,7 @@ let createIngredientsObj = {
 
         let unitInput = document.createElement("input");
         unitInput.type = "text";
+        unitInput.classList = "inputField";
         unitInput.onblur = ()=>{controller.checkValid("unit", unitInput)};
         unit.appendChild(unitInput);
     
@@ -48,11 +61,21 @@ let createIngredientsObj = {
         row.appendChild(removeTd);
 
         let removeButton = document.createElement("button");
-        removeButton.innerText = "-";
-        removeButton.onclick = ()=>{row.parentNode.removeChild(row);};
+        removeButton.innerText = "Remove";
+        removeButton.classList = "button-small";
+        removeButton.onclick = ()=>{this.removeIngredient(row)};
         removeTd.appendChild(removeButton);
     },
 
+    removeIngredient: function(row){
+        if(row.parentNode.children.length <= 1){
+            document.querySelector("#createIngredientsStrand thead").style.display = "none";
+            document.querySelector("#finishButton").innerText = "No new ingredients";
+        }
+
+        row.parentNode.removeChild(row);
+    },
+
     submit: function(){
         let tbody = document.querySelector("#inputField tbody");
         let isValid = true;

views/merchantSetupPage/createRecipes.js

@@ -32,13 +32,21 @@ let createRecipesObj = {
             document.querySelector("#price").value = controller.data.recipes[this.recipeIndex].price || 0;
         }
 
-        let tbody = document.querySelector("#recipeTable tbody");
+        let tbody = document.querySelector("#createRecipesStrand tbody");
+
+        if(controller.data.recipes[this.recipeIndex].ingredients.length <= 0){
+            document.querySelector("#createRecipesStrand table").style.display = "none";
+        }else{
+            document.querySelector("#createRecipesStrand table").style.display = "table";
+        }
+
         for(let recipeIngredient of controller.data.recipes[this.recipeIndex].ingredients){
             let row = document.createElement("tr");
             tbody.appendChild(row);
     
             let ingredientTd = document.createElement("td");
             row.appendChild(ingredientTd);
+
             let ingredientName = document.createElement("select");
             for(let inventoryIngredient of controller.data.inventory){
                 let newOption = document.createElement("option");
@@ -60,6 +68,15 @@ let createRecipesObj = {
             ingQuant.value = recipeIngredient.quantity;
             ingQuant.onblur = ()=>{controller.checkValid("quantity", ingQuant)};
             quantityTd.appendChild(ingQuant);
+
+            let actionTd = document.createElement("td");
+            row.appendChild(actionTd);
+
+            let removeButton = document.createElement("button");
+            removeButton.innerText = "Remove";
+            removeButton.classList = "button-small";
+            removeButton.onclick = ()=>{this.removeRow(row)};
+            actionTd.appendChild(removeButton);
         }
     
         let nextButton = document.querySelector("#next");
@@ -83,7 +100,7 @@ let createRecipesObj = {
     //Changes recipeDataIndex
     //Hands off to showRecipe function
     changeRecipe: function(num){
-        let tbody = document.querySelector("#recipeTable tbody");
+        let tbody = document.querySelector("#createRecipesStrand tbody");
         controller.data.recipes[this.recipeIndex].ingredients = [];
         if(!recipes){
             controller.data.recipes[this.recipeIndex].price = document.querySelector("#price").value;
@@ -123,7 +140,8 @@ let createRecipesObj = {
 
     //Creates a new, empty row in table to input data
     addRecipeIngredientField: function(){
-        let tbody = document.querySelector("#recipeTable tbody");
+        let tbody = document.querySelector("#createRecipesStrand tbody");
+        document.querySelector("#createRecipesStrand table").style.display = "table";
     
         let row = document.createElement("tr");
         tbody.appendChild(row);
@@ -154,11 +172,22 @@ let createRecipesObj = {
         row.appendChild(removeTd);
         
         let removeButton = document.createElement("button");
-        removeButton.innerText = "-";
-        removeButton.onclick = ()=>{row.parentNode.removeChild(row)};
+        removeButton.innerText = "Remove";
+        removeButton.classList = "button-small";
+        removeButton.onclick = ()=>{this.removeRow(row)};
         removeTd.appendChild(removeButton);
     },
 
+    removeRow: function(row){
+        let tbody = document.querySelector("#createRecipesStrand tbody");
+
+        row.parentNode.removeChild(row);
+
+        if(tbody.children.length <= 0){
+            document.querySelector("#createRecipesStrand table").style.display = "none";
+        }
+    },
+
     //Add all recipes to data variable
     //Creates a form and submits data
     submit: function(){        

views/merchantSetupPage/merchantSetup.css

@@ -1,94 +1,119 @@
-*{margin:0;padding:0;}
-
-table{
-    margin: 20px;
-}
-
-
-
-.anticolumn{
-    border: none;
-    background: white;
-    color: black;
-    min-width: 0;
-}
-
-.container{
-    flex-direction: column;
-    align-items: center;
+/* General purpose */
+.buttonDiv{
+    display: flex;
+    justify-content: space-between;
 }
 
-    h1{
-        margin: 10px;
-    }
-
-    .horizontal-container{
-        display: flex;
+    .buttonDiv > *{
+        margin: 5px;
     }
 
-        .horizontal-container div{
-            text-align: center;
-            max-width: 50%;
-        }
-
-        th{
-            border: 2px solid #ff626b;
-            background: #001b2d;
-            color: darkgray;
-            padding: 3px;
-            min-width: 150px;
-        }
-
-        td{
-            border: 1px solid black;
-            text-align: center;
-            padding: 1px 10px;
-        }
-
-        .input-new{
-            display: flex;
-            flex-wrap: nowrap;
-        }
-
-.input-error{
-    border-color: red;
-}
-
-#newRecipes{
-    display: none;
-    flex-direction: column;
-    align-items: center;
-}
-
+/* basicInfoStrand */
 #basicInfoStrand{
     display: flex;
 }
 
-    #basicInfoStrand form{
-        display: flex;
-        flex-direction: column;
+    #basicInfoStrand > *{
+        margin: 10px;
     }
 
     #nameLabel{
         display: none;
     }
 
+/* addIngredientsStrand */
 #addIngredientsStrand{
     display: none;
 }
 
+    #addIngredientsStrand > *{
+        margin: 10px;
+    }
+
+    #addIngredientsStrand h5{
+        margin-top: 0;
+    }
+
+/* createIngredientsStrand */
 #createIngredientsStrand{
     display: none;
 }
 
+    #createIngredientsStrand > *{
+        margin: 10px;
+    }
+
+/* nameRecipesStrand */
 #nameRecipesStrand{
     display: none;
 }
 
+/* createRecipesStrand */
 #createRecipesStrand{
     display: none;
 }
 
+    #createRecipesStrand > *{
+        margin: 10px;
+    }
+
     #recipeName{
         color: #ff626b;
-    }
+    }
+
+.container{
+    flex-direction: column;
+    align-items: center;
+}
+    .input-new{
+        display: flex;
+        flex-wrap: nowrap;
+    }
+
+@media screen and (max-width: 1000px){
+    /* createIngredientsStrand */
+    #createIngredientsStrand td, #createIngredientsStrand th{
+        font-size: 15px;
+        padding: 5px;
+    }
+
+    #createIngredientsStrand .button{
+        font-size: 16px;
+    }
+
+    .inputField{
+        max-width: 100px;
+    }
+}
+
+@media screen and (max-width: 600px){
+    .inputField{
+        max-width: 50px;
+    }
+
+    /* addIngredientsStrand */
+    #addIngredientsStrand h1, #addIngredientsStrand h5{
+        text-align: center;
+    }
+
+    #addIngredientsStrand td, #addIngredientsStrand th{
+        font-size: 12px;
+        padding: 2px;
+    }
+
+    /* createIngredientsStrand */
+    #createIngredientsStrand td, #createIngredientsStrand th{
+        font-size: 12px;
+        padding: 2px;
+    }
+
+    #createIngredientsStrand .button{
+        font-size: 13px;
+    }
+
+    /* createRecipesStrand */
+    #createRecipesStrand td, #createRecipesStrand th{
+        font-size: 12px;
+        padding: 2px;
+    }
+}

views/merchantSetupPage/merchantSetup.ejs

@@ -32,14 +32,12 @@
                     <input id="regConfirmPass" type="password" required>
                 </label>
 
-                <input type="Submit" value="Next">
+                <input class="button" type="Submit" value="Continue">
             </form>
         </div>
 
         <div id="addIngredientsStrand" class="container">
-            <h1>Add your first set of ingredients to your pantry</h1>
-
-            <h3>Choose from our list of ingredients</h3>
+            <h1>Choose the ingredients in your inventory</h1>
 
             <h5>(Can't find something?  You can create it in the next step)</h5>
             
@@ -56,13 +54,19 @@
                 <tbody></tbody>
             </table>
 
-            <button onclick="addIngredientsObj.submit()">Next</button>
+            <button class="button" onclick="addIngredientsObj.submit()">Continue</button>
         </div>
 
         <div id="createIngredientsStrand" class="container">
-            <h1>Add your first set of ingredients to your pantry</h1>
+            <h1>Create ingredients for your inventory</h1>
+
+            <div class="buttonDiv">
+                <button class="button" onclick="addIngredientsObj.display()">Back</button>
 
-            <h3>Create your own ingredients</h3>
+                <button class="button" onclick="createIngredientsObj.newIngredientField()">Create Ingredient</button>
+
+                <button class="button" id="finishButton" onclick="createIngredientsObj.submit()">No new ingredients</button>
+            </div>
 
             <table id="inputField">
                 <thead>
@@ -71,14 +75,12 @@
                         <th>Category</th>
                         <th>Quantity</th>
                         <th>Measurement Unit</th>
-                        <th class="anticolumn"></th>
+                        <th>Actions</th>
                     </tr>
                 </thead>
                 <tbody></tbody>
             </table>
-            <button onclick="createIngredientsObj.newIngredientField()">+</button>
-            <button onclick="createIngredientsObj.submit()">Create Ingredients</button>
-            <button onclick="addIngredientsObj.display()">Back</button>
+            
         </div>
 
         <div id="nameRecipesStrand" class="container">
@@ -96,24 +98,28 @@
 
             <h2 id="recipeName"></h2>
 
+            <div class="buttonDiv">
+                <button class="button" onclick="createRecipesObj.addRecipeIngredientField()">Add Ingredient</button>
+
+                <button class="button" id="next">Next Recipe</button>
+
+                <button class="button" id="previous" onclick="createRecipesObj.changeRecipe(-1)">Previous Recipe</button>
+            </div>
+
             <% if(!locals.recipes){ %>
                 <input id="price" type="number" step="0.01" min="0" placeholder="enter price" required> 
             <% } %>
 
-            <table id="recipeTable">
+            <table>
                 <thead>
                     <tr>
                         <th>Ingredient</th>
                         <th>Quantity</th>
-                        <th class="anticolumn"></th>
+                        <th>Actions</th>
                     </tr>
                 </thead>
                 <tbody></tbody>
             </table>
-
-            <button onclick="createRecipesObj.addRecipeIngredientField()">+</button>
-            <button id="next"></button>
-            <button id="previous" onclick="createRecipesObj.changeRecipe(-1)">Previous Recipe</button>
         </div>
 
         <script>

views/shared/shared.css

@@ -98,6 +98,10 @@ form{
     margin: 30px 0;
 }
 
+.input-error{
+    border-color: red;
+}
+
 /* Header partial */
 .header{
     display: flex;