From f4a6ff384761c776f9bae29620e94695afa1071f Mon Sep 17 00:00:00 2001 From: Aung Myo Date: Tue, 26 Sep 2017 18:06:43 +0630 Subject: [PATCH] update ui design --- app/assets/stylesheets/sx-sidebar.css | 111 +++++++++++++++++++------- app/views/layouts/OQS.html.erb | 2 +- app/views/layouts/_header.html.erb | 35 +++++++- app/views/layouts/_sidebar.html.erb | 109 +++++++------------------ 4 files changed, 145 insertions(+), 112 deletions(-) diff --git a/app/assets/stylesheets/sx-sidebar.css b/app/assets/stylesheets/sx-sidebar.css index 933b5e32..6f8d5f04 100644 --- a/app/assets/stylesheets/sx-sidebar.css +++ b/app/assets/stylesheets/sx-sidebar.css @@ -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; } + diff --git a/app/views/layouts/OQS.html.erb b/app/views/layouts/OQS.html.erb index 102edba2..3a149b19 100644 --- a/app/views/layouts/OQS.html.erb +++ b/app/views/layouts/OQS.html.erb @@ -14,7 +14,7 @@ - <%= render 'layouts/header_oqs' %> + <%= render 'layouts/header' %>
<% flash.each do |type, message| %>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index ea3ffc5e..9afcb585 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -8,7 +8,7 @@ E-menu <% if current_login_employee %> @@ -99,9 +99,38 @@ } + \ No newline at end of file + + $(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); +}); + + diff --git a/app/views/layouts/_sidebar.html.erb b/app/views/layouts/_sidebar.html.erb index a34061b4..49571e18 100644 --- a/app/views/layouts/_sidebar.html.erb +++ b/app/views/layouts/_sidebar.html.erb @@ -1,85 +1,38 @@ \ No newline at end of file +
  • <%= link_to "Cashier Terminal ", settings_cashier_terminals_path,:class =>"" %>
    • +
  • <%= link_to "Print Settings ", print_settings_path,:class =>"" %>
    • +
  • <%= link_to "Staff ", settings_employees_path,:class =>"" %>
    • +
  • <%= link_to "Product ", settings_products_path,:class =>"" %>
    • +
  • <%= link_to "Promotion ", settings_promotions_path,:class =>"" %>
    • +
  • <%= link_to "Reports", reports_dailysale_index_path, :class =>"" %>
    • + +