scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-03 18:35:36 +08:00
Code Issues Projects Releases Packages Wiki Activity

Restyle left side menu bar so it also works with lower heights

Browse source
This commit is contained in:
Luka Murn 2018-05-27 15:24:49 +02:00
parent 6e6b6803e6
commit 8b527d8a5b
2 changed files with 95 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/assets/stylesheets/themes/menu_bar.scss
View file

@ -7,11 +7,17 @@
height: 100%; height: 100%;
left: 0; left: 0;
overflow-x: hidden; overflow-x: hidden;
padding-bottom: 16px;
padding-top: 16px;
position: fixed; position: fixed;
width: 83px; width: 83px;
z-index: 1001; z-index: 1001;
padding-bottom: 50px;
.scroll-wrapper {
height: 100%;
padding-top: 16px;
width: 83px;
overflow-x: hidden;
}
ul.nav > li { ul.nav > li {
@ -58,14 +64,15 @@
color: $color-emperor; color: $color-emperor;
} }
} }
#sideBarButton:hover { #sideBarButton:hover {
background-color: $color-concrete; background-color: $color-concrete;
cursor: pointer; cursor: pointer;
} }
} }
@media(max-height:480px) { @media(max-height:510px) {
.menu-bar > ul.nav-bottom { .menu-bar ul.nav-bottom {
position: relative; position: relative;
width: auto; width: auto;
} }

166
app/views/shared/_left_menu_bar.html.erb
View file

@ -1,86 +1,88 @@
<div id="left-menu-bar" class="menu-bar"> <div id="left-menu-bar" class="menu-bar">
<ul class="nav"> <div class="scroll-wrapper">
<li class="<%= "active" if projects_are_selected? %>"> <ul class="nav">
<%= link_to projects_path, id: "projects-link", title: t('left_menu_bar.projects') do %> <li class="<%= "active" if projects_are_selected? %>">
<span class="fas fa-folder"></span> <%= link_to projects_path, id: "projects-link", title: t('left_menu_bar.projects') do %>
<span><%= t('left_menu_bar.projects') %></span> <span class="fas fa-folder"></span>
<% end %> <span><%= t('left_menu_bar.projects') %></span>
</li> <% end %>
<li class="<%= "active" if repositories_are_selected? %>"> </li>
<%= link_to repositories_path, data: { no_turbolink: false }, id: "repositories-link", title: t('left_menu_bar.repositories') do %> <li class="<%= "active" if repositories_are_selected? %>">
<span class="fas fa-list-alt" aria-hidden="true"></span> <%= link_to repositories_path, data: { no_turbolink: false }, id: "repositories-link", title: t('left_menu_bar.repositories') do %>
<span><%= t('left_menu_bar.repositories') %></span> <span class="fas fa-list-alt" aria-hidden="true"></span>
<% end %> <span><%= t('left_menu_bar.repositories') %></span>
</li> <% end %>
<li class="<%= "active" if templates_are_selected? %>"> </li>
<%= link_to protocols_path, id: "templates-link", title: t('left_menu_bar.templates') do %> <li class="<%= "active" if templates_are_selected? %>">
<span class="fas fa-edit"></span> <%= link_to protocols_path, id: "templates-link", title: t('left_menu_bar.templates') do %>
<span><%= t('left_menu_bar.templates') %></span> <span class="fas fa-edit"></span>
<% end %> <span><%= t('left_menu_bar.templates') %></span>
</li> <% end %>
<li class="<%= "active" if reports_are_selected? %>"> </li>
<%= link_to reports_path, data: { no_turbolink: false }, id: "reports-link", title: t('left_menu_bar.reports') do %> <li class="<%= "active" if reports_are_selected? %>">
<span class="fas fa-clipboard-check"></span> <%= link_to reports_path, data: { no_turbolink: false }, id: "reports-link", title: t('left_menu_bar.reports') do %>
<span><%= t('left_menu_bar.reports') %></span> <span class="fas fa-clipboard-check"></span>
<% end %> <span><%= t('left_menu_bar.reports') %></span>
</li> <% end %>
</ul> </li>
<ul class="nav nav-bottom"> </ul>
<li class="<%= "active" if activities_are_selected? %>"> <ul class="nav nav-bottom">
<%= link_to activities_path, id: "activities-link", title: t('left_menu_bar.activities') do %> <li class="<%= "active" if activities_are_selected? %>">
<span class="fas fa-list"></span> <%= link_to activities_path, id: "activities-link", title: t('left_menu_bar.activities') do %>
<span><%= t('left_menu_bar.activities') %></span> <span class="fas fa-list"></span>
<% end %> <span><%= t('left_menu_bar.activities') %></span>
</li> <% end %>
<!-- support --> </li>
<li class="dropup"> <!-- support -->
<a href="#" <li class="dropup">
id="support-link" <a href="#"
class="dropdown-toggle" id="support-link"
title="<%= t('left_menu_bar.support') %>" class="dropdown-toggle"
data-toggle="dropdown" title="<%= t('left_menu_bar.support') %>"
role="button" data-toggle="dropdown"
aria-haspopup="true" role="button"
aria-expanded="false"> aria-haspopup="true"
<span class="fas fa-question-circle"></span> aria-expanded="false">
<span><%= t('left_menu_bar.support') %></span> <span class="fas fa-question-circle"></span>
</a> <span><%= t('left_menu_bar.support') %></span>
<ul class="dropdown-menu" data-hook="support-dropdown"> </a>
<li><%= link_to t('left_menu_bar.support_links.support'), <ul class="dropdown-menu" data-hook="support-dropdown">
Constants::SUPPORT_URL, <li><%= link_to t('left_menu_bar.support_links.support'),
target: "_blank" %></li> Constants::SUPPORT_URL,
<li><%= link_to t('left_menu_bar.support_links.tutorials'), target: "_blank" %></li>
Constants::TUTORIALS_URL, <li><%= link_to t('left_menu_bar.support_links.tutorials'),
target: "_blank" %></li> Constants::TUTORIALS_URL,
<li><%= link_to t('left_menu_bar.support_links.webinars'), target: "_blank" %></li>
Constants::WEBINARS_URL, <li><%= link_to t('left_menu_bar.support_links.webinars'),
target: "_blank" %></li> Constants::WEBINARS_URL,
</ul> target: "_blank" %></li>
</li> </ul>
<li class="<%= "active" if settings_are_selected? %>"> </li>
<%= link_to edit_user_registration_path, id: "settings-link", title: t('left_menu_bar.settings') do %> <li class="<%= "active" if settings_are_selected? %>">
<span class="fas fa-cog"></span> <%= link_to edit_user_registration_path, id: "settings-link", title: t('left_menu_bar.settings') do %>
<span><%= t('left_menu_bar.settings') %></span> <span class="fas fa-cog"></span>
<% end %> <span><%= t('left_menu_bar.settings') %></span>
</li> <% end %>
<!-- arrow for opening/closing --> </li>
<li class="text-center" <!-- arrow for opening/closing -->
style="padding: 5px;" <li class="text-center"
id="sideBarButton" style="padding: 5px;"
data-shown="" id="sideBarButton"
onclick="SideBarToggle.toggle()" data-shown=""
> onclick="SideBarToggle.toggle()"
<span id="sideBarLeft" >
class="fas fa-chevron-left" <span id="sideBarLeft"
aria-hidden="false" class="fas fa-chevron-left"
></span> aria-hidden="false"
<span id="sideBarRight" ></span>
class="fas fa-chevron-right" <span id="sideBarRight"
aria-hidden="true" class="fas fa-chevron-right"
style="display:none;" aria-hidden="true"
></span> style="display:none;"
</li> ></span>
</ul> </li>
</ul>
</div>
</div> </div>
<%= javascript_include_tag("sidebar_toggle") %> <%= javascript_include_tag("sidebar_toggle") %>