git_admin/sx-fc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update ui design

Browse Source
This commit is contained in:
Aung Myo
2017-09-26 18:06:43 +06:30
parent 7f5ce4e233
commit f4a6ff3847
4 changed files with 145 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
app/assets/stylesheets/sx-sidebar.css
View File

@@ -3,7 +3,8 @@
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE)
*/
/**/
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
@@ -20,14 +21,13 @@
/* z-index: 1000;*/
/*position: fixed;*/
z-index: 1;
position: absolute;
position: ;
left: 200px;
width: 0;
height: 100%;
margin-left: -200px;
margin-left: -224px;
margin-top:-20px;
overflow-x: auto;
background: #222d32;
overflow-x: ;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
@@ -55,6 +55,7 @@
.sidebar-nav {
position: absolute;
background: #222d32;
top: 0;
width: 200px;
margin: 0;
@@ -133,40 +134,90 @@
margin-right: 0;
}
}
.dropdown-item{
padding: 0px 1.5rem !important;
}
.sidebar-sub-menu {
position: relative !important;
.accordion {
width: 200px;
list-style: none;
font-size: 14px;
background-color: #161926;
color: #999999 ;
padding: 0px !important;
margin: 0px !important;
}
.sidebar-sub-item {
display: block;
width: 100%;
/*clear: both;*/
/*font-weight: normal;*/
/*color: #292b2c;
text-align: inherit;
white-space: nowrap;
background: none;
border: 0;*/
.accordion .link {
cursor: pointer;
display: block;
/* padding: 15px 15px 15px 42px;
color: #4D4D4D;*/
/* font-size: 14px;
font-weight: 700;*/
/*border-bottom: 1px solid #CCC;*/
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.fa{
/*.accordion li:last-child .link { border-bottom: 0; }*/
.accordion li i {
position: absolute;
top: 13px;
left: 12px;
font-size: 16px;
color: #999999;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.custom-fa-arrow{
font-size: 20px !important;
font-weight: bold;
padding: 9px 20px;
.accordion li i.fa-chevron-down {
right: 12px;
left: auto;
font-size: 16px;
}
.accordion li .link:hover {
background: rgba(255, 255, 255, 0.2);
color: #FFF;
}
.accordion li.open .link { color: #fff; }
.accordion li.open .link > .submenu { display: block;overflow: hidden;}
.accordion li.open i { color: #fff; }
.accordion li.open i.fa-chevron-down {
-webkit-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.submenu {
display: none;
list-style: none;
margin-left: ;
background: #161926;
font-size: 14px;
}
.submenu li {
margin-left: -38px;
}
.submenu a {
display: block;
text-decoration: none;
color: #d9d9d9;
padding-left:20px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.submenu a:hover {
background: #b63b4d;
color: #FFF;
}

2
app/views/layouts/OQS.html.erb
View File

@@ -14,7 +14,7 @@
</head>
<body>
<%= render 'layouts/header_oqs' %>
<%= render 'layouts/header' %>
<div class="container-fluid">
<% flash.each do |type, message| %>
<div class="alert fade in">

35
app/views/layouts/_header.html.erb
View File

@@ -8,7 +8,7 @@
<a class="navbar-brand" href="<%= dashboard_path %>" style="color: rgba(67, 185, 220, 0.9)">E-menu</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<!-- <ul class="navbar-nav mr-auto">
<ul class="navbar-nav mr-auto">
<li class="navbar-nav mr-auto dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Settings</a>
<ul class="dropdown-menu">
@@ -74,7 +74,7 @@
</li>
</ul> -->
</ul>
</div>
<% if current_login_employee %>
@@ -99,9 +99,38 @@
}
</style>
<!-- Menu Toggle Script -->
<script>
$("#sx-menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion($('#accordion'), false);
});
</script>

109
app/views/layouts/_sidebar.html.erb
View File

@@ -1,85 +1,38 @@
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<ul id="accordion" class="accordion sidebar-nav">
<li class="header"><a>Main Navigation</a></li>
<li>
<%= link_to "Dashboard ", dashboard_path,:class =>"" %>
</li>
<li>
<%= link_to "OQS ", oqs_root_path,:class =>"" %>
</li>
<li>
<%= link_to "Cashier ", origami_root_path,:class =>"" %>
</li>
<li>
<%= link_to "CRM ", crm_customers_path,:class =>"" %>
</li>
<li>
<%= link_to "Inventory ", transactions_sales_path,:class =>"" %>
</li>
<li><%= link_to "Dashboard ", dashboard_path,:class =>"" %> </li>
<li><%= link_to "OQS ", oqs_root_path,:class =>"" %></li>
<li><%= link_to "Cashier ", origami_root_path,:class =>"" %></li>
<li><%= link_to "CRM ", crm_customers_path,:class =>"" %></li>
<li><%= link_to "Inventory ", inventory_path,:class =>"" %></li>
<li class="header"><a>Settings</a></li>
<li><%= link_to "Zones ", settings_zones_path,:class =>"" %></li>
<li><%= link_to "Order Queue Station ", settings_order_queue_stations_path,:class =>"" %></li>
<li><%= link_to "Menu ", settings_menus_path,:class =>"" %></li>
<li>
<%= link_to "Zones ", transactions_sales_path,:class =>"" %>
<div class="link">Transactions<i class="fa fa-chevron-down"></i>
</div>
<ul class="submenu">
<li> <%= link_to "Orders ", transactions_orders_path,:class =>"" %></li>
<li> <%= link_to "Sales ", transactions_sales_path,:class =>"" %></li>
<li> <%= link_to "Credit Note ", transactions_credit_notes_path,:class =>"m" %></li>
</ul>
</li>
<li>
<%= link_to "Order Queue Station ", transactions_sales_path,:class =>"" %>
<div class="link">Blalalal<i class="fa fa-chevron-down"></i>
</div>
<ul class="submenu">
<li> <%= link_to "Orders ", transactions_orders_path,:class =>"" %></li>
<li> <%= link_to "Sales ", transactions_sales_path,:class =>"" %></li>
<li> <%= link_to "Credit Note ", transactions_credit_notes_path,:class =>"m" %></li>
</ul>
</li>
<li>
<%= link_to "Menu ", settings_menus_path,:class =>"" %>
</li>
<li>
<%= link_to "Cashier Terminal ", transactions_sales_path,:class =>"" %>
</li>
<li>
<%= link_to "Print Settings ", transactions_sales_path,:class =>"" %>
</li>
<li>
<%= link_to "Staff ", settings_menus_path,:class =>"" %>
</li>
<li>
<%= link_to "Product ", transactions_sales_path,:class =>"" %>
</li>
<li>
<%= link_to "Promotion ", transactions_sales_path,:class =>"" %>
</li>
<li>
<div class="dropdown">
<a class="custom-dropdown" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Transaction <i class="fa fa-angle-left pull-right custom-fa-arrow"></i>
</a>
<div class="dropdown-menu sidebar-sub-menu" aria-labelledby="dropdownMenuButton">
<%= link_to "Orders ", transactions_orders_path,:class =>"dropdown-item sidebar-sub-item" %>
<%= link_to "Sales ", transactions_sales_path,:class =>"dropdown-item sidebar-sub-item" %>
<%= link_to "Credit Note ", transactions_credit_notes_path,:class =>"dropdown-item sidebar-sub-item" %>
</div>
</div>
</li>
<!-- <li>
<div class="dropdown">
<a class="custom-dropdown" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" ariaroot_path-expanded="false">
Transaction <i class="fa fa-angle-left pull-right custom-fa-arrow"></i>
</a>
<div class="dropdown-menu sidebar-sub-menu" aria-labelledby="dropdownMenuButton">
<%= link_to "Daily Sale Report", reports_dailysale_index_path, :class =>"dropdown-item sidebar-sub-item" %>
<%= link_to "Sales Item Report", reports_saleitem_index_path, :class =>"dropdown-item sidebar-sub-item" %>
<%= link_to "Receipt Report", reports_receipt_no_index_path, :class =>"dropdown-item sidebar-sub-item" %>
<%= link_to "Shift Sale Report", reports_shiftsale_index_path, :class =>"dropdown-item sidebar-sub-item" %>
<%= link_to "Credit Sale Report", reports_credit_payment_index_path, :class =>"dropdown-item sidebar-sub-item" %>
<%= link_to "Void Sale Report", reports_void_sale_index_path, :class =>"dropdown-item sidebar-sub-item" %>
<%= link_to "Commission Report", reports_commission_index_path, :class =>"dropdown-item sidebar-sub-item" %>
<%= link_to "Stock Check Report", reports_stock_check_index_path, :class =>"dropdown-item sidebar-sub-item" %>
</div>
</div>
</li> -->
<li>
<%= link_to "Reports", reports_dailysale_index_path, :class =>"" %>
</li>
</ul>
</div>
<li><%= link_to "Cashier Terminal ", settings_cashier_terminals_path,:class =>"" %></li>
<li><%= link_to "Print Settings ", print_settings_path,:class =>"" %></li>
<li><%= link_to "Staff ", settings_employees_path,:class =>"" %></li>
<li><%= link_to "Product ", settings_products_path,:class =>"" %></li>
<li><%= link_to "Promotion ", settings_promotions_path,:class =>"" %></li>
<li><%= link_to "Reports", reports_dailysale_index_path, :class =>"" %></li>
</ul>
</div>