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 * Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE) * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE)
*/ */
/**/
#wrapper { #wrapper {
padding-left: 0; padding-left: 0;
-webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
@@ -20,14 +21,13 @@
/* z-index: 1000;*/ /* z-index: 1000;*/
/*position: fixed;*/ /*position: fixed;*/
z-index: 1; z-index: 1;
position: absolute; position: ;
left: 200px; left: 200px;
width: 0; width: 0;
height: 100%; height: 100%;
margin-left: -200px; margin-left: -224px;
margin-top:-20px; margin-top:-20px;
overflow-x: auto; overflow-x: ;
background: #222d32;
-webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease; -o-transition: all 0.5s ease;
@@ -55,6 +55,7 @@
.sidebar-nav { .sidebar-nav {
position: absolute; position: absolute;
background: #222d32;
top: 0; top: 0;
width: 200px; width: 200px;
margin: 0; margin: 0;
@@ -133,40 +134,90 @@
margin-right: 0; margin-right: 0;
} }
} }
.accordion {
.dropdown-item{
padding: 0px 1.5rem !important;
}
.sidebar-sub-menu {
position: relative !important;
width: 200px; width: 200px;
list-style: none; list-style: none;
font-size: 14px; font-size: 14px;
background-color: #161926; color: #999999 ;
padding: 0px !important; padding: 0px !important;
margin: 0px !important; margin: 0px !important;
} }
.sidebar-sub-item { .accordion .link {
display: block; cursor: pointer;
width: 100%; display: block;
/* padding: 15px 15px 15px 42px;
/*clear: both;*/ color: #4D4D4D;*/
/*font-weight: normal;*/ /* font-size: 14px;
/*color: #292b2c; font-weight: 700;*/
text-align: inherit; /*border-bottom: 1px solid #CCC;*/
white-space: nowrap; position: relative;
background: none; -webkit-transition: all 0.4s ease;
border: 0;*/ -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; .accordion li i.fa-chevron-down {
font-weight: bold; right: 12px;
padding: 9px 20px; 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> </head>
<body> <body>
<%= render 'layouts/header_oqs' %> <%= render 'layouts/header' %>
<div class="container-fluid"> <div class="container-fluid">
<% flash.each do |type, message| %> <% flash.each do |type, message| %>
<div class="alert fade in"> <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> <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"> <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"> <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> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Settings</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
@@ -74,7 +74,7 @@
</li> </li>
</ul> --> </ul>
</div> </div>
<% if current_login_employee %> <% if current_login_employee %>
@@ -99,9 +99,38 @@
} }
</style> </style>
<!-- Menu Toggle Script --> <!-- Menu Toggle Script -->
<script> <script>
$("#sx-menu-toggle").click(function(e) { $("#sx-menu-toggle").click(function(e) {
e.preventDefault(); e.preventDefault();
$("#wrapper").toggleClass("toggled"); $("#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"> <div id="sidebar-wrapper">
<ul class="sidebar-nav"> <ul id="accordion" class="accordion sidebar-nav">
<li class="header"><a>Main Navigation</a></li> <li class="header"><a>Main Navigation</a></li>
<li> <li><%= link_to "Dashboard ", dashboard_path,:class =>"" %> </li>
<%= link_to "Dashboard ", dashboard_path,:class =>"" %> <li><%= link_to "OQS ", oqs_root_path,:class =>"" %></li>
</li> <li><%= link_to "Cashier ", origami_root_path,:class =>"" %></li>
<li> <li><%= link_to "CRM ", crm_customers_path,:class =>"" %></li>
<%= link_to "OQS ", oqs_root_path,:class =>"" %> <li><%= link_to "Inventory ", inventory_path,:class =>"" %></li>
</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 class="header"><a>Settings</a></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> <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>
<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>
<li> <li><%= link_to "Cashier Terminal ", settings_cashier_terminals_path,:class =>"" %></li>
<%= link_to "Menu ", settings_menus_path,:class =>"" %> <li><%= link_to "Print Settings ", print_settings_path,:class =>"" %></li>
</li> <li><%= link_to "Staff ", settings_employees_path,:class =>"" %></li>
<li><%= link_to "Product ", settings_products_path,:class =>"" %></li>
<li> <li><%= link_to "Promotion ", settings_promotions_path,:class =>"" %></li>
<%= link_to "Cashier Terminal ", transactions_sales_path,:class =>"" %> <li><%= link_to "Reports", reports_dailysale_index_path, :class =>"" %></li>
</li> </ul>
</div>
<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>