udate ui
This commit is contained in:
Aung Myo
@@ -2,39 +2,94 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-4 col-md-4 col-sm-4">
|
<div class="col-lg-4 col-md-4 col-sm-4">
|
||||||
<ul class="nav nav-tabs tab-col-teal" role="tablist">
|
<ul class="nav nav-tabs tab-col-teal" role="tablist">
|
||||||
<li class="nav-item active" data-color="#F44336">
|
<li class="nav-item active" data-color="#F44336" style="background-color: #F44336;">
|
||||||
<a class="nav-link" data-toggle="tab" href="#complete" role="tab"><%= t :pending %></a>
|
<a class="nav-link" data-toggle="tab" href="#complete" role="tab"><p class="num">4</p> <%= t :pending %></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item" data-color="#673AB7">
|
<li class="nav-item" data-color="#673AB7" style="background-color: #673AB7;">
|
||||||
<a class="nav-link" data-toggle="tab" href="#tables" role="tab"><%= t :processing %></a>
|
<a class="nav-link" data-toggle="tab" href="#tables" role="tab"><p class="num">4</p> <%= t :processing %></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item" data-color="#009688">
|
<li class="nav-item" data-color="#009688" style="background-color: #009688;">
|
||||||
<a class="nav-link" data-toggle="tab" href="#rooms" role="tab"><%= t :delivering %></a>
|
<a class="nav-link" data-toggle="tab" href="#rooms" role="tab"><p class="num">4</p> <%= t :delivering %></a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item" data-color="#03A9F4">
|
<li class="nav-item" data-color="#03A9F4" style="background-color: #03A9F4;">
|
||||||
<a class="nav-link" data-toggle="tab" href="#orders" role="tab"><%= t :completed %></a>
|
<a class="nav-link" data-toggle="tab" href="#orders" role="tab"><p class="num">4</p> <%= t :completed %></a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="tab-content m-t-10" id="custom-slimscroll">
|
<div class="tab-content">
|
||||||
<div class="tab-pane dining" id="complete" role="tabpanel">
|
<div class="tab-pane dining" id="complete" role="tabpanel">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">rrrrr</div>
|
<div class="card-block">
|
||||||
<div class="card-block">
|
<div class="card-text">
|
||||||
RRRRRR
|
<table table table-striped>
|
||||||
<span class="pull-right">SSSSSSSSSSS</span>
|
<tbody>
|
||||||
</div>
|
<tr>
|
||||||
|
<td class="item-name">aaaa</td>
|
||||||
|
<td class="item-attr">aaaa</td>
|
||||||
|
<td class="item-attr">ssss</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="item-name">aaaa</td>
|
||||||
|
<td class="item-attr">aaaa</td>
|
||||||
|
<td class="item-attr">ssss</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="item-name">aaaa</td>
|
||||||
|
<td class="item-attr">aaaa</td>
|
||||||
|
<td class="item-attr">ssss</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="item-name">aaaa</td>
|
||||||
|
<td class="item-attr">aaaa</td>
|
||||||
|
<td class="item-attr">ssss</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--- Panel 3 - Orders -->
|
<!--- Panel 3 - Orders -->
|
||||||
<div class="tab-pane dining" id="orders" role="tabpanel">
|
<div class="tab-pane dining" id="orders" role="tabpanel">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header"></div>
|
<div class="card-header" style="color:">
|
||||||
<div class="card-block">
|
<table>
|
||||||
oOOOOOOOOOOOOO
|
<tr>
|
||||||
</div>
|
<td>No.11 (DELIVERY)</td>
|
||||||
|
<td>0065 4321 0012</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="card-block">
|
||||||
|
<div class="card-text">
|
||||||
|
<table table table-striped>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="item-name">aaaa</td>
|
||||||
|
<td class="item-attr">aaaa</td>
|
||||||
|
<td class="item-attr">ssss</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="item-name">aaaa</td>
|
||||||
|
<td class="item-attr">aaaa</td>
|
||||||
|
<td class="item-attr">ssss</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="item-name">aaaa</td>
|
||||||
|
<td class="item-attr">aaaa</td>
|
||||||
|
<td class="item-attr">ssss</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="item-name">aaaa</td>
|
||||||
|
<td class="item-attr">aaaa</td>
|
||||||
|
<td class="item-attr">ssss</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -42,9 +97,82 @@
|
|||||||
|
|
||||||
<div class="'col-lg-4 col-md-4 col-sm-4'">
|
<div class="'col-lg-4 col-md-4 col-sm-4'">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header"></div>
|
<div class="card-header custom-card-header" style="color:">
|
||||||
<div class="card-block">
|
<table class="table">
|
||||||
|
<tr>
|
||||||
|
<td width ="70%" class="header-td align-left"><b class="col-pink font-16">No.11</b>
|
||||||
|
<span class="font-13">(DELIVERY)</span>
|
||||||
|
</td>
|
||||||
|
<td width ="30%" class="header-td font-16 align-right"><b>0065 4321</b></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="card-block custom-card-block">
|
||||||
|
<table class="table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td width ="70%" class="body-td align-left">
|
||||||
|
MENU ITEM 01
|
||||||
|
<br><span class="font-13">2 <span class="col-blue">X700</span></span>
|
||||||
|
</td>
|
||||||
|
<td width ="30%" class="body-td align-right">1400.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width ="70%" class="body-td align-left">
|
||||||
|
MENU ITEM 01
|
||||||
|
<br><span class="font-13">2 <span class="col-blue">X700</span></span>
|
||||||
|
</td>
|
||||||
|
<td width ="30%" class="body-td align-right">1400.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width ="70%" class="body-td align-left">
|
||||||
|
MENU ITEM 01
|
||||||
|
<br><span class="font-13">2 <span class="col-blue">X700</span></span>
|
||||||
|
</td>
|
||||||
|
<td width ="30%" class="body-td align-right">1400.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width ="70%" class="body-td align-left">
|
||||||
|
MENU ITEM 01
|
||||||
|
<br><span class="font-13">2 <span class="col-blue">X700</span></span>
|
||||||
|
</td>
|
||||||
|
<td width ="30%" class="body-td align-right">1400.00</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer custom-card-footer">
|
||||||
|
<table class="table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td width ="70%" class="body-td align-left">
|
||||||
|
MENU ITEM 01
|
||||||
|
</td>
|
||||||
|
<td width ="30%" class="body-td align-right">1400.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width ="70%" class="body-td align-left">
|
||||||
|
MENU ITEM 01
|
||||||
|
<br><span class="font-13">2 <span class="col-blue">X700</span></span>
|
||||||
|
</td>
|
||||||
|
<td width ="30%" class="body-td align-right">1400.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width ="70%" class="body-td align-left">
|
||||||
|
MENU ITEM 01
|
||||||
|
<br><span class="font-13">2 <span class="col-blue">X700</span></span>
|
||||||
|
</td>
|
||||||
|
<td width ="30%" class="body-td align-right">1400.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td width ="70%" class="body-td align-left">
|
||||||
|
MENU ITEM 01
|
||||||
|
<br><span class="font-13">2 <span class="col-blue">X700</span></span>
|
||||||
|
</td>
|
||||||
|
<td width ="30%" class="body-td align-right">1400.00</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -59,16 +187,77 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Column One -->
|
|
||||||
<script>
|
|
||||||
$(document).ready(function() {
|
|
||||||
color = $(".active").attr("data-color");
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
|
.nav-tabs > li.active > a,
|
||||||
color
|
.nav-tabs > li.active > a:hover,
|
||||||
|
.nav-tabs > li.active > a:focus {
|
||||||
|
border-bottom: 2px solid #2196F3 ;
|
||||||
|
bottom: 2px ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs .nav-link {
|
||||||
|
padding: 0.9286em .35em;
|
||||||
|
}
|
||||||
|
.nav-tabs li a.active {
|
||||||
|
color: #111 !important;
|
||||||
|
border-bottom: 0px solid #fff !important;
|
||||||
|
}
|
||||||
|
.nav-tabs .nav-link.active {
|
||||||
|
color: #111;
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
.nav-tabs > li > a {
|
||||||
|
margin-right: 0px;
|
||||||
|
color:#fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs > li > a {
|
||||||
|
border-bottom: 2px solid #2196F3;
|
||||||
|
bottom: 2px;
|
||||||
|
}
|
||||||
|
.nav-tabs.tab-col-teal > li > a:before {
|
||||||
|
border-bottom: 0px solid #009688;
|
||||||
|
}
|
||||||
|
.nav-item .a .nav-link {
|
||||||
|
}
|
||||||
|
.num{
|
||||||
|
color:#fff;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: -1px !important;
|
||||||
|
}
|
||||||
|
.nav-tabs .nav-link.active > p{
|
||||||
|
color: #111;
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Custosm Class*/
|
||||||
|
.table .header-td{
|
||||||
|
border-top:0px solid !important;
|
||||||
|
border-bottom: 0px solid !important;
|
||||||
|
padding:0px 7px !important;
|
||||||
|
border-top:0px solid !important;
|
||||||
|
border-bottom: 0px solid !important;
|
||||||
|
}
|
||||||
|
.card-block .table td:first-child,
|
||||||
|
.card-block .table td:nth-child(2),
|
||||||
|
.card-footer .table td:first-child,
|
||||||
|
.card-footer .table td:nth-child(2){
|
||||||
|
border-top:0px solid !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.card-block .table .body-td:last-child,
|
||||||
|
.card-footer .table .body-td:last-child{
|
||||||
|
border-bottom:0px solid !important;
|
||||||
|
}*/
|
||||||
|
.custom-card-header{
|
||||||
|
border-bottom: 1px solid #F8BBD0 !important;
|
||||||
|
}
|
||||||
|
.custom-card-footer{
|
||||||
|
border-top: 1px solid #F8BBD0 !important;
|
||||||
|
}
|
||||||
|
.custom-card-header,
|
||||||
|
.custom-card-block,
|
||||||
|
.custom-card-footer{
|
||||||
|
padding :5px !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user