Fix bad display of project dashboard page on small screens

diff --git a/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js b/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js
index 4841f32c2cba25546d1c248322c0712a00315785..7311941cc3ae28f9c3aeac29a6ff44df52955314 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js
@@ -83,7 +83,6 @@ class BugsAndVulnerabilities extends React.PureComponent {
               {getMetricName('new_bugs')}
             </div>
           </div>
-
           <div className="overview-domain-measure">
             <div className="overview-domain-measure-value">
               <span style={{ marginLeft: 30 }}>
@@ -106,30 +105,25 @@ class BugsAndVulnerabilities extends React.PureComponent {
       <div className="overview-domain-nutshell">
         <div className="overview-domain-measures">
           <div className="overview-domain-measure">
-            <div className="display-inline-block text-middle" style={{ paddingLeft: 56 }}>
-              <div className="overview-domain-measure-value">
-                {this.props.renderIssues('bugs', 'BUG')}
-                {this.props.renderRating('reliability_rating')}
-              </div>
-              <div className="overview-domain-measure-label">
-                <BugIcon className="little-spacer-right " />
-                {getMetricName('bugs')}
-                {this.props.renderHistoryLink('bugs')}
-              </div>
+            <div className="overview-domain-measure-value">
+              {this.props.renderIssues('bugs', 'BUG')}
+              {this.props.renderRating('reliability_rating')}
+            </div>
+            <div className="overview-domain-measure-label">
+              <BugIcon className="little-spacer-right " />
+              {getMetricName('bugs')}
+              {this.props.renderHistoryLink('bugs')}
             </div>
           </div>
-
           <div className="overview-domain-measure">
-            <div className="display-inline-block text-middle">
-              <div className="overview-domain-measure-value">
-                {this.props.renderIssues('vulnerabilities', 'VULNERABILITY')}
-                {this.props.renderRating('security_rating')}
-              </div>
-              <div className="overview-domain-measure-label">
-                <VulnerabilityIcon className="little-spacer-right " />
-                {getMetricName('vulnerabilities')}
-                {this.props.renderHistoryLink('vulnerabilities')}
-              </div>
+            <div className="overview-domain-measure-value">
+              {this.props.renderIssues('vulnerabilities', 'VULNERABILITY')}
+              {this.props.renderRating('security_rating')}
+            </div>
+            <div className="overview-domain-measure-label">
+              <VulnerabilityIcon className="little-spacer-right " />
+              {getMetricName('vulnerabilities')}
+              {this.props.renderHistoryLink('vulnerabilities')}
             </div>
           </div>
         </div>

diff --git a/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js b/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js
index 26a751d62190279067d5c488bc94ec29ba2964ad..01e98995e218a79ac23d080f39cd3645591bdd94 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js
@@ -104,7 +104,6 @@ class CodeSmells extends React.PureComponent {
               {getMetricName('new_effort')}
             </div>
           </div>
-
           <div className="overview-domain-measure">
             <div className="overview-domain-measure-value">
               {this.props.renderIssues('new_code_smells', 'CODE_SMELL')}
@@ -126,28 +125,23 @@ class CodeSmells extends React.PureComponent {
       <div className="overview-domain-nutshell">
         <div className="overview-domain-measures">
           <div className="overview-domain-measure">
-            <div className="display-inline-block text-middle" style={{ paddingLeft: 56 }}>
-              <div className="overview-domain-measure-value">
-                {this.renderDebt('sqale_index', 'CODE_SMELL')}
-                {this.props.renderRating('sqale_rating')}
-              </div>
-              <div className="overview-domain-measure-label">
-                {getMetricName('effort')}
-                {this.props.renderHistoryLink('sqale_index')}
-              </div>
+            <div className="overview-domain-measure-value">
+              {this.renderDebt('sqale_index', 'CODE_SMELL')}
+              {this.props.renderRating('sqale_rating')}
+            </div>
+            <div className="overview-domain-measure-label">
+              {getMetricName('effort')}
+              {this.props.renderHistoryLink('sqale_index')}
             </div>
           </div>
-
           <div className="overview-domain-measure">
-            <div className="display-inline-block text-middle">
-              <div className="overview-domain-measure-value">
-                {this.props.renderIssues('code_smells', 'CODE_SMELL')}
-              </div>
-              <div className="overview-domain-measure-label">
-                <CodeSmellIcon className="little-spacer-right " />
-                {getMetricName('code_smells')}
-                {this.props.renderHistoryLink('code_smells')}
-              </div>
+            <div className="overview-domain-measure-value">
+              {this.props.renderIssues('code_smells', 'CODE_SMELL')}
+            </div>
+            <div className="overview-domain-measure-label offset-left">
+              <CodeSmellIcon className="little-spacer-right " />
+              {getMetricName('code_smells')}
+              {this.props.renderHistoryLink('code_smells')}
             </div>
           </div>
         </div>

diff --git a/server/sonar-web/src/main/js/apps/overview/main/Coverage.js b/server/sonar-web/src/main/js/apps/overview/main/Coverage.js
index 915b93e68570b7eb252573a17d061e6c4596042b..0fcf8dd1668165142a7f417dfcfcc7e438e45327 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/main/Coverage.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/Coverage.js
@@ -132,6 +132,7 @@ class Coverage extends React.PureComponent {
       </div>
     );
   }
+
   renderNutshell() {
     return (
       <div className="overview-domain-nutshell">
@@ -144,6 +145,7 @@ class Coverage extends React.PureComponent {
       </div>
     );
   }
+
   renderLeak() {
     const { leakPeriod } = this.props;
     if (leakPeriod == null) {
@@ -159,6 +161,7 @@ class Coverage extends React.PureComponent {
       </div>
     );
   }
+
   render() {
     const { measures } = this.props;
     const coverageMeasure = measures.find(measure => measure.metric.key === 'coverage');

diff --git a/server/sonar-web/src/main/js/apps/overview/main/Duplications.js b/server/sonar-web/src/main/js/apps/overview/main/Duplications.js
index 2a3813238fad6a40121e765187dccc886b08920a..9d549b18a9f5b3a464d0d3ea304e7558f27719f8 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/main/Duplications.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/Duplications.js
@@ -56,7 +56,7 @@ class Duplications extends React.PureComponent {
             </DrilldownLink>
           </div>
 
-          <div className="overview-domain-measure-label">
+          <div className="overview-domain-measure-label offset-left">
             {getMetricName('duplications')}
             {this.props.renderHistoryLink('duplicated_lines_density')}
           </div>
@@ -116,6 +116,7 @@ class Duplications extends React.PureComponent {
       </div>
     );
   }
+
   renderNutshell() {
     return (
       <div className="overview-domain-nutshell">
@@ -128,6 +129,7 @@ class Duplications extends React.PureComponent {
       </div>
     );
   }
+
   renderLeak() {
     const { leakPeriod } = this.props;
     if (leakPeriod == null) {
@@ -143,6 +145,7 @@ class Duplications extends React.PureComponent {
       </div>
     );
   }
+
   render() {
     const { measures } = this.props;
     const duplications = measures.find(

diff --git a/server/sonar-web/src/main/js/apps/overview/main/enhance.js b/server/sonar-web/src/main/js/apps/overview/main/enhance.js
index fb008cabb12be3d095aa9c5d12e094e7ab2035c7..7d0b11432b5ad302ef61e4d5587212363990770a 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/main/enhance.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/enhance.js
@@ -94,7 +94,7 @@ export default function enhance(ComposedComponent) {
             </DrilldownLink>
           </div>
 
-          <div className="overview-domain-measure-label">
+          <div className="overview-domain-measure-label offset-left">
             {measure.metric.name}
             {this.renderHistoryLink(measure.metric.key)}
           </div>

diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index 7e355d93d36e287d40154c3f8a96e8c5bacd6150..ef7934e92c3a27a24c462a25f4cae9b345ea731f 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -190,7 +190,7 @@
   display: flex;
   flex: 1;
   align-items: center;
-  padding: 0 10%;
+  padding: 0;
 }
 
 .overview-domain-measures + .overview-domain-measures {
@@ -208,10 +208,7 @@
 
 .overview-domain-measure {
   flex: 1;
-}
-
-.overview-domain-measure + .overview-domain-measure {
-  padding-left: 15%;
+  text-align: center;
 }
 
 .overview-domain-measure-value {
@@ -227,20 +224,16 @@
   font-weight: 300;
 }
 
-.overview-domain-leak .overview-domain-measure-value {
-  text-align: center;
-}
-
 .overview-domain-measure-label {
   margin-top: 10px;
 }
 
-.overview-domain-measure-label > svg {
-  margin-top: 3px;
+.overview-domain-measure-label.offset-left {
+  margin-right: -30px;
 }
 
-.overview-domain-leak .overview-domain-measure-label {
-  text-align: center;
+.overview-domain-measure-label > svg {
+  margin-top: 3px;
 }
 
 .overview-domain-leak .overview-domain-measure-label > svg {