From 4810628930fdc48184709ed92debff2bb07a6369 Mon Sep 17 00:00:00 2001
From: Aung Myo <aungmyo.zaw@code2lab.com>
Date: Tue, 10 Apr 2018 09:56:31 +0630
Subject: [PATCH] udate ui

---
 .../origami/order_reservation/index.html.erb  | 261 +++++++++++++++---
 1 file changed, 225 insertions(+), 36 deletions(-)

diff --git a/app/views/origami/order_reservation/index.html.erb b/app/views/origami/order_reservation/index.html.erb
index fe23f40e..f22d5f09 100644
--- a/app/views/origami/order_reservation/index.html.erb
+++ b/app/views/origami/order_reservation/index.html.erb
@@ -2,39 +2,94 @@
   <div class="row">
     <div class="col-lg-4 col-md-4 col-sm-4">
       <ul class="nav nav-tabs tab-col-teal" role="tablist">
-        <li class="nav-item active" data-color="#F44336">
-          <a class="nav-link" data-toggle="tab" href="#complete" role="tab"><%= t :pending %></a>
+        <li class="nav-item active" data-color="#F44336" style="background-color: #F44336;">
+          <a class="nav-link" data-toggle="tab" href="#complete" role="tab"><p class="num">4</p> <%= t :pending %></a>
         </li>
-        <li class="nav-item" data-color="#673AB7">
-          <a class="nav-link" data-toggle="tab" href="#tables" role="tab"><%= t :processing %></a>
+        <li class="nav-item" data-color="#673AB7" style="background-color: #673AB7;">
+          <a class="nav-link" data-toggle="tab" href="#tables" role="tab"><p class="num">4</p> <%= t :processing %></a>
         </li>
-        <li class="nav-item" data-color="#009688">
-          <a class="nav-link" data-toggle="tab" href="#rooms" role="tab"><%= t :delivering %></a>
+        <li class="nav-item" data-color="#009688" style="background-color: #009688;">
+          <a class="nav-link" data-toggle="tab" href="#rooms" role="tab"><p class="num">4</p> <%= t :delivering %></a>
         </li>
-        <li class="nav-item" data-color="#03A9F4">
-          <a class="nav-link" data-toggle="tab" href="#orders" role="tab"><%= t :completed %></a>
+        <li class="nav-item" data-color="#03A9F4" style="background-color: #03A9F4;">
+          <a class="nav-link" data-toggle="tab" href="#orders" role="tab"><p class="num">4</p> <%= t :completed %></a>
         </li>
       </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="card">
-                <div class="card-header">rrrrr</div>
-                <div class="card-block">
-                  RRRRRR
-                  <span class="pull-right">SSSSSSSSSSS</span>
-                </div>
-              </div>          
+          <div class="card">
+            <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>
 
         <!--- Panel 3 - Orders -->
         <div class="tab-pane dining" id="orders" role="tabpanel">
-              <div class="card">
-                <div class="card-header"></div>
-                <div class="card-block">
-                 oOOOOOOOOOOOOO
-                </div>
-              </div>          
+          <div class="card">
+            <div class="card-header" style="color:">
+              <table>
+                <tr>
+                  <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>
 
@@ -42,11 +97,84 @@
 
     <div class="'col-lg-4 col-md-4 col-sm-4'">
       <div class="card">
-        <div class="card-header"></div>
-        <div class="card-block">
-          
+          <div class="card-header custom-card-header" style="color:">
+            <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>
+        <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 class="'col-lg-4 col-md-4 col-sm-4'">
@@ -59,16 +187,77 @@
     </div>
   </div>
 </div>
-<!-- Column One -->
-<script>
-  $(document).ready(function() {
-   color = $(".active").attr("data-color");
-   
-});
-  
-</script>
 <style type="text/css">
-  .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
-  color
+  .nav-tabs > li.active > a, 
+  .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>
\ No newline at end of file