SONAR-5333 Improve UI of the sidebar, make it sticky

diff --git a/sonar-server/src/main/less/layout.less b/sonar-server/src/main/less/layout.less
index f244be899df6ddc715cb45fb82a403a2f8bb994e..a87f1902f7c058a1106dcab1860a8b519d935ec2 100644 (file)
--- a/sonar-server/src/main/less/layout.less
+++ b/sonar-server/src/main/less/layout.less
@@ -179,15 +179,15 @@ body, a {
   margin: 50px 180px 0;
 }
 
-#body {
-  /*  position: relative;*/
-}
-
 #footer {
   padding: 4px 0;
   clear: both;
 }
 
+#body {
+  position: relative;
+}
+
 .with_sidebar {
   margin: 0 0 0 160px;
   padding: 10px;
@@ -198,11 +198,13 @@ body, a {
 }
 
 #sidebar {
+  position: absolute;
+  top: 0; left: 10px;
   width: 150px;
-  float: left;
-  margin: 0 0 0 10px;
-  top: 0;
-  left: 0;
+
+  &.sticky {
+    position: fixed;
+  }
 }
 
 ul.sidebar {
@@ -216,12 +218,9 @@ ul.sidebar li {
   padding: 3px 10px;
 }
 
-ul.sidebar li a {
-  text-decoration: none;
-}
-
-ul.sidebar li a:hover {
-  text-decoration: underline;
+ul.sidebar li > a {
+  .highlighted-link;
+  .chevron-link;
 }
 
 ul.sidebar li.active {
@@ -298,10 +297,12 @@ ul.sidebar select, ul.sidebar input {
 }
 
 .blue-sidebar {
+  height: 100%;
+  border-left: 1px solid @blue;
+  border-right: 1px solid @blue;
+  border-bottom: 1px solid @blue;
   background-color: @lightBlue;
   color: @baseFontColor;
-  border: 1px solid @blue;
-  border-top: none;
 }
 
 .nolayout {

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/index.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/index.html.erb
index 9cdc6835cd249c5f9426e09b08748c104ff15f73..a06448d2507bd0fb663cc5ef0ae71e042f24b3e3 100644 (file)
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/index.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/dashboard/index.html.erb
@@ -30,5 +30,12 @@
 </div>
 
 <script>
-  document.getElementsByTagName("html")[0].className += 'dashboard-page'
+  jQuery('html').addClass('dashboard-page');
+  var $window = jQuery(window),
+      $sidebar = jQuery('#sidebar'),
+      topOffset = $sidebar.offset().top;
+  $window.on('scroll', function() {
+    var scrollTop = $window.scrollTop();
+    $sidebar.toggleClass('sticky', scrollTop > topOffset);
+  });
 </script>