update tab and select

This commit is contained in:
Aung Myo
2017-10-20 12:22:05 +06:30
parent 990e32a332
commit 6066eb2a4f
5 changed files with 117 additions and 95 deletions

View File

@@ -21,6 +21,7 @@
//= require settings/processing_items //= require settings/processing_items
//= require momentjs/moment //= require momentjs/moment
//= require bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker //= require bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker
//= require bootstrap/js/bootstrap.js
//= require multi-select/js/jquery.multi-select.js //= require multi-select/js/jquery.multi-select.js
//= require jquery-slimscroll/jquery.slimscroll.js //= require jquery-slimscroll/jquery.slimscroll.js
//= require node-waves/waves.js //= require node-waves/waves.js
@@ -58,11 +59,6 @@ $(document).on('turbolinks:load', function() {
}); });
// Material Select Initialization
$(document).ready(function() {
$('.mdb-select').material_select();
});
$(function(){ $(function(){
$('body').bootstrapMaterialDesign(); $('body').bootstrapMaterialDesign();

View File

@@ -5,7 +5,6 @@
@import "sweetalert/sweetalert.css"; @import "sweetalert/sweetalert.css";
@import "multi-select/css/multi-select.css"; @import "multi-select/css/multi-select.css";
@import "bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker"; @import "bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker";
@import "morrisjs/morris"; @import "morrisjs/morris";
@import "fileinput.min"; @import "fileinput.min";
@import "BSBMaterial/style"; @import "BSBMaterial/style";
@@ -81,10 +80,6 @@ section.content {
top: 50px; top: 50px;
} }
.nav-tabs li a.active {
color: #000 !important;
}
.info-box { .info-box {
margin-bottom: 20px; margin-bottom: 20px;
} }
@@ -148,7 +143,43 @@ section.content {
top: 0px; top: 0px;
margin-left: 0px; margin-left: 0px;
} }
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs li a.active {
color: #000 !important;
border-bottom: 2px solid #2196F3 !important;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
text-decoration:none;
}
.nav-tabs .nav-link {
padding: 0.7286em .8575em;
}
/* End Reset Theme */ /* End Reset Theme */
/* *************************************************** */ /* *************************************************** */

View File

@@ -1,18 +1,17 @@
<div class="row"> <div class="row">
<div class="col-lg-11 col-md-11 col-sm-11"> <div class="col-lg-11 col-md-11 col-sm-11">
<!-- Column One --> <!-- Column One -->
<!-- Nav tabs --> <!-- Nav tabs -->
<ul class="nav nav-tabs tab-col-purple" role="tablist"> <ul class="nav nav-tabs tab-nav-right" role="tablist">
<li role="presentation" class="nav-item"> <li role="presentation" class="active nav-item">
<a class="nav-link active" data-toggle="tab" href="#customer" aria-expanded="true">Customer Details</a> <a class="nav-link" data-toggle="tab" href="#customer" >Customer Details</a>
</li> </li>
<li class="nav-item" role="presentation"> <li role="presentation" class="nav-item" >
<a class="nav-link " data-toggle="tab" href="#order" aria-expanded="true">Order Details</a> <a class="nav-link" data-toggle="tab" href="#order" >Order Details</a>
</li> </li>
<li class="nav-item" role="presentation"> <li role="presentation" class="nav-item" >
<a class="nav-link" data-toggle="tab" href="#sale" aria-expanded="true">Sale Details</a> <a class="nav-link" data-toggle="tab" href="#sale" >Sale Details</a>
</li> </li>
</ul> </ul>
<!-- Nav tabs - End --> <!-- Nav tabs - End -->

View File

@@ -2,13 +2,10 @@
<div class="row clearfix"> <div class="row clearfix">
<!-- Column One --> <!-- Column One -->
<div class="col-lg-6 col-md-6 col-sm-6"> <div class="col-lg-6 col-md-6 col-sm-6">
<!-- Nav tabs --> <!-- Nav tabs -->
<ul class="nav nav-tabs tab-col-teal" role="tablist"> <ul class="nav nav-tabs tab-col-teal" role="tablist">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#completed" role="tab">Completed</a> <a class="nav-link" data-toggle="tab" href="#completed" role="tab">Completed</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tables" role="tab">Tables</a> <a class="nav-link active" data-toggle="tab" href="#tables" role="tab">Tables</a>
@@ -22,98 +19,97 @@
</ul> </ul>
<!-- Nav tabs - End --> <!-- Nav tabs - End -->
<div id="custom-slimscroll"> <div id="custom-slimscroll">
<div class="tab-content" > <div class="tab-content m-t-10">
<!--- Panel 0 - Completed Orders --> <!--- Panel 0 - Completed Orders -->
<div class="tab-pane dining" id="completed" role="tabpanel">
<div class="tab-pane dining" id="completed" role="tabpanel"> <div class="card-columns">
<div class="card-columns"> <% @complete.each do |sale| %>
<% @complete.each do |sale| %> <div class="card sales red text-white" data-id="<%= sale.sale_id %>">
<div class="card sales red text-white" data-id="<%= sale.sale_id %>"> <div class="card-block">
<div class="card-block"> <%= sale.receipt_no %>
<%= sale.receipt_no %> <span class="pull-right font-12"><%= sale.sale_status %></span>
<span class="pull-right font-12"><%= sale.sale_status %></span> </div>
</div> </div>
</div> <% end %>
<% end %> </div>
</div> </div>
</div>
<!--- Panel 1 - Table Orders --> <!--- Panel 1 - Table Orders -->
<div class="tab-pane dining active " id="tables" role="tabpanel"> <div class="tab-pane dining active " id="tables" role="tabpanel">
<div class="card-columns"> <div class="card-columns">
<% @tables.each do |table| %> <% @tables.each do |table| %>
<% if table.status == 'occupied' %> <% if table.status == 'occupied' %>
<% if table.get_booking.nil? %> <% if table.get_booking.nil? %>
<div class="card tables red text-white table_<%= table.id %>" data-id="<%= table.id %>"> <div class="card tables red text-white table_<%= table.id %>" data-id="<%= table.id %>">
<div class="card-block"> <div class="card-block">
<%= table.name %> <%= table.name %>
<span class="pull-right font-12 new_text_<%= table.id %>"> billed</span> <span class="pull-right font-12 new_text_<%= table.id %>"> billed</span>
<div style="font-size:12px;"></div> <div style="font-size:12px;"></div>
</div>
</div> </div>
</div> <% else %>
<% else %> <div class="card tables blue text-white table_<%= table.id %>" data-id="<%= table.id %>">
<div class="card tables blue text-white table_<%= table.id %>" data-id="<%= table.id %>"> <div class="card-block">
<div class="card-block"> <%= table.name %>
<%= table.name %> <span class="pull-right font-12 new_text_<%= table.id %>"> new</span>
<span class="pull-right font-12 new_text_<%= table.id %>"> new</span> </div>
</div> </div>
<% end %>
<% else %>
<div class="card tables green text-white table_<%= table.id %>" data-id="<%= table.id %>">
<div class="card-block">
<%= table.name %>
<span class="pull-right font-12 new_text_<%= table.id %> hide"> new</span>
</div> </div>
<% end %>
<% else %>
<div class="card tables green text-white table_<%= table.id %>" data-id="<%= table.id %>">
<div class="card-block">
<%= table.name %>
<span class="pull-right font-12 new_text_<%= table.id %> hide"> new</span>
</div> </div>
</div> <% end %>
<% end %> <% end %>
<% end %> </div>
</div> </div>
</div>
<!--- Panel 2 - Room Orders --> <!--- Panel 2 - Room Orders -->
<div class="tab-pane dining" id="rooms" role="tabpanel"> <div class="tab-pane dining" id="rooms" role="tabpanel">
<div class="card-columns"> <div class="card-columns">
<% @rooms.each do |room| %> <% @rooms.each do |room| %>
<% if room.status == 'occupied' %> <% if room.status == 'occupied' %>
<div class="card rooms red text-white table_<%= room.id %>" data-id="<%= room.id %>"> <div class="card rooms red text-white table_<%= room.id %>" data-id="<%= room.id %>">
<div class="card-block"> <div class="card-block">
<%= room.name %> <%= room.name %>
<% if room.get_booking.nil? %> <% if room.get_booking.nil? %>
<span class="pull-right font-12 new_text_<%= room.id %>"> billed</span> <span class="pull-right font-12 new_text_<%= room.id %>"> billed</span>
<% else %> <% else %>
<span class="pull-right font-12 new_text_<%= room.id %>"> new</span> <span class="pull-right font-12 new_text_<%= room.id %>"> new</span>
<% end %> <% end %>
</div>
</div> </div>
</div> <% else %>
<% else %> <div class="card rooms green text-white table_<%= room.id %>" data-id="<%= room.id %>">
<div class="card rooms green text-white table_<%= room.id %>" data-id="<%= room.id %>"> <div class="card-block">
<div class="card-block"> <%= room.name %>
<%= room.name %> <span class="pull-right font-12 new_text_<%= room.id %> hide">
<span class="pull-right font-12 new_text_<%= room.id %> hide"> </div>
</div> </div>
</div> <% end %>
<% end %> <% end %>
<% end %> </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-columns"> <div class="card-columns">
<% @orders.each do |order| %> <% @orders.each do |order| %>
<div class="card orders red text-white" data-id="<%= order.order_id %>"> <div class="card orders red text-white" data-id="<%= order.order_id %>">
<div class="card-block"> <div class="card-block">
<%= order.order_id %> <%= order.order_id %>
</div>
</div> </div>
</div> <% end %>
<% end %> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- tabs - End --> <!-- tabs - End -->
</div> </div>
<!-- Column One --> <!-- Column One -->

View File

@@ -20,7 +20,7 @@
</ul> </ul>
<!-- Nav tabs - End --> <!-- Nav tabs - End -->
<div id="custom-slimscroll"> <div id="custom-slimscroll">
<div class="tab-content" > <div class="tab-content m-t-10" >
<!--- Panel 0 - Completed Orders --> <!--- Panel 0 - Completed Orders -->
<div class="tab-pane dining" id="completed" role="tabpanel"> <div class="tab-pane dining" id="completed" role="tabpanel">
<div class="card-columns"> <div class="card-columns">