mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-21 15:36:22 +08:00
Merge pull request #1187 from mlorb/ml-sci-2452
Reposition the arrow for opening/closing of Navigation [SCI-2452]
This commit is contained in:
commit
d19fd276e9
|
@ -170,8 +170,8 @@ function initializeEdit() {
|
|||
|
||||
// Hide sidebar & also its toggle button
|
||||
$("#wrapper").addClass("hidden2");
|
||||
$("#toggle-sidebar-btn").addClass("hidden2");
|
||||
$(".navbar-secondary").addClass("navbar-without-sidebar");
|
||||
$("#sidebar-arrow").addClass("invisible");
|
||||
|
||||
// Also, hide zoom levels button group
|
||||
$("#diagram-buttons").hide();
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
$('.navbar-secondary').css(
|
||||
{ 'margin-left': '-280px', 'padding-left': '294px' }
|
||||
);
|
||||
$('#toggle-sidebar-btn').attr('data-shown', '');
|
||||
$('#sidebar-arrow').attr('data-shown', '');
|
||||
sessionStorage.setItem(STORAGE_TOGGLE_KEY, "un-toggled");
|
||||
}
|
||||
|
||||
|
@ -20,12 +20,12 @@
|
|||
'margin-left': '0',
|
||||
'padding-left': '14px'
|
||||
});
|
||||
$('#toggle-sidebar-btn').removeAttr('data-shown');
|
||||
$('#sidebar-arrow').removeAttr('data-shown');
|
||||
sessionStorage.setItem(STORAGE_TOGGLE_KEY, "toggled");
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
var btn = $('#toggle-sidebar-btn');
|
||||
var btn = $('#sidebar-arrow');
|
||||
if (btn.is('[data-shown]')) {
|
||||
hide();
|
||||
} else {
|
||||
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
function isShown() {
|
||||
var btn = $('#toggle-sidebar-btn');
|
||||
var btn = $('#sidebar-arrow');
|
||||
return btn.is('[data-shown]');
|
||||
}
|
||||
|
||||
|
|
|
@ -21,6 +21,37 @@ $toggle-btn-size: 50px;
|
|||
-o-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
#sidebar-arrow {
|
||||
background-color: $brand-default;
|
||||
border-bottom-right-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
bottom: 50%;
|
||||
box-shadow: 2px 0 4px $color-alto;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: -18px;
|
||||
|
||||
span {
|
||||
padding: 9px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-arrow:hover {
|
||||
background-color: $color-concrete;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#sidebar-arrow > span {
|
||||
transform: rotateY(0deg);
|
||||
transition: .6s; }
|
||||
|
||||
#sidebar-arrow[data-shown] > span {
|
||||
padding-left: 7px;
|
||||
padding-right: 3px;
|
||||
transform: rotateY(180deg);
|
||||
transition: .6s;
|
||||
}
|
||||
|
||||
#sidebar-wrapper {
|
||||
background-color: $color-white;
|
||||
box-shadow: 1px 3px 6px $color-alto;
|
||||
|
|
|
@ -65,23 +65,6 @@
|
|||
color: $color-emperor;
|
||||
}
|
||||
}
|
||||
|
||||
#toggle-sidebar-btn > span {
|
||||
@include rotate-animation(.5s, 0deg);
|
||||
}
|
||||
|
||||
#toggle-sidebar-btn[data-shown] > span {
|
||||
@include rotate-animation(.5s, 180deg);
|
||||
}
|
||||
|
||||
#toggle-sidebar-btn:hover {
|
||||
background-color: $color-concrete;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#toggle-sidebar-btn.hidden2 {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-height:510px) {
|
||||
|
|
|
@ -24,10 +24,4 @@ module LeftMenuBarHelper
|
|||
def activities_are_selected?
|
||||
controller_name == 'activities'
|
||||
end
|
||||
|
||||
def navigation_sidebar_shown?
|
||||
projects_are_selected? ||
|
||||
repositories_are_selected? ||
|
||||
settings_are_selected?
|
||||
end
|
||||
end
|
||||
|
|
|
@ -4,6 +4,11 @@
|
|||
locals: { flash: flash, notice: notice, alert: alert } %>
|
||||
<div id="sidebar-wrapper" class="<%= yield :sidebar_wrapper_class %>">
|
||||
<%= yield :sidebar %>
|
||||
<div id="sidebar-arrow"
|
||||
onclick="SideBarToggle.toggle()"
|
||||
data-shown="">
|
||||
<span class="fas fa-chevron-right"></span>
|
||||
</div>
|
||||
</div>
|
||||
<%= yield :secondary_navigation %>
|
||||
<div class="container-fluid <%= yield :container_class %>" id="fluid-content">
|
||||
|
|
|
@ -64,17 +64,6 @@
|
|||
<span><%= t('left_menu_bar.settings') %></span>
|
||||
<% end %>
|
||||
</li>
|
||||
<!-- arrow for opening/closing -->
|
||||
<li class="text-center <%= navigation_sidebar_shown? ? '' : 'hidden2' %>"
|
||||
style="padding: 5px;"
|
||||
id="toggle-sidebar-btn"
|
||||
data-shown=""
|
||||
onclick="SideBarToggle.toggle()"
|
||||
>
|
||||
<span class="fas fa-chevron-right"
|
||||
aria-hidden="false"
|
||||
></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue