diff --git a/css/order.css b/css/order.css
index bcfcc827da5a8cdad4d994cccbe368db3638329d..b0d56d4ee69b6fa00724e17c5f33a5111733df16 100755
--- a/css/order.css
+++ b/css/order.css
@@ -1,59 +1,111 @@
-.frame > h1 {
- text-align: left;
+.order_container {
+ height: 79%;
+}
+
+.order_container .subheader {
+ height: 10%;
}
.submenu_container {
- width: 360px;
- display: inline-flex;
- margin-left: auto;
- margin-right: auto;
+ width: 100%;
+ display: table;
+ border-collapse: separate;
+ border-spacing: 10px;
}
.submenu {
- width: 100px;
+ display: table-cell;
+ width: 30%;
height: 40px;
- float: left;
border: 0.5px solid black;
font-size: 15px;
- text-align: center;
+ position: relative;
+}
+
+.submenu br {
+ clear:both;
+}
+
+.submenu_active {
+ background-color: #fffe9f;
}
.submenu.left {
+
+}
+.submenu.mid {
+ margin: 0 5% 0;
+}
+
+div.step_num {
float: left;
+ width: 20%;
+ height: 100%;
+ vertical-align: middle;
}
-.submenu.mid {
- margin-left: 29px;
- margin-right: 29px;
+div.step_name {
+ float: right;
+ height: 100%;
+ vertical-align: middle;
}
-.submenu.right {
+div.step_num p {
+ margin: 10px 0 0 2px;
+ text-align: center;
+ width: 25px;
+ padding: 2% 0;
+ background-color: grey;
+ border-radius: 50%;
+}
+
+div.step_name p {
+ margin: 0 0 0 15px;
+}
+
+.submenu p {
+ margin: 0;
+ position: absolute;
+ top: 0%;
+ vertical-align: middle;
+}
+
+div.step_name {
float: right;
+ width: 80%;
+ text-align: left;
}
.content {
width: 350px;
- margin-top: 20px;
- margin-left: 5px;
- margin-right: 5px;
+ margin: 5px;
}
-.content > div {
- margin: 5px 0px 5px 0px;
+.content div {
+ margin-bottom: 15px;
+ vertical-align: middle;
}
-.content > div div {
- display: inline;
-}
-.content > div > span {
- float: left;
+.content span {
+ width: 35%;
+ margin-right: auto;
}
-.content > div > input[type="text"] {
- width: 100px;
+.content input[type=text] {
+ width: 65%;
+ height: 20px;
float: right;
}
+.content input[type=submit] {
+ position: absolute;
+ margin: 10px;
+ left: 45%;
+ width: 60px;
+ height: 30px;
+
+}
+
#select_driver div {
border: 0.5px solid black;
}
@@ -61,15 +113,12 @@
#preferred_driver {
}
-form#submit_cmplt_ordr div {
- size:
-}
-
.star {
- font-size: 50px;
- color: gray;
+ size: 300%;
+ color: yellow;
}
#order_link {
background-color: #465d43;
-}
\ No newline at end of file
+}
+
diff --git a/order/select_driver.php b/order/select_driver.php
index b975c7684e0998e52d9b68fbb4b294b4b4747c96..41964e0f0749e42dd6c82f9e53a57c2bbc3d6ee8 100644
--- a/order/select_driver.php
+++ b/order/select_driver.php
@@ -67,38 +67,60 @@
<div class="menu_container">
<?php include'../template/menu.php';?>
</div>
+ <script>
+ document.getElementById("order_link").setAttribute("class", "menu menu_active");
+ </script>
+
+ <div class="order_container">
+ <div class="subheader">
+ <div class="title"><h1>Make an Order</h1></div>
+ </div>
+ <div class="submenu_container">
+ <div class="submenu left">
+ <div class="step_num">
+ <p>1</p>
+ </div>
+ <div class="step_name">
+ <p>Select Destination</p>
+ </div>
+ </div>
+
+ <div class="submenu mid submenu_active">
+ <div class="step_num">
+ <p>2</p>
+ </div>
+ <div class="step_name">
+ <p>Select a Driver</p>
+ </div>
+ </div>
- <h1>Make an Order</h1>
- <div class="submenu_container">
- <div class="submenu left">
- Select Destination
- </div>
-
- <div class="submenu mid">
- Select a Driver
+ <div class="submenu right">
+ <div class="step_num">
+ <p>3</p>
+ </div>
+ <div class="step_name">
+ <p>Complete Order</p>
+ </div>
+ </div>
</div>
- <div class="submenu right">
- Complete Order
- </div>
- </div>
- <form method="post" id="submit_select_drv" action=<?php echo "complete_order.php?id=".$user_id ?>>
- <?php echo $ppoint . $dest; ?>
- <div class="content" id="select_driver">
- <div id="preferred_driver">
- <h2>Preferred driver</h2>
- <?php ShowPrefDrv($prefdrv, $con) ?>
- </div>
- <div id="other_driver">
- <h2>Other drivers</h2>
+ <form method="post" id="submit_select_drv" action=<?php echo "complete_order.php?id=".$user_id ?>>
+ <?php echo $ppoint . $dest; ?>
+ <div class="content" id="select_driver">
+ <div id="preferred_driver">
+ <h2>Preferred driver</h2>
+ <?php ShowPrefDrv($prefdrv, $con) ?>
+ </div>
+ <div id="other_driver">
+ <h2>Other drivers</h2>
+ </div>
+ <input type="hidden" name="picking_point" value=<?php echo $ppoint ?>>
+ <input type="hidden" name="destination" value=<?php echo $dest?>>
+ <input type="hidden" name="selected_driver" id="selected_driver">
</div>
- <input type="hidden" name="picking_point" value=<?php echo $ppoint ?>>
- <input type="hidden" name="destination" value=<?php echo $dest?>>
- <input type="hidden" name="selected_driver" id="selected_driver">
- </div>
- </form>
- <?php mysqli_close($con) ?>
- </div>
+ </form>
+ <?php mysqli_close($con) ?>
+ </div>
</body>
<script type="text/javascript">
function chooseDriver(driver_id) {
diff --git a/order/select_location.php b/order/select_location.php
index d372739347dd5ef63d73d1024eef74454d24b0cf..baf86b2488dc5a00bf5b257c735d18b765231d68 100644
--- a/order/select_location.php
+++ b/order/select_location.php
@@ -27,26 +27,48 @@
<div class="menu_container">
<?php include'../template/menu.php';?>
</div>
+ <script>
+ document.getElementById("order_link").setAttribute("class", "menu menu_active");
+ </script>
- <h1>Make an Order</h1>
- <div class="submenu_container">
- <div class="submenu left">
- Select Destination
- </div>
-
- <div class="submenu mid">
- Select a Driver
- </div>
+ <div class="order_container">
+ <div class="subheader">
+ <div class="title"><h1>Make an Order</h1></div>
+ </div>
+ <div class="submenu_container">
+ <div class="submenu left submenu_active">
+ <div class="step_num">
+ <p>1</p>
+ </div>
+ <div class="step_name">
+ <p>Select Destination</p>
+ </div>
+ </div>
+
+ <div class="submenu mid">
+ <div class="step_num">
+ <p>2</p>
+ </div>
+ <div class="step_name">
+ <p>Select a Driver</p>
+ </div>
+ </div>
- <div class="submenu right">
- Complete Order
+ <div class="submenu right">
+ <div class="step_num">
+ <p>3</p>
+ </div>
+ <div class="step_name">
+ <p>Complete Order</p>
+ </div>
+ </div>
</div>
- </div>
- <form method="post" action=<?php echo "select_driver.php?id=" . $user_id;?>>
- <div class="content" id="select_destination">
- <div>
+
+
+ <form method="post" action=<?php echo "select_driver.php?id=" . $user_id;?>>
+ <div class="content" id="select_destination">
<div>
- <span>Picking point</span>
+ <span style="width: 30%;">Picking point</span>
<input type="text" name="picking_point">
</div>
<div>
@@ -57,10 +79,11 @@
<span>Preferred driver</span>
<input type="text" name="preferred_driver">
</div>
+ <input type="submit" name="submit_select_loc" class="button green" value="Next">
</div>
- <input type="submit" name="submit_select_loc" class="button green">
- </div>
- </form>
+ </form>
+ </div>
+
</div>
</body>
</html>