Improve style on inventory strand. Make inventory strand responsive.

views/inventoryPage/controller.js

@@ -1,6 +1,5 @@
 let controller = {
     inventoryStrand: document.querySelector("#inventoryStrand"),
-    recipeStrand: document.querySelector("#recipeStrand"),
     addIngredientStrand: document.querySelector("#addIngredientStrand"),
     enterTransactionsStrand: document.querySelector("#enterTransactionsStrand"),
 
@@ -14,7 +13,6 @@ let controller = {
 
     clearScreen: function(){
         this.inventoryStrand.style.display = "none";
-        this.recipeStrand.style.display = "none";
         this.addIngredientStrand.style.display = "none";
         this.enterTransactionsStrand.style.display = "none";
     }

views/inventoryPage/inventory.css

@@ -1,47 +1,31 @@
-*{margin:0;padding:0}
-
-th{
-    border: 2px solid #ff626b;
-    background: #001b2d;
-    color: darkgray;
-    padding: 3px;
-    min-width: 150px;
-    cursor: pointer;
-}
-
-.container th:nth-of-type(5){
-    border: none;
-    background: none;
-    color: white;
-    min-width: 0;
-    cursor: auto;
+#inventoryStrand{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
-td{
-    border: 1px solid black;
-    text-align: center;
-    padding: 1px 10px;
-}
+    #inventoryStrand h1{
+        font-size: 40px;
+        margin: 40px;
+    }
 
-.container td:nth-of-type(5n){
-    border: none;
-}
+    #inventoryStrand span{
+        color: rgb(255, 99, 107);
+    }
 
-.input-new{
-    display: flex;
-    flex-wrap: nowrap;
-}
+    .options{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
 
-.edit-button{
-    padding: 0;
-    margin: 0;
-}
+        .options > *{
+            margin: 10px;
+        }
 
-#inventoryStrand{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
+        #filter{
+            max-height: 32px;
+        }
 
 #addIngredientStrand{
     display: none;
@@ -51,7 +35,7 @@ td{
     #addIngredientStrand form{
         display: flex;
         flex-direction: column;
-        border: 2px solid #ff626b;
+        border: 2px solid rgb(255, 99, 107);
         padding: 25px;
         border-radius: 10px;
     }
@@ -64,4 +48,29 @@ td{
     display: none;
     flex-direction: column;
     align-items: center;
+}
+
+@media screen and (max-width: 600px){
+    #inventoryStrand h1{
+        font-size: 20px;
+        text-align: center;
+        margin: 5px;
+    }
+
+    .options{
+        flex-direction: column;
+    }
+
+    .options > *{
+        margin: 5px;
+    }
+
+    #inventoryStrand .button-small{
+        font-size: 12px;
+    }
+
+    #inventoryStrand td, #inventoryStrand th{
+        padding: 3px;
+        font-size: 12px;
+    }
 }

views/inventoryPage/inventory.ejs

@@ -13,17 +13,21 @@
         <% include ../shared/banner %>
 
         <div id="inventoryStrand">
-            <h1><%= merchant.name %> inventory</h1>
+            <h1><span><%= merchant.name %></span> inventory</h1>
 
-            <a href="/recipes">View Recipes</a>
+            <div class="options">
+                <a class="button" href="/recipes">View Recipes</a>
 
-            <button onclick="addIngredientObj.display()">Add Ingredient</button>
+                <input id="filter" onkeyup="inventoryObj.filter()" type="text" placeholder="FILTER INGREDIENTS">
 
-            <% if(merchant.pos === "none"){ %>
-                <button onclick="enterTransactionsObj.display()">Enter Transactions</button>
-            <% } %>
+                <button class="button" onclick="addIngredientObj.display()">Add Ingredient</button>
 
