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
|
// Hide sidebar & also its toggle button
|
||||||
$("#wrapper").addClass("hidden2");
|
$("#wrapper").addClass("hidden2");
|
||||||
$("#toggle-sidebar-btn").addClass("hidden2");
|
|
||||||
$(".navbar-secondary").addClass("navbar-without-sidebar");
|
$(".navbar-secondary").addClass("navbar-without-sidebar");
|
||||||
|
$("#sidebar-arrow").addClass("invisible");
|
||||||
|
|
||||||
// Also, hide zoom levels button group
|
// Also, hide zoom levels button group
|
||||||
$("#diagram-buttons").hide();
|
$("#diagram-buttons").hide();
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
$('.navbar-secondary').css(
|
$('.navbar-secondary').css(
|
||||||
{ 'margin-left': '-280px', 'padding-left': '294px' }
|
{ 'margin-left': '-280px', 'padding-left': '294px' }
|
||||||
);
|
);
|
||||||
$('#toggle-sidebar-btn').attr('data-shown', '');
|
$('#sidebar-arrow').attr('data-shown', '');
|
||||||
sessionStorage.setItem(STORAGE_TOGGLE_KEY, "un-toggled");
|
sessionStorage.setItem(STORAGE_TOGGLE_KEY, "un-toggled");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -20,12 +20,12 @@
|
||||||
'margin-left': '0',
|
'margin-left': '0',
|
||||||
'padding-left': '14px'
|
'padding-left': '14px'
|
||||||
});
|
});
|
||||||
$('#toggle-sidebar-btn').removeAttr('data-shown');
|
$('#sidebar-arrow').removeAttr('data-shown');
|
||||||
sessionStorage.setItem(STORAGE_TOGGLE_KEY, "toggled");
|
sessionStorage.setItem(STORAGE_TOGGLE_KEY, "toggled");
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggle() {
|
function toggle() {
|
||||||
var btn = $('#toggle-sidebar-btn');
|
var btn = $('#sidebar-arrow');
|
||||||
if (btn.is('[data-shown]')) {
|
if (btn.is('[data-shown]')) {
|
||||||
hide();
|
hide();
|
||||||
} else {
|
} else {
|
||||||
|
@ -34,7 +34,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function isShown() {
|
function isShown() {
|
||||||
var btn = $('#toggle-sidebar-btn');
|
var btn = $('#sidebar-arrow');
|
||||||
return btn.is('[data-shown]');
|
return btn.is('[data-shown]');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -21,6 +21,37 @@ $toggle-btn-size: 50px;
|
||||||
-o-transition: all 0.5s ease;
|
-o-transition: all 0.5s ease;
|
||||||
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 {
|
#sidebar-wrapper {
|
||||||
background-color: $color-white;
|
background-color: $color-white;
|
||||||
box-shadow: 1px 3px 6px $color-alto;
|
box-shadow: 1px 3px 6px $color-alto;
|
||||||
|
|
|
@ -65,23 +65,6 @@
|
||||||
color: $color-emperor;
|
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) {
|
@media(max-height:510px) {
|
||||||
|
|
|
@ -24,10 +24,4 @@ module LeftMenuBarHelper
|
||||||
def activities_are_selected?
|
def activities_are_selected?
|
||||||
controller_name == 'activities'
|
controller_name == 'activities'
|
||||||
end
|
end
|
||||||
|
|
||||||
def navigation_sidebar_shown?
|
|
||||||
projects_are_selected? ||
|
|
||||||
repositories_are_selected? ||
|
|
||||||
settings_are_selected?
|
|
||||||
end
|
|
||||||
end
|
end
|
||||||
|
|
|
@ -4,6 +4,11 @@
|
||||||
locals: { flash: flash, notice: notice, alert: alert } %>
|
locals: { flash: flash, notice: notice, alert: alert } %>
|
||||||
<div id="sidebar-wrapper" class="<%= yield :sidebar_wrapper_class %>">
|
<div id="sidebar-wrapper" class="<%= yield :sidebar_wrapper_class %>">
|
||||||
<%= yield :sidebar %>
|
<%= yield :sidebar %>
|
||||||
|
<div id="sidebar-arrow"
|
||||||
|
onclick="SideBarToggle.toggle()"
|
||||||
|
data-shown="">
|
||||||
|
<span class="fas fa-chevron-right"></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<%= yield :secondary_navigation %>
|
<%= yield :secondary_navigation %>
|
||||||
<div class="container-fluid <%= yield :container_class %>" id="fluid-content">
|
<div class="container-fluid <%= yield :container_class %>" id="fluid-content">
|
||||||
|
|
|
@ -64,17 +64,6 @@
|
||||||
<span><%= t('left_menu_bar.settings') %></span>
|
<span><%= t('left_menu_bar.settings') %></span>
|
||||||
<% end %>
|
<% end %>
|
||||||
</li>
|
</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue