diff --git a/app/assets/javascripts/projects/canvas.js.erb b/app/assets/javascripts/projects/canvas.js.erb
index fe8110869..56ee5b33a 100644
--- a/app/assets/javascripts/projects/canvas.js.erb
+++ b/app/assets/javascripts/projects/canvas.js.erb
@@ -170,7 +170,7 @@ function initializeEdit() {
// Hide sidebar & also its toggle button
$("#wrapper").addClass("hidden2");
- $("#wrapper").find(".sidebar-header-toggle").hide();
+ $("#toggle-sidebar-btn").addClass("hidden2");
$(".navbar-secondary").addClass("navbar-without-sidebar");
// Also, hide zoom levels button group
diff --git a/app/assets/javascripts/sidebar.js.erb b/app/assets/javascripts/sidebar.js.erb
index 1f8e2d93c..1845e7989 100644
--- a/app/assets/javascripts/sidebar.js.erb
+++ b/app/assets/javascripts/sidebar.js.erb
@@ -4,7 +4,6 @@
*/
var STORAGE_TREE_KEY = "scinote-sidebar-tree-collapsed-ids";
-var STORAGE_TOGGLE_KEY = "scinote-sidebar-toggled";
/**
* Get all collapsed sidebar elements.
@@ -84,33 +83,6 @@ function recalculateElementsPositions(ids, item, elements) {
sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(ids));
}
}
-/**
- * Get the session stored toggled boolean or null value if
- * sidebar toggle state was not changed by user. It allow for
- * automatic toggling for small devices.
- *
- * @return True if sidebar is toggled; false otherwise.
- */
-function sessionIsSidebarToggled() {
- var val = sessionStorage.getItem(STORAGE_TOGGLE_KEY);
-
- if (val === null) {
- return null;
- }
-
- return val === "toggled";
-}
-
-/**
- * Store the sidebar toggled boolean to session storage.
- */
-function sessionToggleSidebar() {
- if (sessionIsSidebarToggled()) {
- sessionStorage.setItem(STORAGE_TOGGLE_KEY, "not_toggled");
- } else {
- sessionStorage.setItem(STORAGE_TOGGLE_KEY, "toggled");
- }
-}
/**
* Setup the sidebar collapsing & expanding functionality.
@@ -253,60 +225,22 @@ function setupSidebarTree() {
$(".tree li span.tree-link ").after("");
}
-/**
- * Initialize the show/hide toggling of sidebar.
- */
-function initializeSidebarToggle() {
- var wrapper = $("#wrapper");
- var toggled = sessionIsSidebarToggled();
-
- if (toggled || toggled === null && $(window).width() <
- <%= Constants::SCREEN_WIDTH_LARGE %>) {
- wrapper.addClass("no-animation");
- wrapper.addClass("toggled");
- // Cause reflow of the wrapper element
- wrapper[0].offsetHeight;
- wrapper.removeClass("no-animation");
- $(".navbar-secondary").addClass("navbar-without-sidebar");
- }
-
- $(".toggle-sidebar-link").on("click", function() {
- $("#wrapper").toggleClass("toggled");
- sessionToggleSidebar();
- $(".navbar-secondary").toggleClass("navbar-without-sidebar", sessionIsSidebarToggled());
- return false;
- });
-}
-
// Resize the sidebar to accomodate to the page size
function resizeSidebarContents() {
- var wrapper = $("#wrapper");
var tree = $("#sidebar-wrapper .tree");
- var toggled = sessionIsSidebarToggled();
- var navbar = $(".navbar-secondary");
+ // Set vertical scrollbar on navigation tree
if (tree.length && tree.length == 1) {
tree.css(
"height",
($(window).height() - tree.position().top - 50) + "px"
);
}
- // Automatic toggling of sidebar for smaller devices
- if (toggled === null) {
- if ($(window).width() < <%= Constants::SCREEN_WIDTH_LARGE %>) {
- wrapper.addClass("toggled");
- navbar.addClass("navbar-without-sidebar");
- } else {
- wrapper.removeClass("toggled");
- navbar.removeClass("navbar-without-sidebar");
- }
- }
}
(function () {
// Initialize click listeners
setupSidebarTree();
- initializeSidebarToggle();
// Actually display wrapper, which is, up to now,
// hidden
diff --git a/app/assets/javascripts/sidebar_toggle.js.erb b/app/assets/javascripts/sidebar_toggle.js.erb
index a288929c3..08c02c6d9 100644
--- a/app/assets/javascripts/sidebar_toggle.js.erb
+++ b/app/assets/javascripts/sidebar_toggle.js.erb
@@ -3,27 +3,49 @@
global.SideBarToggle = (function() {
function show() {
- $('#sideBarLeft').show();
- $('#sideBarRight').hide();
$('#wrapper').removeClass('hidden2');
+ $('#sidebar-wrapper').show(
+ 'slide', { direction: 'right', easing: 'linear' }, 400
+ );
+ $('#wrapper').css('paddingLeft', '280px');
$('.navbar-secondary').css(
{ 'margin-left': '-280px', 'padding-left': '294px' }
);
+ $('#toggle-sidebar-btn').attr('data-shown', '');
}
function hide() {
- $('#sideBarLeft').hide();
- $('#sideBarRight').show();
$('#wrapper').addClass('hidden2');
+ $('#sidebar-wrapper').hide(
+ 'slide', { direction: 'left', easing: 'linear'}, 400
+ );
+ $('#wrapper').css('paddingLeft', '0');
$('.navbar-secondary').css({
'margin-left': '0',
'padding-left': '14px'
});
+ $('#toggle-sidebar-btn').removeAttr('data-shown');
+ }
+
+ function toggle() {
+ var btn = $('#toggle-sidebar-btn');
+ if (btn.is('[data-shown]')) {
+ hide();
+ } else {
+ show();
+ }
+ }
+
+ function isShown() {
+ var btn = $('#toggle-sidebar-btn');
+ return btn.is('[data-shown]');
}
return Object.freeze({
show: show,
- hide: hide
+ hide: hide,
+ toggle: toggle,
+ isShown: isShown
})
})();
})(window);
diff --git a/app/assets/stylesheets/partials/_sidebar.scss b/app/assets/stylesheets/partials/_sidebar.scss
index 581d257aa..08eefdd3c 100644
--- a/app/assets/stylesheets/partials/_sidebar.scss
+++ b/app/assets/stylesheets/partials/_sidebar.scss
@@ -37,51 +37,6 @@ $toggle-btn-size: 50px;
#slide-panel {
height: 100%;
- .sidebar-header {
- height: $toggle-btn-size;
- background: $brand-primary;
- border-bottom: 2px solid darken($brand-primary, 10%);
-
- .sidebar-header-title {
- width: inherit;
- color: $color-white;
- display: inline-block;
- margin-left: 15px;
- margin-top: 6px;
- text-transform: uppercase;
- max-width: ($wrapper-width - $toggle-btn-size);
- overflow: hidden;
- text-overflow: ellipsis;
- opacity: 1;
-
- // Animations
- @include transition(opacity 0.5s ease);
- }
- }
-
- .sidebar-header-toggle {
- height: $toggle-btn-size;
- width: $toggle-btn-size;
- margin-left: ($wrapper-width - $toggle-btn-size);
- margin-top: -$toggle-btn-size;
- font-size: $font-size-h3;
- background: $brand-primary;
- border-left: 2px solid darken($brand-primary, 10%);
- border-bottom: 2px solid darken($brand-primary, 10%);
-
- // Animations
- @include transition(margin-left 0.5s ease);
-
- span {
- margin: 10px;
- color: $color-white;
-
- // Animations
- @include rotate-animation(0.5s, 180deg);
- @include transition(color 0.5s ease);
- }
- }
-
.tree {
margin-bottom: 0;
opacity: 1;
@@ -103,29 +58,6 @@ $toggle-btn-size: 50px;
width: 0;
#slide-panel {
- .sidebar-header .sidebar-header-title {
- width: 0;
- opacity: 0;
-
- @include transition(width 0.5s ease);
- @include transition(opacity 0.5s ease);
- }
-
- .sidebar-header-toggle {
- margin-left: 0;
- background: none;
- border: none;
-
- @include transition(margin-left 0.5s ease);
-
- span {
- color: darken($brand-primary, 10%);
-
- @include rotate-animation(0.5s, 0deg);
- @include transition(color 0.5s ease);
- }
- }
-
.tree {
opacity: 0;
diff --git a/app/assets/stylesheets/themes/menu_bar.scss b/app/assets/stylesheets/themes/menu_bar.scss
index 5269bc2d5..c6930ce09 100644
--- a/app/assets/stylesheets/themes/menu_bar.scss
+++ b/app/assets/stylesheets/themes/menu_bar.scss
@@ -7,11 +7,17 @@
height: 100%;
left: 0;
overflow-x: hidden;
- padding-bottom: 16px;
- padding-top: 16px;
position: fixed;
width: 83px;
z-index: 1001;
+ padding-bottom: 50px;
+
+ .scroll-wrapper {
+ height: 100%;
+ padding-top: 16px;
+ width: 83px;
+ overflow-x: hidden;
+ }
ul.nav > li {
@@ -58,10 +64,27 @@
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:480px) {
- .menu-bar > ul.nav-bottom {
+@media(max-height:510px) {
+ .menu-bar .nav-bottom {
position: relative;
width: auto;
}
diff --git a/app/helpers/left_menu_bar_helper.rb b/app/helpers/left_menu_bar_helper.rb
index e5a599bed..91f49c429 100644
--- a/app/helpers/left_menu_bar_helper.rb
+++ b/app/helpers/left_menu_bar_helper.rb
@@ -24,4 +24,10 @@ 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
diff --git a/app/views/shared/_left_menu_bar.html.erb b/app/views/shared/_left_menu_bar.html.erb
index 520149308..6df1c1fe4 100644
--- a/app/views/shared/_left_menu_bar.html.erb
+++ b/app/views/shared/_left_menu_bar.html.erb
@@ -1,83 +1,82 @@
<%= javascript_include_tag("sidebar_toggle") %>
diff --git a/config/initializers/constants.rb b/config/initializers/constants.rb
index e964b90bb..2f8ee2518 100644
--- a/config/initializers/constants.rb
+++ b/config/initializers/constants.rb
@@ -94,10 +94,6 @@ class Constants
HANDSONTABLE_INIT_COLS_CNT = 5
HANDSONTABLE_INIT_ROWS_CNT = 5
- # Screen width which is still suitable for sidebar to be shown, otherwise
- # hidden
- SCREEN_WIDTH_LARGE = 928
-
#=============================================================================
# Styling
#=============================================================================