From aec3f780d2b2b8fe9bf60bc47e4cc107ba641799 Mon Sep 17 00:00:00 2001
From: Fadhil Imam Kurnia <fadhilimamk@gmail.com>
Date: Fri, 6 Oct 2017 15:26:39 +0700
Subject: [PATCH] Styling order page
---
public/style.css | 68 ++++++++++++++++++++++++++++++++++++++++---
src/view/order.php | 72 +++++++++++++++++++++++++++++++++++++---------
2 files changed, 122 insertions(+), 18 deletions(-)
diff --git a/public/style.css b/public/style.css
index 276cf0a..18976aa 100644
--- a/public/style.css
+++ b/public/style.css
@@ -7,7 +7,7 @@ body {
.container {
width: 80%;
- max-width: 1200px;
+ max-width: 700px;
margin: 50px auto;
background-color: white;
padding: 20px;
@@ -70,7 +70,7 @@ body {
.btn {
border-radius: 5px;
border: 1px solid black;
- padding:5px 15px;
+ padding: 5px 15px;
color: black;
text-decoration: none;
font-size: medium;
@@ -101,8 +101,8 @@ body {
.tab {
outline: 1px solid #004D40;
- padding-top: 10px;
- padding-bottom: 10px;
+ padding-top: 15px;
+ padding-bottom: 15px;
font-weight: 900;
color: black;
text-decoration: none;
@@ -216,4 +216,64 @@ table, th, td {
width: 17px;
height: 17px;
content: "";
+}
+
+/* ------------------------- ORDER -------------------------*/
+
+.small-circle {
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ background-color: #c2c2c2;
+ font-size: large;
+ vertical-align: middle;
+ margin: 0;
+}
+
+.page-tab {
+ width: 180px;
+ height: 50px;
+ border: 1px solid black;
+ margin: 0 auto;
+ display: table;
+ box-sizing: border-box;
+ vertical-align: middle;
+}
+
+.page-tab.selected {
+ background-color: #fffead;
+}
+
+.page-tab > .page-tab-image {
+ float: left;
+ width: 30%;
+ height:100%;
+ text-align: center;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.page-tab >.page-tab-image >.circle {
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ margin: auto;
+ background-color: #c2c2c2;
+ padding: auto;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.page-tab > .page-tab-content {
+ float: right;
+ width: 70%;
+ height:100%;
+ display: inline-block;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
}
\ No newline at end of file
diff --git a/src/view/order.php b/src/view/order.php
index 54ce442..3d3d0a4 100644
--- a/src/view/order.php
+++ b/src/view/order.php
@@ -4,21 +4,65 @@
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
-<div class="container">
- <div class="row">
- <div class="col-3"><span class="logo"></span></div>
- <div class="col-3 text-right">
- <p>
- Hi, <b><?=$user->username?></b> !<br>
- <a href="/">Logout</a>
- </p>
+ <div class="container">
+ <div class="row">
+ <div class="col-3"><span class="logo"></span></div>
+ <div class="col-3 text-right">
+ <p>
+ Hi, <b><?=$user->username?></b> !<br>
+ <a href="/">Logout</a>
+ </p>
+ </div>
+ </div>
+ <div class="row">
+ <a class="col-2 tab text-center active" href="/main/order?u=<?=$id?>">ORDER</a>
+ <a class="col-2 tab text-center" href="/main/hostory?u=<?=$id?>">HISTORY</a>
+ <a class="col-2 tab text-center" href="/main/profil?u=<?=$id?>">MY PROFILE</a>
+ </div>
+ <div class="row">
+ <div class="col-6"><h1>MAKE AN ORDER</h1></div>
+ </div>
+ <div class="row">
+ <div class="col-2">
+ <div class="page-tab selected">
+ <div class="page-tab-image">
+ <div class="circle">1</div>
+ </div>
+ <div class="page-tab-content">
+ Select Destination
+ </div>
+ </div>
+ </div>
+ <div class="col-2">
+ <div class="page-tab">
+ <div class="page-tab-image">
+ <div class="circle">2</div>
+ </div>
+ <div class="page-tab-content">
+ Select a Driver
+ </div>
+ </div>
+ </div>
+ <div class="col-2">
+ <div class="page-tab">
+ <div class="page-tab-image">
+ <div class="circle">3</div>
+ </div>
+ <div class="page-tab-content">
+ Complete your order
+ </div>
+ </div>
+ </div>
+ </div>
+ <br>
+ <div>
+ Ini konten order
</div>
</div>
- <div class="row">
- <a class="col-2 tab text-center active" href="/main/order?u=<?=$id?>">ORDER</a>
- <a class="col-2 tab text-center" href="/main/hostory?u=<?=$id?>">HISTORY</a>
- <a class="col-2 tab text-center" href="/main/profil?u=<?=$id?>">MY PROFILE</a>
- </div>
-</div>
+
+ <script type="text/javascript">
+
+ </script>
+
</body>
</html>
\ No newline at end of file
--
GitLab