fix header clipping effect

6 files changed, 21 insertions, 15 deletions

diff --git a/server/sonar-web/src/main/js/nav/app.js b/server/sonar-web/src/main/js/nav/app.js
index a9ac2f9e22d..7945b6274bb 100644
--- a/server/sonar-web/src/main/js/nav/app.js
+++ b/server/sonar-web/src/main/js/nav/app.js
@@ -40,11 +40,6 @@ define([
   }
 
   App.addInitializer(function () {
-    var navHeight = $('.navbar-global').outerHeight() + $('.navbar-context').outerHeight();
-    $('.page-wrapper').css('padding-top', navHeight).data('top-offset', navHeight);
-  });
-
-  App.addInitializer(function () {
     var that = this;
     $(window).on('keypress', function (e) {
       var tagName = e.target.tagName;
diff --git a/server/sonar-web/src/main/less/components/navbar.less b/server/sonar-web/src/main/less/components/navbar.less
index 2c8da63e581..605f50f3d61 100644
--- a/server/sonar-web/src/main/less/components/navbar.less
+++ b/server/sonar-web/src/main/less/components/navbar.less
@@ -5,9 +5,8 @@
 @navbarGlobalBackground: #262626;
 @navbarContextBackground: @barBackgroundColor;
 
-@navbarHeight: 30px;
 @navbarLineHeight: 20px;
-@navbarTopPadding: (@navbarHeight - @navbarLineHeight) / 2;
+@navbarTopPadding: (@navbarGlobalHeight - @navbarLineHeight) / 2;
 
 .navbar, [class^="navbar-"], [class*=" navbar-"] {
   .box-sizing(border-box);
@@ -18,7 +17,7 @@
   left: 0;
   right: 0;
   .clearfix;
-  height: @navbarHeight;
+  height: @navbarGlobalHeight;
 }
 
 .navbar-fade {
@@ -184,9 +183,9 @@
 
 
 .navbar-context {
-  top: @navbarHeight;
+  top: @navbarGlobalHeight;
   z-index: 498;
-  height: 57px;
+  height: @navbarContextHeight;
   background-color: @navbarContextBackground;
 
   .nav-tabs {
@@ -194,8 +193,8 @@
   }
 
   .navbar-nav > li > a {
-    padding-top: 2px;
-    padding-bottom: 2px;
+    padding-top: 3px;
+    padding-bottom: 3px;
   }
 }
 
@@ -205,7 +204,7 @@
 }
 
 .navbar-context-meta {
-  line-height: @navbarHeight;
+  line-height: @navbarGlobalHeight;
   padding: 0 10px;
   color: @secondFontColor;
   font-size: @smallFontSize;
diff --git a/server/sonar-web/src/main/less/components/page.less b/server/sonar-web/src/main/less/components/page.less
index 207bbc31737..80350bcede9 100644
--- a/server/sonar-web/src/main/less/components/page.less
+++ b/server/sonar-web/src/main/less/components/page.less
@@ -17,6 +17,14 @@
   .box-sizing(border-box);
 }
 
+.page-wrapper-global {
+  padding-top: @navbarGlobalHeight;
+}
+
+.page-wrapper-context {
+  padding-top: @navbarGlobalHeight + @navbarContextHeight;
+}
+
 .page-header {
   .clearfix;
   margin-bottom: 10px;
diff --git a/server/sonar-web/src/main/less/components/ui.less b/server/sonar-web/src/main/less/components/ui.less
index 311a2ca8328..5ebfed40fa8 100644
--- a/server/sonar-web/src/main/less/components/ui.less
+++ b/server/sonar-web/src/main/less/components/ui.less
@@ -466,6 +466,7 @@ input[type=button] {
 }
 
 .nav-tabs {
+  padding-top: 1px;
   border-bottom: 1px solid @barBorderColor;
 
   > li {
diff --git a/server/sonar-web/src/main/less/variables.less b/server/sonar-web/src/main/less/variables.less
index 0857574ca68..1cc10911613 100644
--- a/server/sonar-web/src/main/less/variables.less
+++ b/server/sonar-web/src/main/less/variables.less
@@ -127,4 +127,6 @@
  * Page
  */
 
+@navbarGlobalHeight: 30px;
+@navbarContextHeight: 60px;
 @pageFooterHeight: 60px;
diff --git a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb
index d426dd667d9..be930090850 100644
--- a/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb
+++ b/server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb
@@ -4,12 +4,13 @@
      selected_section = Navigation::SECTION_HOME
    end
    @project=@resource unless @project || selected_section==Navigation::SECTION_HOME
+   has_context_nav = selected_section==Navigation::SECTION_RESOURCE || selected_section==Navigation::SECTION_CONFIGURATION
    period_param = "period=#{u(params[:period])}" if params[:period]
 %>
-<div class="page-wrapper" id="container">
+<div class="page-wrapper <% if has_context_nav %>page-wrapper-context<% else %>page-wrapper-global<% end %>" id="container">
   <nav class="navbar navbar-global page-container" id="global-navigation"></nav>
 
-  <% if selected_section==Navigation::SECTION_RESOURCE || selected_section==Navigation::SECTION_CONFIGURATION %>
+  <% if has_context_nav %>
     <nav class="navbar navbar-context page-container" id="context-navigation"></nav>
   <% end %>