Toggle sidebar button more obvious

The toggle is now at the top of the sidebar because it is not noticeable near the bottom. By placing it at the top, users will immediately know that they can have more space if they desire versus on the bottom, they will have to search for it and that's not desired. Fixes #2044

Toggle sidebar button more obvious
b3fd0ca0 · Sabba Petri · bb235837 · b3fd0ca0 · b3fd0ca0
Commit b3fd0ca0 authored Feb 23, 2015 by Sabba Petri
Hide whitespace changes
Inline Side-by-side

Showing with 15 additions and 7 deletions

nav_sidebar.scss app/assets/stylesheets/sections/nav_sidebar.scss +13 -5

_collapse_button.html.haml app/views/layouts/_collapse_button.html.haml +2 -2

No files found.
--- a/app/assets/stylesheets/sections/nav_sidebar.scss
+++ b/app/assets/stylesheets/sections/nav_sidebar.scss
@@ -108,7 +108,7 @@
    width: $sidebar_width;

    .nav-sidebar {
-      margin-top: 20px;
+      margin-top: 29px;
      position: fixed;
      top: 45px;
      width: $sidebar_width;
@@ -127,7 +127,7 @@
    width: 52px;

    .nav-sidebar {
-      margin-top: 20px;
+      margin-top: 29px;
      position: fixed;
      top: 45px;
      width: 52px;
@@ -144,14 +144,22 @@
        }
      }
    }
+
+    .collapse-nav a {
+      left: 0px;
+      padding: 5px 23px 3px 22px;
+    }
  }
 }

 .collapse-nav a {
  position: fixed;
-  bottom: 15px;
-  padding: 10px;
-  background: #DDD;
+  top: 47px;
+  padding: 5px 13px 3px 13px;
+  left: 197px;
+  background: #EEE;
+  color: black;
+  border: 1px solid rgba(0,0,0,0.035);
 }

 @media (max-width: $screen-md-max) {

--- a/app/views/layouts/_collapse_button.html.haml
+++ b/app/views/layouts/_collapse_button.html.haml
 - if nav_menu_collapsed?
-  = link_to icon('angle-right'), '#', class: 'toggle-nav-collapse'
+  = link_to icon('angle-right'), '#', class: 'toggle-nav-collapse', title: "Open/Close"
 - else
-  = link_to icon('angle-left'), '#', class: 'toggle-nav-collapse'
+  = link_to icon('angle-left'), '#', class: 'toggle-nav-collapse', title: "Open/Close"