From d3d06f465c22b4350890ae679a8093aa099aec10 Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Wed, 2 Dec 2015 17:06:27 +0100
Subject: [PATCH] SONAR-7068 improve alignment of measure on the overview page

---
 .../main/js/apps/overview/main/coverage.js    | 23 +++++++++------
 .../js/apps/overview/main/duplications.js     | 19 +++++++++----
 .../src/main/js/apps/overview/main/issues.js  | 28 +++++++++++++------
 .../src/main/less/pages/overview.less         | 13 +++++++--
 4 files changed, 57 insertions(+), 26 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')}
diff --git a/server/sonar-web/src/main/less/pages/overview.less b/server/sonar-web/src/main/less/pages/overview.less
index 1d047e74c4b..61b566b2920 100644
--- 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 {
-- 
2.39.5