SONAR-7068 improve alignment of measure on the overview page

3 files changed, 47 insertions, 23 deletions

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 e30a1919483..4007f1e2f40 100644
--- 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 9e6a93f4b78..28476eab5d3 100644
--- 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 e0772a63100..67b37bd6049 100644
--- 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')}