Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sidebar fixes (Bootstrap 4 migration) #912

Merged
merged 1 commit into from Apr 19, 2018
Merged

Sidebar fixes (Bootstrap 4 migration) #912

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
52 changes: 42 additions & 10 deletions app/assets/javascripts/theme/sidebar.js
View file
Open in desktop
@@ -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();
});


Expand All @@ -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');
}
45 changes: 40 additions & 5 deletions app/assets/stylesheets/theme/layout.scss
View file
Open in desktop
Expand Up @@ -12,7 +12,6 @@ body {
margin-top: -3px;
}
}

.dashboard-footer {
margin-left: 250px;
}
Expand All @@ -30,7 +29,7 @@ body {
}

// closed sidebar
&.sidebar-closed {
body.sidebar-closed & {
margin-left: 80px;
.top-logo, .user-name {
display: none;
Expand All @@ -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;
}
}
}
}
}
}

Expand All @@ -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 {
Expand All @@ -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;
}
}
}


14 changes: 8 additions & 6 deletions app/views/layouts/_admin_header.html.erb
View file
Open in desktop
@@ -1,11 +1,13 @@
<div class="admin-header bg-main border-bottom navbar navbar-light p-0">
<div class="admin-header bg-white border-bottom navbar navbar-light p-0 sticky-top">
<div class="w-100 d-flex justify-content-between">
<div>
<div class="p-4 d-flex align-items-center">
<!-- <i class="h5-font-size mr-2 text-primary toggle-sidebar-icon fa fa-caret-left"></i>
<a href="javascript:void(0);" id="sidebarCollapse" class="text-dark">
<h1 class="h4 m-0 brand"><i class="fa fa-bars"></i></h1>
</a> -->
<div class="hide-on-closed-sidebar">
<div class="p-4 d-flex align-items-center">
<i class="h5-font-size mr-2 text-primary toggle-sidebar-icon fa fa-caret-left"></i>
<a href="javascript:void(0);" id="sidebarCollapse" class="text-dark">
<h1 class="h4 m-0 brand"><i class="fa fa-bars"></i></h1>
</a>
</div>
</div>
</div>
<div>
Expand Down
181 changes: 87 additions & 94 deletions app/views/layouts/_admin_sidebar.html.erb
View file
Open in desktop
Expand Up @@ -8,120 +8,113 @@

<div class="sidebar-content has-scrollbar position-relative">

<!-- PROFILE -->
<div class="bg-dark">
<div class="user-name">
<div class="d-flex justify-content-between p-4">
<div class="col-3 d-flex align-items-center pr-1 pl-0">
<%= image_tag "default-profile.png", class: "img-fluid rounded-circle" %>
</div>
<div class="col d-flex align-items-center">
<div>
<h2 class="h5 m-0"><%= current_user.email.truncate(12) %></h2>
<% if is_admin? %>
<h3 class="h6 text-muted mt-1 mb-0">Administrator</h3>
<% end %>
<!-- PROFILE -->
<div class="bg-dark">
<div class="user-name">
<div class="d-flex justify-content-between p-4">
<div class="col-3 d-flex align-items-center pr-1 pl-0">
<%= image_tag "default-profile.png", class: "img-fluid rounded-circle" %>
</div>
<div class="col d-flex align-items-center">
<div>
<h2 class="h5 m-0"><%= current_user.email.truncate(12) %></h2>
<% if is_admin? %>
<h3 class="h6 text-muted mt-1 mb-0">Administrator</h3>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- NAVIGATION -->
<div>
<ul class="list-icon sidebar-menu">

<li class="list-icon-item <%= check_active('dashboard') %>">
<%= link_to main_app.admin_dashboard_path do %>
<i class="icon fa fa-tachometer"></i>
<%= t('header.dashboard') %>
<% end %>
</li>

<li class="list-icon-item <%= check_active('currencies') %>">
<%= link_to admin_currencies_path do %>
<i class="icon fa fa-usd"></i>
Currencies
<% end %>
</li>
<!-- NAVIGATION -->
<div>
<ul class="list-icon sidebar-menu">

<% if can? :manage, Market %>
<li class="list-icon-item <%= check_active('markets') %>">
<%= link_to admin_markets_path do %>
<i class="icon fa fa-line-chart"></i>
Markets
<li class="list-icon-item <%= check_active('dashboard') %>">
<%= link_to main_app.admin_dashboard_path do %>
<i class="icon fa fa-tachometer"></i>
<span class="menu-text"><%= t('header.dashboard') %></span>
<% end %>
</li>
<% end %>

<% if can? :read, Proof %>
<li class="list-icon-item <%= check_active(Proof) %>">
<%= link_to admin_proofs_path do %>
<i class="icon fa fa-check"></i>
<%= t('.menus.items.operating.proofs') %>
<li class="list-icon-item <%= check_active('currencies') %>">
<%= link_to admin_currencies_path do %>
<i class="icon fa fa-usd"></i>
<span class="menu-text">Currencies</span>
<% end %>
</li>
<% end %>

