Skip to content

G
GrabGrub
Commit eb870834 authored by Matthew Dizon's avatar Matthew Dizon
Browse files
Options

design updates

parent e0299609
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 125 deletions
GrabGrub/Kiosk/static/bootstrap/css/custom.css
View file @ eb870834
......@@ -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
View file @ eb870834
......@@ -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">
<label for="name" > Food Name: </label>
<input type="text" class="form-control" id="food_name" name="food_name" required>
</div>
<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">
<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>
<input type="number" class="form-control" id="price" name="price" required>
<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>
<div class="form-group">
<label for="name" > Date Created: </label>
<input type="datetime-local" class="form-control" id="date" name="date" required>
<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 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
View file @ eb870834
......@@ -7,36 +7,39 @@
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>
<select name="food" class="form-select" required>
{% for food in foods %}
<option value="{{food.id}}">{{food.name}}</option>
{% endfor %}
</select>
<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>
{% endfor %}
</select>
</div>
<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">
<label for="name"> Quantity: </label>
<input type="number" class="form-control" id="qty" name="qty" required>
</div>
<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"> 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>
<select name="customer" class="form-select" required>
{% for customer in customers %}
<option value="{{customer.id}}">{{customer.name}}</option>
{% endfor %}
</select>
<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
View file @ eb870834
......@@ -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
View file @ eb870834
......@@ -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
View file @ eb870834
......@@ -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">
<label for="name"> Customer Name: </label>
<input type="text" class="form-control" id="customer_name" name="customer_name" value="{{customer.name}}" required>
<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 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>
<div class="form-group">
<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 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
View file @ eb870834
......@@ -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">
<label for="name"> Food Name: </label>
<input type="text" class="form-control" id="food_name" name="food_name" value="{{food.name}}" required>
<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 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>
<div class="form-group">
<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>
<input type="number" class="form-control" id="price" name="price" value="{{food.price}}" required>
</div>
<div class="form-group">
<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 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 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
View file @ eb870834
......@@ -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>
<input type="text" class="form-control" id="food" name="food" value="{{order.food.getName}}" disabled>
</div>
<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">
<label for="name"> Quantity: </label>
<input type="number" class="form-control" id="qty" name="qty" value="{{order.qty}}" required>
<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">
<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="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>
<input type="text" class="form-control" id="customer" name="customer" value="{{order.cust_order.getName}}" disabled>
<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
View file @ eb870834
......@@ -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
View file @ eb870834
......@@ -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
View file @ eb870834
......@@ -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
View file @ eb870834
......@@ -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
View file @ eb870834
......@@ -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 %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment