Restyled the inventory and order html files

blizzardblast/static/css/styles.css

@@ -129,13 +129,21 @@ header {
 }
 
 /* ======== ORDER.HTML, RECEIPT.HTML, INVENTORY.HTML ============ */
+
+/* POSITIONING OF BUTTONS AND ALL */
 .title-area {
     text-align: center;
+    margin-bottom: 0;
+}
+
+.title-area>.view-subtitle {
+    text-align: center;
+    margin-top: -25px;
 }
 
-.button-container {
+.buttonpanel {
     display: flex;
-    justify-content: space-evenly;
+    justify-content: space-around;
 }
 
 .order-button {
@@ -152,47 +160,16 @@ header {
     color: #3B3355;
 }
 
-#filter-area {
+.add-forms, .get-results {
     display: flex;
     justify-content: center;
-}
-
-.search-bar {
-    border:none;
-    padding: 12px;
-    margin: 0 12px;
-}
-
-#filter-area>.search-button {
-    border: none;
-    background-color: #BFCDE0;
-    color: #3B3355;
-    margin: 0.3rem;
-    padding: 0.5rem;
-    border-radius: 2rem;
-}
-
-#filter-area>.search-button:hover {
-    text-decoration: underline;
-    cursor: pointer;
-    background-color: #3B3355;
-    color:#FEFCFD;
-}
-
-#search-filter {
-    border: #3B3355 1px solid;;
-    border-radius: 2rem;
-    padding: 0.6rem;
-}
-
-#CRUD-features {
-    display: flex;
-    justify-content: center;
-    margin: 4px auto;
+    margin-top: -7px;
     padding: 10px;
 }
 
-.crud-button, .filter-button {
+
+/* BUTTON STYLES */
+.add, .loadresults {
     border: none;
     background-color: #BFCDE0;
     color: #3B3355;
@@ -201,21 +178,16 @@ header {
     border-radius: 0.4rem;
 }
 
-.filter-button:hover {
+.loadresults:hover {
     text-decoration: underline;
     cursor: pointer;
 }
 
-.crud-button:hover {
+.add:hover {
     text-decoration: underline;
     cursor: pointer;
 }
 
-#order-table, #receipt-table, #scheduling-table {
-    display: flex;
-    justify-content: center;
-}
-
 a:link {
     text-decoration: none;
     border: none;
@@ -228,12 +200,24 @@ a:hover {
     color: #5D5D81;
 }
 
+
+/* TABLE STYLES */
+#order-table, #receipt-table, #scheduling-table {
+    display: flex;
+    justify-content: center;
+}
+
 table, th {
     border: 1px solid black;
-    padding: 10px;
+    padding: 5px;
     border-collapse: separate;
 }
 
+td {
+    padding:10px;
+    border: 1px solid black;
+}
+
 
 /* ============ REPORT.HTML =============== */
 #report-area {

blizzardblast/templates/inventory.html

@@ -15,51 +15,41 @@
         <option value="category">Category</option>
         <option value="name_alphabetical">Name: A-to-Z</option>
     </select>
-    <input class="search-bar" size=60 type="text" placeholder="Search..">
-    <button class="search-button">Search</button>
 </div>
 
-<div id="CRUD-features">
-    <button class="crud-button"><a href="{% url 'addinventory' %}">Add to Inventory</a></button>
-    <button class="crud-button">Refresh</button>
+<div class="inventory buttonpanel">
+    <button class="add ingredient"><a href="{% url 'addingredient' %}">Add Ingredient</a></button>
+    <button class="add"><a href="{% url 'addBaseFlavor' %}">Add Base Flavor</a></button>
 </div>
 
 <div id="order-table">
     <table>
         <!-- TABLE HEADER -->
         <tr>
-            <th>ingredient_id</th>
             <th>Ingredient Name</th>
             <th>Category</th>
             <th>Quantity</th>
             <th>Price per Serving</th>
+            <th>Replenished Stock?</th>
         </tr>
 
-        <!-- TABLE ROWS WITH INFO -->
-        <tr>
-            <th>111</th>
-            <th>Vanilla Ice Cream</th>
-            <th>base</th>
-            <th>100</th>
-            <th>10</th>
-        </tr>
         
-        <tr>
-            <th>112</th>
-            <th>Strawberry</th>
-            <th>fruits</th>
-            <th>50</th>
-            <th>20</th>
-        </tr>
         
-        <!-- TABLE ROW WITHOUT INFO -->
+        <!-- TABLE ROWS WITH INFO -->
+        {% for ingredient in inventory %}
         <tr>
-            <th>&nbsp;</th>
-            <th>&nbsp;</th>
-            <th>&nbsp;</th>
-            <th>&nbsp;</th>
-            <th>&nbsp;</th>
+            {% if ingredient.ingredient_name == baseflavor.bf_name %}
+                <td>{{baseflavor.bf_name}}</td>
+            {% else %}
+                <td>{{ingredient.ingredient_name}}</td>
+            {% endif %}
+            <td>{{ingredient.category}}</td>
+            <td>{{ingredient.quantity}}</td>
+            <td>{{ingredient.price_per_serving}}</td>
+            <td>{{ingredient.replenished_stock}}</td>
+            
         </tr>
+        {% endfor %}
     </table>
 </div>
 {% endblock %}

blizzardblast/templates/order.html

@@ -12,21 +12,29 @@
     <h1 class='view-title'>Order</h1>
     <h3 class='view-subtitle'>Order Slip</h3>
 </div>
-<!-- SEARCH AREA-->
-<div id="filter-area">
-    <button class="filter-button"><a href="{% url 'order' %}">Order Slip</a></button>
-    <button class="filter-button"><a href="{% url 'receipt' %}">Receipt</a></button>
 
-    <input class="search-bar" size=60 type="text" placeholder="Search..">
-    <button class="search-button">Search</button>
-</div>
-
-<div id="CRUD-features">
-    <button class="crud-button"><a href="{% url 'addorder' %}">Add Order</a></button>
-    <button class="crud-button">Delete Order</button>
-    <button class="crud-button">Refresh</button>
+<div class="order buttonpanel">
+    <!-- GETTING THE RESULTS AREA-->
+    <div class="getresults area">
+        <h4 class="title-area">Slips and Reciepts</h4>
+        <div class="get-results">
+            <button class="loadresults orderslip-button"><a href="{% url 'order' %}">Order Slip</a></button>
+            <button class="loadresults receipt-button"><a href="{% url 'receipt' %}">Receipt</a></button>
+        </div>
+    </div>
+
+    <!-- FILLING IN FORMS AREA-->
+    <div class="addingforms area">
+        <h4 class="title-area">Adding in new customers, items and orders</h4>
+        <div class="add-forms">
+            <button class="add orderform-button"><a href="{% url 'addorder' %}">Add Order</a></button>
+            <button class="add itemform-button"><a href="{% url 'additem' %}">Add Item</a></button>
+            <button class="add customerform-button"><a href="{% url 'addcustomer' %}">Add Customer</a></button>
+        </div>
+    </div>
 </div>
 
+<!-- TABLE AREA-->
 <div id="order-table">
     <table>
         <!-- TABLE HEADER -->