mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-20 14:45:56 +08:00
Merge pull request #1038 from mlorb/ml-sci-2118
Code left-side menu bar [SCI-2118]
This commit is contained in:
commit
35afc06cbd
|
@ -26,7 +26,6 @@ $toggle-btn-size: 50px;
|
|||
z-index: 1000;
|
||||
position: fixed;
|
||||
width: $wrapper-width;
|
||||
left: $wrapper-width;
|
||||
height: 100%;
|
||||
margin-left: -$wrapper-width;
|
||||
-webkit-transition: all 0.5s ease;
|
||||
|
@ -99,6 +98,7 @@ $toggle-btn-size: 50px;
|
|||
padding-left: 0;
|
||||
|
||||
#sidebar-wrapper {
|
||||
margin-left: 0;
|
||||
width: 0;
|
||||
|
||||
#slide-panel {
|
||||
|
|
|
@ -368,6 +368,7 @@
|
|||
|
||||
#content-wrapper {
|
||||
margin-top: 50px;
|
||||
margin-left: 83px;
|
||||
}
|
||||
|
||||
|
||||
|
|
57
app/assets/stylesheets/themes/menu_bar.scss
Normal file
57
app/assets/stylesheets/themes/menu_bar.scss
Normal file
|
@ -0,0 +1,57 @@
|
|||
@import "constants";
|
||||
@import "mixins";
|
||||
|
||||
.menu-bar {
|
||||
background-color: $color-white;
|
||||
box-shadow: inset -4px 0 0 0 $color-alto;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 16px;
|
||||
padding-top: 16px;
|
||||
position: fixed;
|
||||
width: 83px;
|
||||
|
||||
ul.nav > li {
|
||||
padding-right: 4px;
|
||||
|
||||
& > a {
|
||||
color: $color-gray;
|
||||
display: grid;
|
||||
font-size: 12px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
|
||||
& > span {
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $color-gainsboro;
|
||||
margin-right: 4px;
|
||||
padding-right: 0;
|
||||
@include box-shadow(4px 0 0 $color-theme-primary);
|
||||
|
||||
& > a {
|
||||
color: $color-emperor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.nav-bottom {
|
||||
bottom: 0;
|
||||
padding-bottom: 16px;
|
||||
position: fixed;
|
||||
width: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-height:480px) {
|
||||
.menu-bar > ul.nav-bottom {
|
||||
position: relative;
|
||||
width: auto;
|
||||
}
|
||||
}
|
31
app/helpers/left_menu_bar_helper.rb
Normal file
31
app/helpers/left_menu_bar_helper.rb
Normal file
|
@ -0,0 +1,31 @@
|
|||
module LeftMenuBarHelper
|
||||
def projects_are_selected?
|
||||
controller_name.in? %w(projects experiments my_modules)
|
||||
end
|
||||
|
||||
def repositories_are_selected?
|
||||
controller_name == 'repositories'
|
||||
end
|
||||
|
||||
def templates_are_selected?
|
||||
# TODO
|
||||
controller_name == 'protocols'
|
||||
end
|
||||
|
||||
def reports_are_selected?
|
||||
# TODO
|
||||
controller_name == 'reports'
|
||||
end
|
||||
|
||||
def settings_are_selected?
|
||||
controller_name.in? %(registrations preferences addons teams)
|
||||
end
|
||||
|
||||
def activities_are_selected?
|
||||
controller_name == 'activities'
|
||||
end
|
||||
|
||||
def help_is_selected?
|
||||
# TODO
|
||||
end
|
||||
end
|
|
@ -64,6 +64,7 @@
|
|||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= render "shared/left_menu_bar" if user_signed_in? %>
|
||||
<div id="content-wrapper">
|
||||
<%= yield :content %>
|
||||
</div>
|
||||
|
|
48
app/views/shared/_left_menu_bar.html.erb
Normal file
48
app/views/shared/_left_menu_bar.html.erb
Normal file
|
@ -0,0 +1,48 @@
|
|||
<div id="left-menu-bar" class="menu-bar">
|
||||
<ul class="nav">
|
||||
<li class="<%= "active" if projects_are_selected? %>">
|
||||
<a id="projects-link" title="<%= t('left_menu_bar.projects') %>" href="<%= projects_path %>">
|
||||
<span class="glyphicon glyphicon-home"></span>
|
||||
<span><%= t('left_menu_bar.projects') %></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="<%= "active" if repositories_are_selected? %>">
|
||||
<a id="repositories-link" title="<%= t('left_menu_bar.repositories') %>" href="<%= team_repositories_path current_team %>">
|
||||
<span class="fa fa-cubes" aria-hidden="true"></span>
|
||||
<span><%= t('left_menu_bar.repositories') %></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="<%= "active" if templates_are_selected? %>">
|
||||
<a id="templates-link" title="<%= t('left_menu_bar.templates') %>" href="<%= protocols_path %>">
|
||||
<span class="glyphicon glyphicon-list-alt"></span>
|
||||
<span><%= t('left_menu_bar.templates') %></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="<%= "active" if reports_are_selected? %>">
|
||||
<a id="reports-link" title="<%= t('left_menu_bar.reports') %>" href="#">
|
||||
<span class="glyphicon glyphicon-indent-left"></span>
|
||||
<span><%= t('left_menu_bar.reports') %></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="<%= "active" if settings_are_selected? %>">
|
||||
<a id="settings-link" title="<%= t('left_menu_bar.settings') %>" href="<%= edit_user_registration_path %>">
|
||||
<span class="glyphicon glyphicon-cog"></span>
|
||||
<span><%= t('left_menu_bar.settings') %></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav nav-bottom">
|
||||
<li class="<%= "active" if activities_are_selected? %>">
|
||||
<a id="activities-link" title="<%= t('left_menu_bar.activities') %>" href="<%= activities_path %>">
|
||||
<span class="glyphicon glyphicon-equalizer"></span>
|
||||
<span><%= t('left_menu_bar.activities') %></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="<%= "active" if help_is_selected? %>">
|
||||
<a id="activities-link" title="<%= t('left_menu_bar.help') %>" href="#">
|
||||
<span class="glyphicon glyphicon-paperclip"></span>
|
||||
<span><%= t('left_menu_bar.help') %></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
|
@ -102,6 +102,15 @@ en:
|
|||
core_version: "sciNote core version"
|
||||
addon_versions: "Addon versions"
|
||||
|
||||
left_menu_bar:
|
||||
projects: "Projects"
|
||||
repositories: "Libraries"
|
||||
templates: "Templates"
|
||||
reports: "Reports"
|
||||
settings: "Settings"
|
||||
activities: "Activities"
|
||||
help: "Help"
|
||||
|
||||
sidebar:
|
||||
title: "Navigation"
|
||||
no_module_group: "No workflow"
|
||||
|
|
Loading…
Reference in a new issue