SONAR-6041 fix the navigation on top

diff --git a/server/sonar-web/src/main/coffee/issues/layout.coffee b/server/sonar-web/src/main/coffee/issues/layout.coffee
index 1c7a2f7ff744af9214a6c5ac61b256638427daad..06815bfe844412d2e4633b3771c5da0aa08feb0b 100644 (file)
--- a/server/sonar-web/src/main/coffee/issues/layout.coffee
+++ b/server/sonar-web/src/main/coffee/issues/layout.coffee
@@ -17,28 +17,14 @@ define [
       workspaceComponentViewerRegion: '.issues-workspace-component-viewer'
 
 
-    initialize: ->
-      @topOffset = 0
-      $(window).on 'scroll.issues-layout', (=> @onScroll())
-
-
-    onClose: ->
-      $(window).off 'scroll.issues-layout'
-
-
     onRender: ->
       @$(@filtersRegion.el).addClass('hidden') if @options.app.state.get('isContext')
+      $('.search-navigator').addClass 'sticky'
       top = $('.search-navigator').offset().top
-      @topOffset = top
+      @$('.search-navigator-workspace-header').css top: top
       @$('.search-navigator-side').css({ top: top }).isolatedScroll()
 
 
-    onScroll: ->
-      scrollTop = $(window).scrollTop()
-      $('.search-navigator').toggleClass 'sticky', scrollTop >= @topOffset
-      @$('.search-navigator-side').css top: Math.max(0, Math.min(@topOffset - scrollTop, @topOffset))
-
-
     showSpinner: (region) ->
       @[region].show new Marionette.ItemView
         template: _.template('<i class="spinner"></i>')

diff --git a/server/sonar-web/src/main/js/coding-rules/layout.js b/server/sonar-web/src/main/js/coding-rules/layout.js
index 87259bbb8e9f56733b914b74fd2e9cf2cde9d47d..8dea2fe326f33006be603bd6e2588abd9cce264d 100644 (file)
--- a/server/sonar-web/src/main/js/coding-rules/layout.js
+++ b/server/sonar-web/src/main/js/coding-rules/layout.js
@@ -15,32 +15,14 @@ define([
       workspaceDetailsRegion: '.search-navigator-workspace-details'
     },
 
-    initialize: function () {
-      var that = this;
-      this.topOffset = 0;
-      $(window).on('scroll.search-navigator-layout', function () {
-        that.onScroll();
-      });
-    },
-
-    onClose: function () {
-      $(window).off('scroll.search-navigator-layout');
-    },
-
     onRender: function () {
-      var top = $('.search-navigator').offset().top;
-      this.topOffset = top;
+      var navigator = $('.search-navigator');
+      navigator.addClass('sticky');
+      var top = navigator.offset().top;
+      this.$('.search-navigator-workspace-header').css({ top: top });
       this.$('.search-navigator-side').css({ top: top }).isolatedScroll();
     },
 
-    onScroll: function () {
-      var scrollTop = $(window).scrollTop();
-      $('.search-navigator').toggleClass('sticky', scrollTop >= this.topOffset);
-      this.$('.search-navigator-side').css({
-        top: Math.max(0, Math.min(this.topOffset - scrollTop, this.topOffset))
-      });
-    },
-
     showDetails: function () {
       this.scroll = $(window).scrollTop();
       $('.search-navigator').addClass('search-navigator-extended-view');

diff --git a/server/sonar-web/src/main/js/nav/app.js b/server/sonar-web/src/main/js/nav/app.js
index ffacb9dab4a606650b9abbd0a3e6af87ce737705..12b5571bfd122d2a62a786330e9acce030f592f3 100644 (file)
--- a/server/sonar-web/src/main/js/nav/app.js
+++ b/server/sonar-web/src/main/js/nav/app.js
@@ -39,6 +39,11 @@ define([
     });
   }
 
+  App.addInitializer(function () {
+    var navHeight = $('.navbar-global').outerHeight() + $('.navbar-context').outerHeight();
+    $(document.body).css('padding-top', navHeight).data('top-offset', navHeight);
+  });
+
   window.requestMessages().done(function () {
     App.start();
   });

diff --git a/server/sonar-web/src/main/less/navbar.less b/server/sonar-web/src/main/less/navbar.less
index 87234f8016156f3aa5dd25a8272d2251eab9a00c..0a686693e49b6021e21cd73c3e4bc80bae5c1587 100644 (file)
--- a/server/sonar-web/src/main/less/navbar.less
+++ b/server/sonar-web/src/main/less/navbar.less
@@ -14,6 +14,9 @@
 }
 
 .navbar {
+  position: fixed;
+  left: 0;
+  right: 0;
   .clearfix;
   height: @navbarHeight;
 }
@@ -132,6 +135,8 @@
 
 
 .navbar-global {
+  top: 0;
+  z-index: 499;
   background-color: @navbarGlobalBackground;
 
   .navbar-nav > li > a {
@@ -175,6 +180,8 @@
 
 
 .navbar-context {
+  top: @navbarHeight;
+  z-index: 498;
   height: auto;
   background-color: @navbarContextBackground;