limit width of the project pages

diff --git a/server/sonar-web/src/main/js/apps/code/components/Code.js b/server/sonar-web/src/main/js/apps/code/components/Code.js
index b8f63763f72245b2e3ebba5474d3ec63c30aa5e9..16ea3bd17676306ed1231033a01c5d422757a48d 100644 (file)
--- a/server/sonar-web/src/main/js/apps/code/components/Code.js
+++ b/server/sonar-web/src/main/js/apps/code/components/Code.js
@@ -76,7 +76,7 @@ class Code extends Component {
     const componentsClassName = classNames('spacer-top', { 'new-loading': fetching });
 
     return (
-        <div className="page">
+        <div className="page page-limited">
           <header className="page-header">
             <Search component={this.props.component}/>
 

diff --git a/server/sonar-web/src/main/js/apps/overview/components/EmptyOverview.js b/server/sonar-web/src/main/js/apps/overview/components/EmptyOverview.js
index f105f9747b1110c8ad84db058bfadca2092af62e..b39005a49e51045ae670255c4f8ca1b6ad58e8b7 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/components/EmptyOverview.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/EmptyOverview.js
@@ -23,7 +23,7 @@ import { translate } from '../../../helpers/l10n';
 
 export default function EmptyOverview ({ component }) {
   return (
-      <div className="page">
+      <div className="page page-limited">
         <div className="alert alert-warning">
           {translate('provisioning.no_analysis')}
         </div>

diff --git a/server/sonar-web/src/main/js/apps/overview/components/OverviewMain.js b/server/sonar-web/src/main/js/apps/overview/components/OverviewMain.js
index 69f91857d2196a8cdbc3e731b89b2b3c1d332cc9..015c3cde255900178c69fcea279d22fd08cc7719 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/components/OverviewMain.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/OverviewMain.js
@@ -25,12 +25,14 @@ import Meta from './Meta';
 
 export default function OverviewMain (props) {
   return (
-      <div className="overview">
-        <div className="overview-main">
-          <Gate component={props.component} gate={props.gate}/>
-          <GeneralMain {...props}/>
+      <div className="page page-limited">
+        <div className="overview">
+          <div className="overview-main">
+            <Gate component={props.component} gate={props.gate}/>
+            <GeneralMain {...props}/>
+          </div>
+          <Meta component={props.component}/>
         </div>
-        <Meta component={props.component}/>
       </div>
   );
 }

diff --git a/server/sonar-web/src/main/less/pages/overview.less b/server/sonar-web/src/main/less/pages/overview.less
index 4970d78111b1e90ad1fd76c63e00e9158a0c0fff..0077a237a3a1a0479d734aba62f54b0613064546 100644 (file)
--- a/server/sonar-web/src/main/less/pages/overview.less
+++ b/server/sonar-web/src/main/less/pages/overview.less
@@ -24,15 +24,12 @@
 
 .overview {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  width: 100%;
   min-height: ~"calc(100vh - @{navbarGlobalHeight} - @{navbarContextHeight} - @{pageFooterHeight})";
   animation: fadeIn 0.5s forwards;
 }
 
 .overview-main {
-  flex: 4;
+  flex-grow: 1;
   box-sizing: border-box;
   background-color: @barBackgroundColor;
   transition: transform 0.5s ease, opacity 0.5s ease;
@@ -43,14 +40,9 @@
  */
 
 .overview-gate {
-  margin-right: 20px;
-  padding: 15px 0;
+  padding-bottom: 15px;
   border-bottom: 1px solid @barBorderColor;
   background-color: @barBackgroundColor;
-
-  .overview-title {
-    margin: 0 20px;
-  }
 }
 
 .overview-gate-conditions-list {
@@ -59,7 +51,7 @@
 }
 
 .overview-gate-condition {
-  padding: 10px 20px;
+  padding: 10px 40px 10px 0;
 }
 
 .overview-gate-condition-value {
@@ -105,14 +97,15 @@
  */
 
 .overview-meta {
-  flex: 1;
-  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 260px;
+  padding-left: 40px;
   background-color: @barBackgroundColor;
 }
 
 .overview-meta-card {
   min-width: 200px;
-  padding: 20px;
+  padding-bottom: 20px;
   box-sizing: border-box;
 }
 
@@ -149,7 +142,7 @@
 }
 
 .overview-card {
-  margin: 15px 20px;
+  margin: 15px 0;
 }
 
 .overview-card-special {
@@ -586,25 +579,6 @@
   background-color: transparent !important;
 }
 
-/*
- * Responsive Stuff
- */
-
-@media (max-width: 1200px) {
-  .overview {
-    display: block;
-  }
-
-  .overview-meta {
-    display: flex;
-    justify-content: flex-start;
-  }
-
-  .overview-meta .overview-meta-card {
-    width: calc(100% / 3);
-  }
-}
-
 /*
  * Animations
  */