-            <input id="filter" onkeyup="inventoryObj.filter()" type="text" placeholder="Start typing to filter">
+                <% if(merchant.pos === "none"){ %>
+                    <button class="button" onclick="enterTransactionsObj.display()">Enter Transactions</button>
+                <% } %>
+
+                
+            </div>
 
             <table>
                 <thead>
@@ -32,15 +36,13 @@
                         <th onclick="inventoryObj.sortIngredients('category')">Category</th>
                         <th onclick="inventoryObj.sortIngredients('quantity')">Quantity</th>
                         <th onclick="inventoryObj.sortIngredients('unit')">Unit</th>
-                        <th></th>
+                        <th>Actions</th>
                     </tr>
                     <tbody></tbody>
                 </thead>
             </table>
         </div>
 
-        <div id="recipeStrand"></div>
-
         <div id="addIngredientStrand" class="add-ingredient">
             <button onclick="inventoryObj.display()">Back to Inventory</button>
 

views/inventoryPage/inventory.js

@@ -46,13 +46,13 @@ let inventoryObj = {
             let editBtn = document.createElement("button");
             editBtn.onclick = ()=>{this.editIngredient(item.id, row)};
             editBtn.innerText = "Edit";
-            editBtn.className = "edit-button"
+            editBtn.className = "button-small"
             action.appendChild(editBtn);
 
             let removeBtn = document.createElement("button");
             removeBtn.onclick = ()=>{this.removeIngredient(item.id, row)};
             removeBtn.innerText = "Remove";
-            removeBtn.className = "edit-button";
+            removeBtn.className = "button-small";
             action.appendChild(removeBtn);
         }
     },

views/shared/shared.css

@@ -1,9 +1,44 @@
+/* Initialization for all pages */
 *{
     margin:0;
     padding:0;
+}
+
+body{
     font-family:'Saira',sans-serif;
+    color: rgb(0, 27, 45);
+}
+
+/* General components that should apply to all pages */
+table{
+    border-spacing: 0;
 }
 
+    th{
+        color: rgb(240, 252, 255);
+        padding: 20px;
+        cursor: pointer;
+        background: rgb(0, 27, 45);
+        color: rgb(255, 99, 107);
+    }
+
+    tr{
+        color: rgb(0, 27, 45);
+        text-align: center;
+    }
+
+    tr, td{
+        padding: 5px 20px;
+    }
+
+    tr:nth-of-type(even){
+        background: rgb(201, 201, 201);
+    }
+
+    tr:nth-of-type(odd){
+        background: rgb(240, 252, 255);
+    }
+
 .button{
     background: none;
     border: 5px solid rgb(255, 99, 107);
@@ -14,13 +49,40 @@
     cursor: pointer;
     font-size: 25px;
     box-shadow: 2px 2px 2px black;
+    transition: 0.3s;
+    text-align: center;
 }
 
+    .button:hover{
+        background: rgb(0, 27, 45);
+        color: rgb(240, 252, 255);
+    }
+
+.button-small{
+    background: none;
+    border: 2px solid rgb(255, 99, 107);
+    text-decoration: none;
+    border-radius: 10px;
+    padding: 3px 5px;
+    color: #001b2d;
+    cursor: pointer;
+    font-size: 15px;
+    box-shadow: 1px 1px 1px black;
+    margin: 0 2px;
+    transition: 0.3s; 
+}
+
+    .button-small:hover{
+        background: rgb(0, 27, 45);
+        color: rgb(240, 252, 255);
+    }
+
 .line-break{
     border: 1px solid rgb(255, 99, 107);
     margin: 30px 0;
 }
 
+/* Header partial */
 .header{
     display: flex;
     justify-content: space-between;
@@ -57,6 +119,7 @@
         text-decoration: none;
     }
 
+/* Banner partial */
 .banner{
     width: 100%;
     text-align: center;
@@ -74,4 +137,10 @@
         color: white;
         font-weight: bold;
         list-style-type: none;
-    }
+    }
+
+@media screen and (max-width: 600px){
+    .button{
+        font-size: 15px;
+    }
+}