SONAR-7068 improve alignment of measure on the overview page

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 e30a1919483952972e562cf2695db120dc576111..4007f1e2f4048bb829f002d4c90bd9e0fa8a5fc4 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
@@ -83,16 +83,23 @@ export const GeneralCoverage = React.createClass({
       <DomainPanel domain="coverage">
         <DomainNutshell>
           <MeasuresList>
-            <Measure label={getMetricName('coverage')}>
-              <span className="big-spacer-right">
+
+            <Measure composite={true}>
+              <div className="display-inline-block text-middle big-spacer-right">
                 <DonutChart width="40" height="40" thickness="3" data={donutData}/>
-              </span>
-              <DrilldownLink component={this.props.component.key} metric={coverageMetric}>
-                <span className="js-overview-main-coverage">
-                  {formatMeasure(this.props.measures[coverageMetric], 'PERCENT')}
-                </span>
-              </DrilldownLink>
+              </div>
+              <div className="display-inline-block text-middle">
+                <div className="overview-domain-measure-value">
+                  <DrilldownLink component={this.props.component.key} metric={coverageMetric}>
+                    <span className="js-overview-main-coverage">
+                      {formatMeasure(this.props.measures[coverageMetric], 'PERCENT')}
+                    </span>
+                  </DrilldownLink>
+                </div>
+                <div className="overview-domain-measure-label">{getMetricName('coverage')}</div>
+              </div>
             </Measure>
+
             {this.renderTests()}
           </MeasuresList>
           {this.renderTimeline('before')}

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 9e6a93f4b78c358b7c57010f3fe50a9d35b7eaed..28476eab5d3df622c1748fc911811e81ccb62b3b 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,14 +56,21 @@ export const GeneralDuplications = React.createClass({
       <DomainPanel domain="duplications">
         <DomainNutshell>
           <MeasuresList>
-            <Measure label={getMetricName('duplications')}>
-              <span className="big-spacer-right">
+
+            <Measure composite={true}>
+              <div className="display-inline-block text-middle big-spacer-right">
                 <DonutChart width="40" height="40" thickness="3" data={donutData}/>
-              </span>
-              <DrilldownLink component={this.props.component.key} metric="duplicated_lines_density">
-                {formatMeasure(this.props.measures['duplicated_lines_density'], 'PERCENT')}
-              </DrilldownLink>
+              </div>
+              <div className="display-inline-block text-middle">
+                <div className="overview-domain-measure-value">
+                  <DrilldownLink component={this.props.component.key} metric="duplicated_lines_density">
+                    {formatMeasure(this.props.measures['duplicated_lines_density'], 'PERCENT')}
+                  </DrilldownLink>
+                </div>
+                <div className="overview-domain-measure-label">{getMetricName('duplications')}</div>
+              </div>
             </Measure>
+
             {this.renderDuplicatedBlocks()}
           </MeasuresList>
           {this.renderTimeline('before')}

diff --git a/server/sonar-web/src/main/js/apps/overview/main/issues.js b/server/sonar-web/src/main/js/apps/overview/main/issues.js
index e0772a6310000800e4bda8307a90879093d80d35..67b37bd6049cae0ff8d005052f10e6a4c9648258 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/main/issues.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/issues.js
@@ -55,16 +55,26 @@ export const GeneralIssues = React.createClass({
       <DomainPanel domain="issues">
         <DomainNutshell>
           <MeasuresList>
-            <Measure>
-              <DrilldownLink component={this.props.component.key} metric="sqale_rating">
-                <Rating value={this.props.measures['sqale_rating']}/>
-              </DrilldownLink>
-            </Measure>
-            <Measure label={getMetricName('debt')}>
-              <IssuesLink component={this.props.component.key} params={{ resolved: 'false', facetMode: 'debt' }}>
-                {formatMeasure(this.props.measures.debt, 'SHORT_WORK_DUR')}
-              </IssuesLink>
+
+            <Measure composite={true}>
+              <div className="display-inline-block text-middle big-spacer-right">
+                <div className="overview-domain-measure-value">
+                  <DrilldownLink component={this.props.component.key} metric="sqale_rating">
+                    <Rating value={this.props.measures['sqale_rating']}/>
+                  </DrilldownLink>
+                </div>
+              </div>
+              <div className="display-inline-block text-middle">
+                <div className="overview-domain-measure-value">
+                  <IssuesLink component={this.props.component.key}
+                              params={{ resolved: 'false', facetMode: 'debt' }}>
+                    {formatMeasure(this.props.measures.debt, 'SHORT_WORK_DUR')}
+                  </IssuesLink>
+                </div>
+                <div className="overview-domain-measure-label">{getMetricName('debt')}</div>
+              </div>
             </Measure>
+
             <Measure label={getMetricName('issues')}>
               <IssuesLink component={this.props.component.key} params={{ resolved: 'false' }}>
                 {formatMeasure(this.props.measures.issues, 'SHORT_INT')}

diff --git a/server/sonar-web/src/main/less/pages/overview.less b/server/sonar-web/src/main/less/pages/overview.less
index 1d047e74c4b05e993d7481317781990863346bdd..61b566b2920b4b98079af15ec58ce835d55c982e 100644 (file)
--- a/server/sonar-web/src/main/less/pages/overview.less
+++ b/server/sonar-web/src/main/less/pages/overview.less
@@ -179,8 +179,8 @@
   z-index: 2;
   display: flex;
   flex: 1;
-  justify-content: space-around;
   align-items: center;
+  padding: 0 10%;
 }
 
 .overview-domain-measures + .overview-domain-measures {
@@ -197,18 +197,25 @@
 }
 
 .overview-domain-measure {
+  flex: 1;
+}
+
+.overview-domain-measure + .overview-domain-measure {
+  padding-left: 15%;
 }
 
 .overview-domain-measure-value {
   line-height: 1;
   font-size: 36px;
   font-weight: 300;
-  text-align: center;
+
+  .overview-domain-leak & { text-align: center; }
 }
 
 .overview-domain-measure-label {
   margin-top: 10px;
-  text-align: center;
+
+  .overview-domain-leak & { text-align: center; }
 }
 
 .overview-domain-timeline {