<% if can? :menu, Deposit %>
<li class="list-icon-item <%= check_active('deposits') %>">
<%= link_to "#collapse-deposit", class: 'has-arrow waves-effect waves-dark', 'aria-expanded': 'false', data: {toggle: 'collapse'} do %>
<i class="icon fa fa-level-up"></i>
<span><%= t('admin_header.deposits') %></span>
<% end %>
<ul id="collapse-deposit" class="collapse sub-menu">
<% Currency.order(id: :asc).pluck(:code).each do |c| %>
<li><%= link_to c.upcase, admin_deposit_index_path(c) %></li>
<% if can? :manage, Market %>
<li class="list-icon-item <%= check_active('markets') %>">
<%= link_to admin_markets_path do %>
<i class="icon fa fa-line-chart"></i>
<span class="menu-text">Markets</span>
<% end %>
</ul>
</li>
<% end %>
</li>
<% end %>

<% if can? :menu, Withdraw %>
<li class="list-icon-item <%= check_active('withdraws') %>">
<%= link_to "#collapse-withdraw", class: 'has-arrow waves-effect waves-dark', 'aria-expanded': "false", data: { toggle: 'collapse' } do %>
<i class="icon fa fa-level-down"></i>
<span><%= t('admin_header.withdraws') %></span>
<% end %>
<ul id="collapse-withdraw" class="collapse sub-menu" aria-expanded="false">
<% Currency.order(id: :asc).pluck(:code).each do |c| %>
<li><%= link_to c.upcase, admin_withdraw_index_path(c) %></li>
<% if can? :read, Proof %>
<li class="list-icon-item <%= check_active(Proof) %>">
<%= link_to admin_proofs_path do %>
<i class="icon fa fa-check"></i>
<span class="menu-text"><%= t('.menus.items.operating.proofs') %></span>
<% end %>
</ul>
</li>
<% end %>
</li>
<% end %>

<% if can? :manage, Member %>
<li class="list-icon-item <% check_active('members') %>">
<%= link_to admin_members_path do %>
<i class="icon fa fa-users"></i>
<%= t('.menus.sections.members') %>
<% end %>
</li>
<% end %>
<% if can? :menu, Deposit %>
<li class="list-icon-item <%= check_active('deposits') %>">
<%= link_to "#collapse-deposit", class: 'has-arrow waves-effect waves-dark', 'aria-expanded': 'false', data: {toggle: 'collapse'} do %>
<i class="icon fa fa-level-up"></i>
<span class="menu-text"><%= t('admin_header.deposits') %></span>
<% end %>
<ul id="collapse-deposit" class="collapse sub-menu">
<% Currency.order(id: :asc).pluck(:code).each do |c| %>
<li><%= link_to c.upcase, admin_deposit_index_path(c) %></li>
<% end %>
</ul>
</li>
<% end %>

<li class="list-icon-item <%= check_active('statistic') %>">
<%= link_to "#collapse-statistic", class: 'has-arrow waves-effect waves-dark', 'aria-expanded': "false", data: { toggle: 'collapse' } do %>
<i class="icon fa fa-bar-chart"></i>
<span><%= t('admin_header.statistics') %></span>
<% if can? :menu, Withdraw %>
<li class="list-icon-item <%= check_active('withdraws') %>">
<%= link_to "#collapse-withdraw", class: 'has-arrow waves-effect waves-dark', 'aria-expanded': "false", data: { toggle: 'collapse' } do %>
<i class="icon fa fa-level-down"></i>
<span class="menu-text"><%= t('admin_header.withdraws') %></span>
<% end %>
<ul id="collapse-withdraw" class="collapse sub-menu" aria-expanded="false">
<% Currency.order(id: :asc).pluck(:code).each do |c| %>
<li><%= link_to c.upcase, admin_withdraw_index_path(c) %></li>
<% end %>
</ul>
</li>
<% end %>

<ul id="collapse-statistic" class="collapse sub-menu" aria-expanded="false">
<% if can? :stat, Member %>
<li class="list-icon-item <% check_active(Member) %>">
<%= link_to Member.model_name.human, admin_statistic_members_path %>
</li>
<% end %>
</ul>
</li>
</ul>
<% if can? :manage, Member %>
<li class="list-icon-item <% check_active('members') %>">
<%= link_to admin_members_path do %>
<i class="icon fa fa-users"></i>
<span class="menu-text"><%= t('.menus.sections.members') %></span>
<% end %>
</li>
<% end %>

<hr class="mx-4">
<li class="list-icon-item <%= check_active('statistic') %>">
<%= link_to "#collapse-statistic", class: 'has-arrow waves-effect waves-dark', 'aria-expanded': "false", data: { toggle: 'collapse' } do %>
<i class="icon fa fa-bar-chart"></i>
<span class="menu-text"><%= t('admin_header.statistics') %></span>
<% end %>

<ul class="list-unstyled sidebar-menu">
<li><%= link_to "Back to Peatio", root_path %></li>
<li><a href="<%= main_app.signout_path %>">Log out</a></li>
</ul>
<ul id="collapse-statistic" class="collapse sub-menu" aria-expanded="false">
<% if can? :stat, Member %>
<li class="list-icon-item <% check_active(Member) %>">
<%= link_to Member.model_name.human, admin_statistic_members_path %>
</li>
<% end %>
</ul>
</li>
</ul>

</div>
</div>
</div>