Skip to content

Commit

Permalink
Collapsing sidebar
Browse files Browse the repository at this point in the history
Fixes #158
  • Loading branch information
jcoyne committed Apr 7, 2017
1 parent 7b8868b commit 76030d5
Show file tree
Hide file tree
Showing 8 changed files with 182 additions and 161 deletions.
7 changes: 7 additions & 0 deletions app/assets/javascripts/hyrax/app.js
Expand Up @@ -14,6 +14,7 @@ Hyrax = {
this.admin();
this.adminStatisticsGraphs();
this.tinyMCE();
this.sidebar();
},

tinyMCE: function() {
Expand Down Expand Up @@ -108,6 +109,12 @@ Hyrax = {
});
},

sidebar: function () {
$('.sidebar-toggle').on('click', function() {
$('.sidebar, .main-content').toggleClass('maximized')
})
},

fileManager: function () {
var FileManager = require('hyrax/file_manager');
new FileManager();
Expand Down
3 changes: 2 additions & 1 deletion app/assets/stylesheets/hyrax/_hyrax.scss
Expand Up @@ -7,7 +7,8 @@
'hyrax/work-show', 'hyrax/modal', 'hyrax/forms', 'hyrax/form',
'hyrax/file_manager', 'hyrax/form-progress', 'hyrax/positioning',
'hyrax/fixedsticky', 'hyrax/file_upload', 'hyrax/representative-media',
'hyrax/footer', 'hyrax/select_work_type', 'hyrax/users', 'hyrax/dashboard';
'hyrax/footer', 'hyrax/select_work_type', 'hyrax/users', 'hyrax/dashboard',
'hyrax/sidebar';
@import 'sharing_buttons';

/* This class is to workaround an issue in which Bootstrap requires a div to display a tooltip
Expand Down
4 changes: 0 additions & 4 deletions app/assets/stylesheets/hyrax/_styles.scss
Expand Up @@ -29,10 +29,6 @@
@extend h2
}

#content-wrapper {
padding-bottom: $padding-large-vertical;
}

footer.navbar {
padding-bottom: 0;
margin-bottom: 0;
Expand Down
106 changes: 0 additions & 106 deletions app/assets/stylesheets/hyrax/dashboard.scss
Expand Up @@ -83,22 +83,6 @@ body.dashboard {
float: left;
}

#content-wrapper {
padding: 0;
padding-bottom: 0;

&.container-fluid {
padding-left: 0;
padding-right: 0;
}
}

.main-content {
padding-top: $admin-vertical-padding;
padding-bottom: $admin-vertical-padding;
background-color: $admin-content-background-color;
}

.main-header {
margin-bottom: 0;
margin-top: 0;
Expand Down Expand Up @@ -178,96 +162,6 @@ body.dashboard {
margin-bottom: 6px;
}

.sidebar {
background-color: $admin-sidebar-background-color;
padding-bottom: $admin-vertical-padding;
padding-left: 0;
padding-right: 0;
padding-top: $admin-vertical-padding;

a {
color: $admin-sidebar-link-color;
}

a:hover {
color: $admin-sidebar-link-hover-color;
}

.h5 {
color: $admin-sidebar-section-heading-color;
font-size: 12px;
margin: 15px 0 0 0;
padding: 10px 10px 5px 10px;
text-transform: uppercase;
}

.profile {
background-color: $admin-sidebar-profile-background-color;
padding: 15px 10px;

.profile-image {
text-align: center;
}

.profile-data {
text-align: center;
.profile-data-name {
color: $admin-sidebar-link-color;
}
}
}
}

.admin-sidebar {
margin-left: 0;
margin-right: 0;

li .fa {
margin-right: $padding-base-horizontal;
}
}

.nav-pills > li > a {
border-radius: 0;
padding: 12px 10px 12px 15px;

&:focus {
background-color: transparent;
color: $admin-sidebar-link-color;
}
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
background-color: $admin-sidebar-link-background-color;
}

// submenu items
ul.collapse > li > a,
ul.collapsing > li > a {
padding-left: 25px;
}

.sidebar .collapse-toggle {
margin-bottom: 0;

&::after {
content: "";
float: right;
transform: rotate(90deg);
}

&.collapsed {
border-bottom: 0;

&::after {
transform: rotate(0deg);
transition: transform 0.1s ease;
}
}
}

.navbar {
margin-bottom: 0;
}
Expand Down
141 changes: 141 additions & 0 deletions app/assets/stylesheets/hyrax/sidebar.scss
@@ -0,0 +1,141 @@
$drawer-small: 40px;
$drawer-large: 200px;
$gutter-width: $grid-gutter-width/2;

.main-content {
padding-left: $drawer-small + $gutter-width;
padding-right: $gutter-width;
padding-top: $admin-vertical-padding;
// padding-bottom: $admin-vertical-padding;
background-color: $admin-content-background-color;
position: absolute;

&.maximized {
padding-left: $drawer-large + $gutter-width;
}
}

// .sidebar is a class on the div
.sidebar {
background-color: $admin-sidebar-background-color;
padding-top: $admin-vertical-padding;
position: absolute;
transition: width .1s;
width: $drawer-small;
z-index: 1000;
min-height: 600px;
min-height: 100vh;

&.maximized {
.h5, .sidebar-action-text, .profile {
opacity: 1;
}
width: $drawer-large;

.sidebar-toggle {
transform: rotate(-180deg);
}
}

.sidebar-toggle {
cursor: pointer;
background-color: $body-background-color;
border-radius: 50%;
line-height: 18px;
position: absolute;
right: -10px;
text-align: center;
width: 18px;
z-index: 1001;
}
a {
color: $admin-sidebar-link-color;
}

a:hover {
color: $admin-sidebar-link-hover-color;
}

.sidebar-action-text {
opacity: 0;
}
.h5 {
color: $admin-sidebar-section-heading-color;
opacity: 0;
font-size: 12px;
margin: 15px 0 0 0;
padding: 10px 10px 5px 10px;
text-transform: uppercase;
}

.profile {
opacity: 0;
background-color: $admin-sidebar-profile-background-color;
padding: 15px 10px;

.profile-image {
text-align: center;
}

.profile-data {
text-align: center;
.profile-data-name {
color: $admin-sidebar-link-color;
}
}
}

// .nav is the ul that holds the sidebar items
.nav {
margin-left: 0;
margin-right: 0;
li {
overflow: hidden;
white-space: nowrap;
}
li .fa {
margin-right: $padding-base-horizontal;
}
}

.nav-pills > li > a {
border-radius: 0;
padding: 12px 10px 12px 12px;

&:focus {
background-color: transparent;
color: $admin-sidebar-link-color;
}
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
background-color: $admin-sidebar-link-background-color;
}

// submenu items
ul.collapse > li > a,
ul.collapsing > li > a {
padding-left: 25px;
}

.collapse-toggle {
margin-bottom: 0;

&::after {
content: "";
float: right;
transform: rotate(90deg);
}

&.collapsed {
border-bottom: 0;

&::after {
transform: rotate(0deg);
transition: transform 0.1s ease;
}
}
}
}
30 changes: 15 additions & 15 deletions app/views/hyrax/dashboard/_sidebar.html.erb
@@ -1,6 +1,6 @@
<% menu = Hyrax::MenuPresenter.new(self) %>

<ul class="admin-sidebar nav nav-pills nav-stacked">
<div class="sidebar-toggle"><span class="fa fa-chevron-circle-right"></span></div>
<ul class="nav nav-pills nav-stacked">
<li>
<div class="profile">
<div class="profile-image">
Expand All @@ -12,69 +12,69 @@
</div>
</li>
<li class="h5"><%= t('hyrax.admin.sidebar.activity') %></li>

<%= menu.nav_link(hyrax.dashboard_profile_path(current_user),
also_active_for: hyrax.edit_dashboard_profile_path(current_user)) do %>
<span class="fa fa-id-card"></span> <%= t('hyrax.admin.sidebar.profile') %>
<span class="fa fa-id-card"></span> <span class="sidebar-action-text"><%= t('hyrax.admin.sidebar.profile') %></span>
<% end %>
<%= menu.nav_link(hyrax.notifications_path) do %>
<span class="fa fa-bell"></span> <%= t('hyrax.admin.sidebar.notifications') %>
<span class="fa fa-bell"></span> <span class="sidebar-action-text"><%= t('hyrax.admin.sidebar.notifications') %></span>
<% end %>
<%= menu.nav_link(hyrax.transfers_path) do %>
<span class="fa fa-arrows-h"></span> <%= t('hyrax.admin.sidebar.transfers') %>
<span class="fa fa-arrows-h"></span> <span class="sidebar-action-text"><%= t('hyrax.admin.sidebar.transfers') %></span>
<% end %>
<% if can? :read, :admin_dashboard %>
<%= menu.nav_link(hyrax.admin_stats_path) do %>
<span class="fa fa-bar-chart"></span> <%= t('hyrax.admin.sidebar.statistics') %>
<span class="fa fa-bar-chart"></span> <span class="sidebar-action-text"><%= t('hyrax.admin.sidebar.statistics') %></span>
<% end %>

<li class="h5"><%= t('hyrax.admin.sidebar.configuration') %></li>
<%= menu.nav_link(hyrax.admin_features_path) do %>
<span class="fa fa-cog"></span> <%= t('hyrax.admin.sidebar.settings') %>
<span class="fa fa-cog"></span> <span class="sidebar-action-text"><%= t('hyrax.admin.sidebar.settings') %></span>
<% end %>
<% if can?(:update, :appearance) %>
<%= menu.nav_link(hyrax.admin_appearance_path) do %>
<span class="fa fa-paint-brush"></span> <%= t('hyrax.admin.sidebar.appearance') %>
<span class="fa fa-paint-brush"></span> <span class="sidebar-action-text"><%= t('hyrax.admin.sidebar.appearance') %></span>
<% end %>
<% end %>
<%= menu.nav_link(hyrax.admin_workflow_roles_path) do %>
<span class="fa fa-users"></span> <%= t('hyrax.admin.sidebar.workflow_roles') %>
<span class="fa fa-users"></span> <span class="sidebar-action-text"><%= t('hyrax.admin.sidebar.workflow_roles') %></span>
<% end %>
<% end %>

<li class="h5"><%= t('hyrax.admin.sidebar.repository_objects') %></li>
<% if can? :create, AdminSet %>
<%= menu.nav_link(hyrax.admin_admin_sets_path) do %>
<span class="fa fa-sitemap"></span> <%= t('hyrax.admin.sidebar.admin_sets') %>
<span class="fa fa-sitemap"></span> <span class="sidebar-action-text"><%= t('hyrax.admin.sidebar.admin_sets') %></span>
<% end %>
<% end %>
<%= menu.nav_link(hyrax.my_collections_path,
also_active_for: hyrax.dashboard_collections_path) do %>
<span class="fa fa-folder-open"></span> <%= t('hyrax.admin.sidebar.collections') %>
<span class="fa fa-folder-open"></span> <span class="sidebar-action-text"><%= t('hyrax.admin.sidebar.collections') %></span>
<% end %>
<%= menu.nav_link(hyrax.my_works_path,
also_active_for: hyrax.dashboard_works_path) do %>
<span class="fa fa-file"></span> <%= t('hyrax.admin.sidebar.works') %>
<span class="fa fa-file"></span> <span class="sidebar-action-text"><%= t('hyrax.admin.sidebar.works') %></span>
<% end %>
<% if can? :read, :admin_dashboard %>

<li class="h5"><%= t('hyrax.admin.sidebar.tasks') %></li>
<%= menu.nav_link(hyrax.admin_workflows_path) do %>
<span class="fa fa-flag"></span> <%= t('hyrax.admin.sidebar.workflow_review') %>
<span class="fa fa-flag"></span> <span class="sidebar-action-text"><%= t('hyrax.admin.sidebar.workflow_review') %></span>
<% end %>
<% end %>
<% if can? :manage, User %>
<%= menu.nav_link(hyrax.admin_users_path) do %>
<span class="fa fa-user"></span> <%= t('hyrax.admin.sidebar.users') %>
<span class="fa fa-user"></span> <span class="sidebar-action-text"><%= t('hyrax.admin.sidebar.users') %></span>
<% end %>
<% end %>
</ul>

0 comments on commit 76030d5

Please sign in to comment.