fix SONAR-6041 update layout

diff --git a/server/sonar-web/src/main/coffee/issues/component-viewer/main.coffee b/server/sonar-web/src/main/coffee/issues/component-viewer/main.coffee
index 9979b1ad5ba30d2b8686293334c9cc95c40116bf..5e4acec7525e7f083282652c3a8677f28c00b463 100644 (file)
--- a/server/sonar-web/src/main/coffee/issues/component-viewer/main.coffee
+++ b/server/sonar-web/src/main/coffee/issues/component-viewer/main.coffee
@@ -175,7 +175,6 @@ define [
     scrollToLine: (line) ->
       row = @$("[data-line-number=#{line}]")
       goal = if row.length > 0 then row.offset().top - 200 else 0
-      goal = Math.max goal, 30
       $(window).scrollTop goal
 
 

diff --git a/server/sonar-web/src/main/coffee/issues/layout.coffee b/server/sonar-web/src/main/coffee/issues/layout.coffee
index c6b591c231e40f52e55c34c8c738622524908ce1..f18543587948d887099678eae2128e6cb211177a 100644 (file)
--- a/server/sonar-web/src/main/coffee/issues/layout.coffee
+++ b/server/sonar-web/src/main/coffee/issues/layout.coffee
@@ -21,8 +21,10 @@ define [
     showComponentViewer: ->
       @scroll = $(window).scrollTop()
       $('.issues').addClass 'issues-extended-view'
+      @$el.closest('.container').addClass 'container-full-width'
 
 
     hideComponentViewer: ->
       $('.issues').removeClass 'issues-extended-view'
       $(window).scrollTop @scroll if @scroll?
+      @$el.closest('.container').removeClass 'container-full-width'

diff --git a/server/sonar-web/src/main/coffee/quality-gate/layout.coffee b/server/sonar-web/src/main/coffee/quality-gate/layout.coffee
index 9a982cf1e02ae665eec59b3edbbaa897cc0bbbc6..5a3627878503620eac412f94177759b543579b14 100644 (file)
--- a/server/sonar-web/src/main/coffee/quality-gate/layout.coffee
+++ b/server/sonar-web/src/main/coffee/quality-gate/layout.coffee
@@ -26,20 +26,6 @@ define [
 
 
     onResize: ->
-      footerEl = jQuery('#footer')
-      footerHeight = footerEl.outerHeight true
-
-      resultsEl = jQuery('.navigator-results')
-      resultsHeight = jQuery(window).height() - resultsEl.offset().top -
-      parseInt(resultsEl.css('margin-bottom'), 10) - footerHeight
-      resultsEl.height resultsHeight
-
-      detailsEl = jQuery('.navigator-details')
-      detailsWidth = jQuery(window).width() - detailsEl.offset().left -
-      parseInt(detailsEl.css('margin-right'), 10)
-      detailsHeight = jQuery(window).height() - detailsEl.offset().top -
-      parseInt(detailsEl.css('margin-bottom'), 10) - footerHeight
-      detailsEl.width(detailsWidth).height detailsHeight
 
 
     onRender: ->

diff --git a/server/sonar-web/src/main/hbs/issues/issues-layout.hbs b/server/sonar-web/src/main/hbs/issues/issues-layout.hbs
index 782d2f517c10b26588f785db9d73f40945b28ad8..b9a344806cb6d48ff2a8972e3d18f073e27d327e 100644 (file)
--- a/server/sonar-web/src/main/hbs/issues/issues-layout.hbs
+++ b/server/sonar-web/src/main/hbs/issues/issues-layout.hbs
@@ -1,4 +1,3 @@
-
 <div class="container-side container-side-left">
   <div class="search-navigator-filters"></div>
   <div class="search-navigator-side">

diff --git a/server/sonar-web/src/main/hbs/quality-gates/quality-gates-layout.hbs b/server/sonar-web/src/main/hbs/quality-gates/quality-gates-layout.hbs
index 22f6fba05e7b8d6376385ce030d6622eb409d01b..84e5825a118d82a377fe323066d67fac41b641a9 100644 (file)
--- a/server/sonar-web/src/main/hbs/quality-gates/quality-gates-layout.hbs
+++ b/server/sonar-web/src/main/hbs/quality-gates/quality-gates-layout.hbs
@@ -1,10 +1,8 @@
-<div class="navigator-content">
-  <div class="navigator-side">
-    <div class="navigator-actions"></div>
-    <div class="navigator-results quality-gates-nav"></div>
-  </div>
-  <div class="navigator-main">
-    <div class="navigator-header"></div>
-    <div class="navigator-details"></div>
-  </div>
-</div>
\ No newline at end of file
+<div class="container-side container-side-left">
+  <div class="navigator-actions"></div>
+  <div class="navigator-results quality-gates-nav"></div>
+</div>
+<div class="container-main">
+  <div class="navigator-header"></div>
+  <div class="navigator-details"></div>
+</div>

diff --git a/server/sonar-web/src/main/js/nav/navbar.js b/server/sonar-web/src/main/js/nav/navbar.js
index 026c0b33172578387e7a128df77a6d772993fa65..e39268e321a5f7d0f3c88d00cec6e3136427d4b7 100644 (file)
--- a/server/sonar-web/src/main/js/nav/navbar.js
+++ b/server/sonar-web/src/main/js/nav/navbar.js
@@ -21,22 +21,11 @@ define([
     },
 
     initialize: function () {
-      $(window).on('scroll.nav-layout', this.onScroll);
       this.projectName = window.navbarProject;
       this.projectKey = window.navbarProjectKey;
       this.isProjectFavorite = window.navbarProjectFavorite;
     },
 
-    onClose: function () {
-      $(window).off('scroll.nav-layout');
-    },
-
-    onScroll: function () {
-      var scrollTop = $(window).scrollTop(),
-          isInTheMiddle = scrollTop > 0;
-      $('.navbar-sticky').toggleClass('middle', isInTheMiddle);
-    },
-
     onRender: function () {
       var that = this;
       this.$el.addClass('navbar-' + window.navbarSpace);

diff --git a/server/sonar-web/src/main/less/components/facets.less b/server/sonar-web/src/main/less/components/facets.less
index ae37e07518411b9d6633e2bcb0e1443b40464860..33bd7f023e97cdaa265e29332383efe9221f62b1 100644 (file)
--- a/server/sonar-web/src/main/less/components/facets.less
+++ b/server/sonar-web/src/main/less/components/facets.less
@@ -9,7 +9,6 @@
   padding: 4px 5px;
   border: 1px solid @barBorderColor;
   border-radius: 2px;
-  background-color: lighten(@barBackgroundColor, 2%);
   font-size: 0;
   cursor: pointer;
   white-space: nowrap;
@@ -37,7 +36,6 @@
 }
 
 .facet-name {
-  background-color: lighten(@barBackgroundColor, 2%);
   font-size: @smallFontSize;
 }
 
@@ -45,7 +43,6 @@
   margin-left: 5px;
   padding-left: 5px;
   border-left: 1px solid @barBorderColor;
-  background-color: lighten(@barBackgroundColor, 2%);
   color: @secondFontColor;
   font-size: @smallFontSize;
 }

diff --git a/server/sonar-web/src/main/less/components/search-navigator.less b/server/sonar-web/src/main/less/components/search-navigator.less
index b2b74e936e07a305a255dd50b43d0653a1e130f7..9b55df03892e8b0b349ba1a6f690d27c7da0c59e 100644 (file)
--- a/server/sonar-web/src/main/less/components/search-navigator.less
+++ b/server/sonar-web/src/main/less/components/search-navigator.less
@@ -14,7 +14,6 @@
 }
 
 .search-navigator-facet-box {
-  background-color: @barBackgroundColor;
   font-size: @baseFontSize;
 }
 
@@ -51,13 +50,11 @@
   margin: 0 0 1px 0;
   border-color: transparent;
   .box-sizing(border-box);
-  background-color: @barBackgroundColor;
   white-space: normal;
   overflow: hidden;
 
   .facet-name {
     white-space: nowrap;
-    background-color: @barBackgroundColor;
     color: @baseFontColor;
   }
 
@@ -66,14 +63,13 @@
     top: 0; right: 0;
     padding: 4px 5px;
     border: none;
-    background-color: @barBackgroundColor;
 
     &:before {
       content: " ";
       position: absolute;
       top: 0; bottom: 0; right: 100%;
       width: 10px;
-      background-image: linear-gradient(to right, fade(@barBackgroundColor, 0%), @barBackgroundColor 75%);
+      background-image: linear-gradient(to right, fade(#fff, 0%), #fff 75%);
     }
   }
 
@@ -91,15 +87,15 @@
 
 .search-navigator-facet-header {
   display: block;
-  padding: 6px 10px;
+  padding: 6px 0;
   border-bottom: none;
   color: @baseFontColor;
   font-weight: 500;
 }
 
 .search-navigator-facet-list {
-  margin: 0 0 0 0;
-  padding: 0 10px 10px;
+  margin: 0;
+  padding: 0 0 10px;
   font-size: 0;
 }
 
@@ -133,7 +129,7 @@
 }
 
 .search-navigator-facet-query {
-  padding: 6px 10px;
+  padding: 6px 0;
 
   input {
     width: 100%;
@@ -150,9 +146,9 @@
 }
 
 .search-navigator-filters {
-  position: relative;
   .clearfix;
-  padding: 5px 10px;
+  position: relative;
+  padding: 5px 0;
 }
 
 .search-navigator-filters-selected {
@@ -248,7 +244,7 @@
   position: absolute;
   top: 0;
   right: 0;
-  padding: 5px 10px;
+  padding: 5px 0;
   font-size: 0;
   white-space: nowrap;
 

diff --git a/server/sonar-web/src/main/less/layout-new.less b/server/sonar-web/src/main/less/layout-new.less
index 4854ccdc00971b0a44b19c87fb2f573e0ba1412e..ef0290991c0cbdde473431e794d7a38c37dd6ae5 100644 (file)
--- a/server/sonar-web/src/main/less/layout-new.less
+++ b/server/sonar-web/src/main/less/layout-new.less
@@ -5,6 +5,7 @@
 @pageWidth: 1020px;
 @containerWidth: 980px;
 @sideWidth: 200px;
+@fullWidthSideWidth: 40px;
 @sideMargin: 10px;
 
 html {
@@ -16,10 +17,29 @@ body {
   min-height: 100vh;
 }
 
+.wrapper {
+  min-height: ~"calc(100vh - 60px)";
+}
+
 .container {
   width: @containerWidth;
   margin: 0 auto;
   .box-sizing(border-box);
+  .trans(width);
+}
+
+.container-full-width {
+  width: ~"calc(100% - @{fullWidthSideWidth})";
+
+  .container-main {
+    width: 100%;
+  }
+
+  .container-side {
+    position: absolute;
+    .translate(-100%, 0);
+    opacity: 0;
+  }
 }
 
 .container-one-third {
@@ -37,6 +57,7 @@ body {
 .container-side {
   width: @sideWidth;
   .box-sizing(border-box);
+  .trans;
 }
 
 .container-side-left {
@@ -52,18 +73,14 @@ body {
 .container-main {
   float: left;
   width: @containerWidth - @sideWidth;
+  .box-sizing(border-box);
+  .trans(width);
 }
 
 .face-bar {
-  background-color: @barBackgroundColor;
+
 }
 
 .face-main {
-  margin: -10px;
-  padding: 10px;
   background-color: #fff;
 }
-
-.container-side + .face-main {
-  box-shadow: -6px 0 10px 0 rgba(0, 0, 0, 0.075);
-}

diff --git a/server/sonar-web/src/main/less/layout.less b/server/sonar-web/src/main/less/layout.less
index 236075fc815bf2e943445872bef8c15e8073b573..ba327da05d8273776f620b639cd1e06f710bfe98 100644 (file)
--- a/server/sonar-web/src/main/less/layout.less
+++ b/server/sonar-web/src/main/less/layout.less
@@ -132,6 +132,9 @@
 
 #footer {
   position: relative;
+  min-height: 60px;
+  .box-sizing(border-box);
+  background-color: @barBackgroundColor;
   clear: both;
 }
 

diff --git a/server/sonar-web/src/main/less/navbar.less b/server/sonar-web/src/main/less/navbar.less
index 29c37d625a1dc8d7b72605867cd86a76deaf4b10..34fa99e4a6adc32cc9775a7bb43ba4852d580529 100644 (file)
--- a/server/sonar-web/src/main/less/navbar.less
+++ b/server/sonar-web/src/main/less/navbar.less
@@ -2,7 +2,7 @@
 @import (reference) "variables";
 @import (reference) "ui";
 
-@navbarBackground: #262626;
+@navbarBackground: #151515;
 @navbarProjectBackground: @navbarBackground;
 @navbarSettingsBackground: #591500;
 
@@ -162,7 +162,7 @@
 .navbar-global {
   background-color: @navbarBackground;
 
-  .navbar-sticky.middle & {
+  .navbar-sticky & {
     background-color: fade(@navbarBackground, 90%);
   }
 
@@ -178,7 +178,7 @@
 .navbar-project {
   background-color: @navbarProjectBackground;
 
-  .navbar-sticky.middle & {
+  .navbar-sticky & {
     background-color: fade(@navbarProjectBackground, 90%);
   }
 
@@ -202,7 +202,7 @@
 .navbar-settings {
   background-color: @navbarSettingsBackground;
 
-  .navbar-sticky.middle & {
+  .navbar-sticky & {
     background-color: fade(@navbarSettingsBackground, 90%);
   }
 

diff --git a/server/sonar-web/src/main/less/quality-gates.less b/server/sonar-web/src/main/less/quality-gates.less
index 070216d1b21aef108cecffaade17dbc265e1f2b8..cc6de6730c7846c6328e81e1f1d9bc0ebb2eb890 100644 (file)
--- a/server/sonar-web/src/main/less/quality-gates.less
+++ b/server/sonar-web/src/main/less/quality-gates.less
@@ -2,17 +2,8 @@
 @import (reference) "mixins";
 @import (reference) "navigator/config";
 
-@qualityGateSidebarWidth: 230px;
-
 .quality-gates-navigator {
 
-  .navigator-side {
-    display: table-cell;
-    vertical-align: top;
-    width: @qualityGateSidebarWidth + 2 * @navigatorPadding;
-    min-width: 0;
-  }
-
   .navigator-header {
     margin-left: 0;
     .spinner { margin-top: 9px; }
@@ -20,7 +11,6 @@
 
   .navigator-actions {
     height: @navigatorHeaderHeight;
-    width: @qualityGateSidebarWidth;
     margin: @navigatorPadding;
     padding: 0 @navigatorPadding;
 
@@ -33,8 +23,8 @@
   }
 
   .navigator-results {
-    width: @qualityGateSidebarWidth;
     min-width: 0;
+    width: auto;
   }
 
   .navigator-details { margin-left: 0; }

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 9b6c269c74c0489e11e51cb2d378a7335a300d02..92db26a73124679de3a48d303f1fc46b46f410b7 100644 (file)
--- 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
@@ -6,7 +6,7 @@
    @project=@resource unless @project || selected_section==Navigation::SECTION_HOME
    period_param = "period=#{u(params[:period])}" if params[:period]
 %>
-<div id="container" class="navbar-sticky">
+<div id="container" class="wrapper navbar-sticky">
   <%
      navbar_class = 'navbar-global'
      navbar_class = 'navbar-project' if selected_section==Navigation::SECTION_RESOURCE