design updates

GrabGrub/Kiosk/static/bootstrap/css/custom.css

@@ -8,7 +8,7 @@ html * {
 
 .footer {
     background-color: #23272B;
-    position: absolute;
+    position: fixed;
     bottom: 0;
     width: 100%;
     height: 40px;
@@ -26,12 +26,16 @@ html * {
 }
 
 select {
-    background-color: rgb(206, 206, 253);
-    max-width: 200px;
+    width: 100%;
+    height: 38px;
     margin-right: 75px;
-    font-weight: 700;
-    border-radius: .5em;
+    border-radius: .3em;
     border: 1px solid #aaa;
+    color: black;
+}
+
+select > option {
+    color: black;
 }
 
 .navbar{
@@ -43,7 +47,9 @@ select {
 }
 
 .nav-link {
+    border-radius: .5em;
     color: white;
+    background: #9179FA;
     width: 80%;
 }
 
@@ -51,12 +57,12 @@ select {
     color:#9179FA;
     background: linear-gradient(to left, #23272B 50%, white 50%) right;
     background-size: 200%;
-    transition: background 0.8s ease-out;
+    transition: background 2s ease-out;
 }
 
 .active {
     color: #9179FA;
-    background: #23272B;
+    background: white;
 }
 
 label {
@@ -66,6 +72,22 @@ label {
 
 .btn-grabgrub {
     background-color: #9179FA; 
+    color:white;
+}
+
+.btn-grabgrub:hover {
+    background-color: #7D68D9; 
+    color:white;
+}
+
+.btn-dark-grabgrub {
+    background-color: #423773;
+    color:white;
+}
+
+.btn-dark-grabgrub:hover {
+    background-color: #23272B;
+    color:white;
 }
 
 .jumbotron {
@@ -74,17 +96,17 @@ label {
 
 .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
     text-align: center;
-    background-color: #aa96ff; 
+    background-color: #8B74F2; 
 }
 
 .table-striped > tbody > tr:nth-child(2n) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
     text-align: center;
-    background-color: #9e89fa; 
+    background-color: #937AFF; 
 }
 
 .table-striped > thead {
     text-align: center;
-    background-color: #c7baff;
+    background-color: #7D68D9;
 }
 
 .list-group-item > span {

GrabGrub/Kiosk/templates/Kiosk/add_food.html

@@ -7,34 +7,38 @@
         Enter Food Details: 
     </div>
     <form method="POST" action="{% url 'add_food' %}" style="padding-left: 10; padding-right: 10;">{% csrf_token %}
-            
-        <div class="form-group">
+        <div class="d-flex flex-row mt-2">
+            <div class="form-group w-50">
                 <label for="name" > Food Name: </label>
                 <input type="text" class="form-control" id="food_name" name="food_name" required>
                     
             </div>
 
-        <div class="form-group">
+            <div class="form-group w-50 mx-4">
                 <label for="name"> Description: </label>
                 <input type="text" class="form-control" id="description" name="description" required>
             </div>
-        <div class="form-group">
-            <label for="name"> Price: </label>
+        </div>
+
+        <div class="d-flex flex-row">
+            <div class="form-group w-50">
+                <label for="name"> Price (₱): </label>
                 <input type="number" class="form-control" id="price" name="price" required>
             </div>
 
-        <div class="form-group">
+            <div class="form-group w-50 mx-4">
                 <label for="name" > Date Created: </label>
                 <input type="datetime-local" class="form-control" id="date" name="date" required>
             </div>
+        </div>
 
         <input type="hidden" name="message" value="Food created successfully">
 
-        <a href="{% url 'add_food' %}"><button type="submit" class="btn btn-primary" >Add Food</button></a>
+        <a href="{% url 'add_food' %}"><button type="submit" class="btn btn-dark-grabgrub float-right mr-4" >Add Food</button></a>
 
     </form>
 </div>
-<a href="{% url 'view_foods' %}"><button class="btn btn-secondary mt-3">Back</button></a>
+<a href="{% url 'view_foods' %}"><button class="btn btn-grabgrub mt-3">Back</button></a>
 {% if message %}
 <p class="mt-3 alert alert-danger" style="width: 75%"> {{message}}</p>
 {% endif %}

GrabGrub/Kiosk/templates/Kiosk/add_order.html

@@ -7,9 +7,9 @@
         Enter Order Details: 
     </div>
     <form method="POST" action="{% url 'add_order' %}" style="padding-left: 10; padding-right: 10;">{% csrf_token %}
-        <br>
-        <div class="form-group">
-            <label for="name"> Food: </label>
+        <div class="d-flex flex-row mt-2">
+            <div class="form-group w-50">
+                <label for="name"> Food Name: </label>
                 <select name="food" class="form-select" required>
                     {% for food in foods %}
                         <option value="{{food.id}}">{{food.name}}</option>
@@ -17,26 +17,29 @@
                 </select>
             </div>
     
-        <div class="form-group">
+            <div class="form-group w-50 mx-4">
                 <label for="name"> Quantity: </label>
                 <input type="number" class="form-control" id="qty" name="qty" required>
             </div>
+        </div>
 
-        <div class="form-group">
+        <div class="d-flex flex-row">
+            <div class="form-group w-50">
                 <label for="name"> Date of Order: </label>
                 <input type="datetime-local" class="form-control" id="date" name="date" required>
             </div>
 
-        <div class="form-group">
-            <label for="name"> Customer: </label>
+            <div class="form-group w-50 mx-4">
+                <label for="name"> Customer Name: </label>
                 <select name="customer" class="form-select" required>
                     {% for customer in customers %}
                         <option value="{{customer.id}}">{{customer.name}}</option>
                     {% endfor %}
                 </select>
             </div>
+        </div>
 
-        <div class="form-group">
+        <div class="form-group mr-4">
             <label for="name"> Mode of Payment: </label>
             <select name="payment_mode" class="form-select" required>
                     <option value="Cash">Cash</option>
@@ -44,9 +47,9 @@
             </select>
         </div>
 
-        <a href="{% url 'add_order' %}"><button type="submit" class="btn btn-primary">Add Order</button></a>
+        <a href="{% url 'add_order' %}"><button type="submit" class="btn btn-dark-grabgrub float-right mr-4">Add Order</button></a>
 
     </form>
 </div>
-<a href="{% url 'home' %}"><button class="btn btn-secondary mt-3">Back</button></a>
+<a href="{% url 'home' %}"><button class="btn btn-grabgrub mt-3">Back</button></a>
 {% endblock %}

GrabGrub/Kiosk/templates/Kiosk/base.html

@@ -16,7 +16,7 @@
     <body>
         <nav class="navbar navbar-expand-lg navbar-light sticky-top">
             <a class="navbar-brand mb-0" href="/"><span style="color: #9179FA;">GrabGrub</span></a>
-            <ul class="navbar-nav">
+            <ul class="navbar-nav ml-auto">
                 <li class="nav-item mx-2">
                     Miguel Bandelaria | 190518
                 </li>
@@ -43,6 +43,9 @@
                         <li class="nav-item">
                             <a class="nav-link {% if request.path == '/customers' %} active {% endif %}" href="/customers"> View Customers </a>
                         </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="/"> Sign Out </a>
+                        </li>
                     </ul>
                 </div>
                 {% endif %}

GrabGrub/Kiosk/templates/Kiosk/home.html

@@ -6,7 +6,7 @@
                     <div class="container">
                         <h1 class="jumbotron-heading">Orders</h1>
                         <p>A table of all orders</p>
-                        <a href="{% url 'add_order' %}"><button class="btn btn-dark">Add Order</button></a>
+                        <a href="{% url 'add_order' %}"><button class="btn btn-dark-grabgrub">Add Order</button></a>
                     </div>
                 </section>
 
@@ -17,9 +17,9 @@
                 <div class="col-12">
                   <table class="table table-striped">
                       <thead>
-                          <th scope="col"> Customer </th>
+                          <th scope="col"> Customer Name </th>
                           <th scope="col"> Food Ordered </th>
-                          <th scope="col"> Date of Order </th>
+                          <th scope="col"> Date Ordered </th>
                           <th scope="col"></th>
                       </thead>
                       <tbody>
@@ -28,7 +28,7 @@
                               <td> {{ order.cust_order.getName }} </td>
                               <td> {{ order.food.getName }} </td>
                               <td> {{ order.ordered_at }} </td>
-                              <td><a href="{%  url 'view_order_details' order.pk %}"><button class="btn btn-dark">Details</button></a></td>
+                              <td><a href="{%  url 'view_order_details' order.pk %}"><button class="btn btn-dark-grabgrub">Details</button></a></td>
                           </tr>
                           {% endfor %}
                       </tbody>

GrabGrub/Kiosk/templates/Kiosk/update_customer.html

@@ -7,23 +7,26 @@
         Customer Details: 
     </div>
     <form method="POST" action="{% url 'update_customer' pk=customer.pk %}" style="padding-left: 10;padding-right: 10;">{% csrf_token %}
-        <div class="form-group">
+        <div class="d-flex flex-row mt-2">
+            <div class="form-group w-50">
                 <label for="name"> Customer Name: </label>
                 <input type="text" class="form-control" id="customer_name" name="customer_name" value="{{customer.name}}" required>
             </div>
-        <div class="form-group">
+            <div class="form-group w-50 mx-4">
                 <label for="name"> Address: </label>
                 <input type="text" class="form-control" id="address" name="address" value="{{customer.address}}" required>
             </div>
-        <div class="form-group">
+        </div>
+        
+        <div class="form-group mr-4">
             <label for="name"> City: </label>
             <input type="text" class="form-control" id="city" name="city" value="{{customer.city}}" required>
         </div>
-        <a href="{% url 'update_customer' customer.pk %}"><button type="submit" class="btn btn-primary">Update Customer</button></a>
+        <a href="{% url 'update_customer' customer.pk %}"><button type="submit" class="btn btn-dark-grabgrub float-right mr-4">Update Customer</button></a>
     </form>
 </div>
 <br>
-<a href="{% url 'view_customer_details' customer.pk %}"><button class="btn btn-secondary">Back</button></a>
+<a href="{% url 'view_customer_details' customer.pk %}"><button class="btn btn-grabgrub">Back</button></a>
 {% if message %}
 <p class="mt-3 alert alert-danger" style="width: 75%"> {{message}}</p>
 {% endif %}

GrabGrub/Kiosk/templates/Kiosk/update_food.html

@@ -7,29 +7,34 @@
         Food Details: 
     </div>
     <form method="POST" action="{% url 'update_food' pk=food.pk %}" style="padding-left: 10;padding-right: 10;">{% csrf_token %}
-        <div class="form-group">
+        <div class="d-flex flex-row mt-2">
+            <div class="form-group w-50">
                 <label for="name"> Food Name: </label>
                 <input type="text" class="form-control" id="food_name" name="food_name" value="{{food.name}}" required>
             </div>
-        <div class="form-group">
+            <div class="form-group w-50 mx-4">
                 <label for="name"> Description: </label>
                 <input type="text" class="form-control" id="description" name="description" value="{{food.description}}" required>
             </div>
-        <div class="form-group">
-            <label for="name"> Price: </label>
+        </div>
+
+        <div class="d-flex flex-row">
+            <div class="form-group w-50">
+                <label for="name"> Price (₱): </label>
                 <input type="number" class="form-control" id="price" name="price" value="{{food.price}}" required>
             </div>
-        <div class="form-group">
+            <div class="form-group w-50 mx-4">
                 <label for="name"> Date Created: </label>
                 <input type="datetime-local" class="form-control" id="date" name="date" value="{{food.created_at|date:'Y-m-d'}}T{{food.created_at|date:'H:i'}}" required>
             </div>
+        </div>
 
-        <a href="{% url 'update_food' food.pk %}"><button type="submit" class="btn btn-primary">Update Food</button></a>
+        <a href="{% url 'update_food' food.pk %}"><button type="submit" class="btn btn-dark-grabgrub float-right mr-4">Update Food</button></a>
 
     </form>
 </div>
 <br>
-<a href="{% url 'view_food_details' food.pk %}"><button class="btn btn-secondary">Back</button></a>
+<a href="{% url 'view_food_details' food.pk %}"><button class="btn btn-grabgrub">Back</button></a>
 {% if message %}
 <p class="mt-3 alert alert-danger" style="width: 75%"> {{message}}</p>
 {% endif %}

GrabGrub/Kiosk/templates/Kiosk/update_order.html

@@ -7,30 +7,33 @@
         Order Details: 
     </div>
     <form method="POST" action="{% url 'update_order' pk=order.pk %}" style="padding-left: 10;padding-right: 10;">{% csrf_token %}
-            
-        <div class="form-group">
-            <label for="name"> Food: </label>
+        <div class="d-flex flex-row mt-2">
+            <div class="form-group w-50">
+                <label for="name"> Food Name: </label>
                 <input type="text" class="form-control" id="food" name="food" value="{{order.food.getName}}" disabled>
             </div>
 
-        <div class="form-group">
+            <div class="form-group w-50 mx-4">
                 <label for="name"> Quantity: </label>
                 <input type="number" class="form-control" id="qty" name="qty" value="{{order.qty}}" required>
             </div>
+        </div>
 
-        <div class="form-group">
+        <div class="d-flex flex-row">
+            <div class="form-group w-50">
                 <label for="name"> Date of Order: </label>
                 <input type="text" class="form-control" id="date" name="date" value="{{order.ordered_at}}" disabled>
             </div>
 
-        <div class="form-group">
-            <label for="name"> Customer: </label>
+            <div class="form-group w-50 mx-4">
+                <label for="name"> Customer Name: </label>
                 <input type="text" class="form-control" id="customer" name="customer" value="{{order.cust_order.getName}}" disabled>
             </div>
+        </div>
 
-        <div class="form-group">
+        <div class="form-group mr-4">
             <label for="name"> Mode of Payment: </label>
-            <select name="payment_mode" class="form-select" style="max-width: 200px; margin-right: 75px;" required>
+            <select name="payment_mode" class="form-select" required>
                 {% if order.payment_mode == "Cash" %}
                     <option value="Cash" selected>Cash</option>
                     <option value="Card">Card</option>
@@ -41,10 +44,10 @@
             </select>
         </div>
 
-        <a href="{% url 'update_order' order.pk %}"><button type="submit" class="btn btn-primary">Update Order</button></a>
+        <a href="{% url 'update_order' order.pk %}"><button type="submit" class="btn btn-dark-grabgrub float-right mr-4">Update Order</button></a>
 
     </form>
 </div>
 <br>
-<a href="{% url 'view_order_details' order.pk %}"><button class="btn btn-secondary">Back</button></a>
+<a href="{% url 'view_order_details' order.pk %}"><button class="btn btn-grabgrub">Back</button></a>
 {% endblock %}

GrabGrub/Kiosk/templates/Kiosk/view_customer_details.html

@@ -13,9 +13,9 @@
     </ul>
 </div>
 
-<a href="{% url 'update_customer' customer.pk %}"><button type="submit" class="btn btn-primary">Update Customer</button></a>
-<a href="{% url 'delete_customer' customer.pk %}"><button class="btn btn-danger my-4">Delete Customer</button></a>
-<a href="{% url 'view_customers' %}"><button class="btn btn-secondary">Back</button></a>
+<a href="{% url 'update_customer' customer.pk %}"><button type="submit" class="btn btn-grabgrub">Update Customer</button></a>
+<a href="{% url 'delete_customer' customer.pk %}"><button class="btn btn-grabgrub my-4">Delete Customer</button></a>
+<a href="{% url 'view_customers' %}"><button class="btn btn-grabgrub">Back</button></a>
 {% if message %}
 <p class="mt-3 alert alert-success" style="width: 75%"> {{message}}</p>
 {% endif %}

GrabGrub/Kiosk/templates/Kiosk/view_customers.html

@@ -16,7 +16,7 @@
 <div class="col-12">
     <table class="table table-striped">
         <thead>
-            <th scope="col"> Name </th>
+            <th scope="col"> Customer Name </th>
             <th scope="col"> Address </th>
             <th scope="col"> City </th>
             <th scope="col"></th>
@@ -27,7 +27,7 @@
                 <td> {{ customer.name }} </td>
                 <td> {{ customer.address }} </td>
                 <td> {{ customer.city }} </td>
-                <td><a href="{%  url 'view_customer_details' customer.pk %}"><button class="btn btn-dark">Details</button></a></td>
+                <td><a href="{%  url 'view_customer_details' customer.pk %}"><button class="btn btn-dark-grabgrub">Details</button></a></td>
             </tr>
             {% endfor %}
         </tbody>

GrabGrub/Kiosk/templates/Kiosk/view_food_details.html

@@ -7,16 +7,16 @@
         Food Details: 
     </div>
     <ul class="list-group list-group-flush">
-        <li class="list-group-item"><span>Food: </span> {{food.name}}</li>
-        <li class="list-group-item"><span>Quantity: </span> {{food.description}}</li>
-        <li class="list-group-item"><span>Date of Order: </span> {{food.price}}</li>
-        <li class="list-group-item"><span>Customer: </span> {{food.created_at}}</li>
+        <li class="list-group-item"><span>Food Name: </span> {{food.name}}</li>
+        <li class="list-group-item"><span>Description: </span> {{food.description}}</li>
+        <li class="list-group-item"><span>Price (₱): </span> {{food.price}}</li>
+        <li class="list-group-item"><span>Date Created: </span> {{food.created_at}}</li>
     </ul>
 </div>
 
-<a href="{% url 'update_food' food.pk %}"><button type="submit" class="btn btn-primary">Update Food</button></a>
-<a href="{% url 'delete_food' food.pk %}"><button class="btn btn-danger my-4">Delete Food</button></a>
-<a href="{% url 'view_foods' %}"><button class="btn btn-secondary">Back</button></a>
+<a href="{% url 'update_food' food.pk %}"><button type="submit" class="btn btn-grabgrub">Update Food</button></a>
+<a href="{% url 'delete_food' food.pk %}"><button class="btn btn-grabgrub my-4">Delete Food</button></a>
+<a href="{% url 'view_foods' %}"><button class="btn btn-grabgrub">Back</button></a>
 {% if message %}
 <p class="mt-3 alert alert-success" style="width: 75%"> {{message}}</p>
 {% endif %}

GrabGrub/Kiosk/templates/Kiosk/view_foods.html

@@ -6,7 +6,7 @@
     <div class="container">
         <h1 class="jumbotron-heading">Food Items</h1>
         <p>A table of all food items</p>
-        <a href="{% url 'add_food' %}"><button class="btn btn-dark">Add Food</button></a>
+        <a href="{% url 'add_food' %}"><button class="btn btn-dark-grabgrub">Add Food</button></a>
     </div>
 </section>
 
@@ -17,7 +17,7 @@
 <div class="col-12">
     <table class="table table-striped">
         <thead>
-            <th scope="col"> Name </th>
+            <th scope="col"> Food Name </th>
             <th scope="col"> Description </th>
             <th scope="col"> Price (₱) </th>
             <th scope="col"> Date Created </th>
@@ -30,7 +30,7 @@
                 <td> {{ food.description }} </td>
                 <td> {{ food.price }} </td>
                 <td> {{ food.created_at }} </td>
-                <td><a href="{%  url 'view_food_details' food.pk %}"><button class="btn btn-dark">Details</button></a></td>
+                <td><a href="{%  url 'view_food_details' food.pk %}"><button class="btn btn-dark-grabgrub">Details</button></a></td>
             </tr>
             {% endfor %}
         </tbody>

GrabGrub/Kiosk/templates/Kiosk/view_order_details.html

@@ -7,17 +7,17 @@
         Order Details: 
     </div>
     <ul class="list-group list-group-flush">
-        <li class="list-group-item"><span>Food: </span> {{order.food.getName}}</li>
+        <li class="list-group-item"><span>Food Name: </span> {{order.food.getName}}</li>
         <li class="list-group-item"><span>Quantity: </span> {{order.qty}}</li>
         <li class="list-group-item"><span>Date of Order: </span> {{order.ordered_at}}</li>
-        <li class="list-group-item"><span>Customer: </span> {{order.cust_order.getName}}</li>
+        <li class="list-group-item"><span>Customer Name: </span> {{order.cust_order.getName}}</li>
         <li class="list-group-item"><span>Mode of Payment: </span> {{order.payment_mode}}</li>
     </ul>
 </div>
 
-<a href="{% url 'update_order' order.pk %}"><button class="btn btn-primary">Update Order</button></a>
-<a href="{% url 'delete_order' order.pk %}"><button class="btn btn-danger my-4">Delete Order</button></a>
-<a href="{% url 'home' %}"><button class="btn btn-secondary">Back</button></a>
+<a href="{% url 'update_order' order.pk %}"><button class="btn btn-grabgrub">Update Order</button></a>
+<a href="{% url 'delete_order' order.pk %}"><button class="btn btn-grabgrub my-4">Delete Order</button></a>
+<a href="{% url 'home' %}"><button class="btn btn-grabgrub">Back</button></a>
 {% if message %}
 <p class="mt-3 alert alert-success" style="width: 75%"> {{message}}</p>
 {% endif %}