diff --git a/app/assets/javascripts/theme/sidebar.js b/app/assets/javascripts/theme/sidebar.js index 6ae2b82803..02e1f2fa6b 100644 --- a/app/assets/javascripts/theme/sidebar.js +++ b/app/assets/javascripts/theme/sidebar.js @@ -1,16 +1,14 @@ $(document).ready(function () { - $('#sidebarCollapse').on('click', function () { - $('.dashboard-sidebar').toggleClass('active'); - $('.dashboard-wrapper').toggleClass('sidebar-closed'); - $('.admin-header .toggle-sidebar-icon').toggleClass('fa-caret-right'); - }); setSidebarHeight(); initPerfectScrollbar(); + closeSidebarWithClick(); + closeSidebarOnSmallScreen(); }); $( window ).resize(function() { setSidebarHeight(); + closeSidebarOnSmallScreen(); }); @@ -20,9 +18,43 @@ function setSidebarHeight() { }; function initPerfectScrollbar() { - new PerfectScrollbar('.has-scrollbar', { - wheelSpeed: 2, - wheelPropagation: true, - minScrollbarLength: 20 - }); + new PerfectScrollbar('.has-scrollbar', { + wheelSpeed: 2, + wheelPropagation: true, + minScrollbarLength: 20 + }); }; + +function closeSidebarWithClick() { + $('#sidebarCollapse').on('click', function () { + if (!$('body').hasClass('sidebar-closed')) { + $('body').addClass('sidebar-closed-by-user'); + closeSidebar(); + } else { + $('body').removeClass('sidebar-closed-by-user'); + openSidebar(); + } + }); +} + +function closeSidebarOnSmallScreen() { + if ($(this).width() <= 992) { + closeSidebar(); + $('.hide-on-closed-sidebar').hide(); + } else { + $('.hide-on-closed-sidebar').show(); + if (!$('body').hasClass('sidebar-closed-by-user')) { + openSidebar(); + } + } +} + +function closeSidebar() { + $('body').addClass('sidebar-closed'); + $('.admin-header .toggle-sidebar-icon').addClass('fa-caret-right'); +} + +function openSidebar() { + $('body').removeClass('sidebar-closed'); + $('.admin-header .toggle-sidebar-icon').removeClass('fa-caret-right'); +} \ No newline at end of file diff --git a/app/assets/stylesheets/theme/layout.scss b/app/assets/stylesheets/theme/layout.scss index 31daa806e5..0ca02e472f 100644 --- a/app/assets/stylesheets/theme/layout.scss +++ b/app/assets/stylesheets/theme/layout.scss @@ -12,7 +12,6 @@ body { margin-top: -3px; } } - .dashboard-footer { margin-left: 250px; } @@ -30,7 +29,7 @@ body { } // closed sidebar - &.sidebar-closed { + body.sidebar-closed & { margin-left: 80px; .top-logo, .user-name { display: none; @@ -41,6 +40,24 @@ body { .sidebar-menu li.active a { border-left: 0; } + .sidebar-menu { + li { + display: flex; + justify-content: center; + a { + .menu-text { + display: none; + } + .icon { + margin: 0; + font-size: 24px; + text-align: center; + opacity: .8; + color: white; + } + } + } + } } } @@ -52,11 +69,17 @@ nav.dashboard-sidebar { height: 100vh; position: fixed; left: 0; + z-index: 1030; } -.dashboard-sidebar.active { - min-width: 80px; - max-width: 80px; +body.sidebar-closed { + .dashboard-sidebar { + min-width: 80px; + max-width: 80px; + } + .dashboard-footer { + margin-left: 80px; + } } .sidebar-menu .sub-menu { @@ -72,3 +95,15 @@ nav.dashboard-sidebar { } } } + +// RESPONSIVE +@include media-breakpoint-down(md) { + table.table { + font-size: 80%; + td, th { + padding-left: 0.5rem 0.25rem; + } + } +} + + diff --git a/app/views/layouts/_admin_header.html.erb b/app/views/layouts/_admin_header.html.erb index ebbcc53a36..012e768c20 100644 --- a/app/views/layouts/_admin_header.html.erb +++ b/app/views/layouts/_admin_header.html.erb @@ -1,11 +1,13 @@ -
+
-
- +
+
+ + +

+ +
diff --git a/app/views/layouts/_admin_sidebar.html.erb b/app/views/layouts/_admin_sidebar.html.erb index 583a56937d..eb2c3f6ea3 100644 --- a/app/views/layouts/_admin_sidebar.html.erb +++ b/app/views/layouts/_admin_sidebar.html.erb @@ -8,120 +8,113 @@
- -
-
-
-
- <%= image_tag "default-profile.png", class: "img-fluid rounded-circle" %> -
-
-
-

<%= current_user.email.truncate(12) %>

- <% if is_admin? %> -

Administrator

- <% end %> + +
+
+
+
+ <%= image_tag "default-profile.png", class: "img-fluid rounded-circle" %> +
+
+
+

<%= current_user.email.truncate(12) %>

+ <% if is_admin? %> +

Administrator

+ <% end %> +
-
- -
-
    - -
  • - <%= link_to main_app.admin_dashboard_path do %> - - <%= t('header.dashboard') %> - <% end %> -
    • - -
  • - <%= link_to admin_currencies_path do %> - - Currencies - <% end %> -
    • + +
    +
      - <% if can? :manage, Market %> -
    • - <%= link_to admin_markets_path do %> - - Markets +
    • + <%= link_to main_app.admin_dashboard_path do %> + + <%= t('header.dashboard') %> <% end %>
      • - <% end %> - <% if can? :read, Proof %> -
    • - <%= link_to admin_proofs_path do %> - - <%= t('.menus.items.operating.proofs') %> +
    • + <%= link_to admin_currencies_path do %> + + Currencies <% end %>
      • - <% end %> - <% if can? :menu, Deposit %> -
    • - <%= link_to "#collapse-deposit", class: 'has-arrow waves-effect waves-dark', 'aria-expanded': 'false', data: {toggle: 'collapse'} do %> - - <%= t('admin_header.deposits') %> - <% end %> - -
      • - <% end %> + + <% end %> - <% if can? :menu, Withdraw %> -
    • - <%= link_to "#collapse-withdraw", class: 'has-arrow waves-effect waves-dark', 'aria-expanded': "false", data: { toggle: 'collapse' } do %> - - <%= t('admin_header.withdraws') %> - <% end %> - -
      • - <% end %> + + <% end %> - <% if can? :manage, Member %> -
    • - <%= link_to admin_members_path do %> - - <%= t('.menus.sections.members') %> - <% end %> -
      • - <% end %> + <% if can? :menu, Deposit %> +
    • + <%= link_to "#collapse-deposit", class: 'has-arrow waves-effect waves-dark', 'aria-expanded': 'false', data: {toggle: 'collapse'} do %> + + <%= t('admin_header.deposits') %> + <% end %> + +
      • + <% end %> -
    • - <%= link_to "#collapse-statistic", class: 'has-arrow waves-effect waves-dark', 'aria-expanded': "false", data: { toggle: 'collapse' } do %> - - <%= t('admin_header.statistics') %> + <% if can? :menu, Withdraw %> +
    • + <%= link_to "#collapse-withdraw", class: 'has-arrow waves-effect waves-dark', 'aria-expanded': "false", data: { toggle: 'collapse' } do %> + + <%= t('admin_header.withdraws') %> + <% end %> + +
      • <% end %> - - -
    + <% if can? :manage, Member %> +
  • + <%= link_to admin_members_path do %> + + <%= t('.menus.sections.members') %> + <% end %> +
    • + <% end %> -
    +
  • + <%= link_to "#collapse-statistic", class: 'has-arrow waves-effect waves-dark', 'aria-expanded': "false", data: { toggle: 'collapse' } do %> + + <%= t('admin_header.statistics') %> + <% end %> -
      -
    • <%= link_to "Back to Peatio", root_path %>
      • -
    • Log out
      • -
    + +
    • +
-
+