improve rendering of ratings on project overview page

3 files changed, 40 insertions, 46 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/main/code-smells.js b/server/sonar-web/src/main/js/apps/overview/main/code-smells.js
index ff53578e60d..b5024d444f4 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/code-smells.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/code-smells.js
@@ -99,39 +99,35 @@ export const CodeSmells = React.createClass({
           <MeasuresList>
 
             <Measure composite={true}>
-              <div className="display-inline-block text-middle big-spacer-right">
-                <div
-                    className="overview-domain-measure-value"
-                    title={translateWithParameters('widget.as_calculated_on_x', formattedSnapshotDate)}
-                    data-toggle="tooltip">
-                  <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"
-                    title={translateWithParameters('widget.as_calculated_on_x', formattedSnapshotDate)}
-                    data-toggle="tooltip">
-                  <DrilldownLink component={this.props.component.key} metric="sqale_index">
-                    {formatMeasure(debt, 'SHORT_WORK_DUR')}
-                  </DrilldownLink>
+              <div className="display-inline-block text-middle" style={{ paddingLeft: 56 }}>
+                <div className="overview-domain-measure-value">
+                  <IssuesLink
+                      component={this.props.component.key}
+                      params={{ resolved: 'false', types: 'CODE_SMELL' }}>
+                    <span
+                        title={translateWithParameters('widget.as_calculated_on_x', formattedSnapshotDate)}
+                        data-toggle="tooltip">
+                      {formatMeasure(codeSmells, 'SHORT_INT')}
+                    </span>
+                  </IssuesLink>
+                  <div className="overview-domain-measure-sup">
+                    <DrilldownLink component={this.props.component.key} metric="sqale_rating">
+                      <Rating value={this.props.measures['sqale_rating']}/>
+                    </DrilldownLink>
+                  </div>
                 </div>
-                <div className="overview-domain-measure-label">{getMetricName('effort')}</div>
+                <div className="overview-domain-measure-label">{getMetricName('code_smells')}</div>
               </div>
             </Measure>
 
-            <Measure label={getMetricName('code_smells')}>
-              <IssuesLink
-                  component={this.props.component.key}
-                  params={{ resolved: 'false', types: 'CODE_SMELL' }}>
+            <Measure label={getMetricName('effort')}>
+              <DrilldownLink component={this.props.component.key} metric="sqale_index">
                 <span
                     title={translateWithParameters('widget.as_calculated_on_x', formattedSnapshotDate)}
                     data-toggle="tooltip">
-                  {formatMeasure(codeSmells, 'SHORT_INT')}
+                  {formatMeasure(debt, 'SHORT_WORK_DUR')}
                 </span>
-              </IssuesLink>
+              </DrilldownLink>
             </Measure>
           </MeasuresList>
           {this.renderTimeline('before', true)}
diff --git a/server/sonar-web/src/main/js/apps/overview/main/risk.js b/server/sonar-web/src/main/js/apps/overview/main/risk.js
index c732299dfb6..6cc95ad5811 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/risk.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/risk.js
@@ -102,17 +102,7 @@ export const Risk = React.createClass({
           <MeasuresList>
 
             <Measure composite={true}>
-              <div className="display-inline-block text-middle big-spacer-right">
-                <div
-                    className="overview-domain-measure-value"
-                    title={translateWithParameters('widget.as_calculated_on_x', formattedSnapshotDate)}
-                    data-toggle="tooltip">
-                  <DrilldownLink component={this.props.component.key} metric="reliability_rating">
-                    <Rating value={this.props.measures['reliability_rating']}/>
-                  </DrilldownLink>
-                </div>
-              </div>
-              <div className="display-inline-block text-middle">
+              <div className="display-inline-block text-middle" style={{ paddingLeft: 56 }}>
                 <div className="overview-domain-measure-value">
                   <IssuesLink
                       component={this.props.component.key}
@@ -123,22 +113,17 @@ export const Risk = React.createClass({
                       {formatMeasure(bugs, 'SHORT_INT')}
                     </span>
                   </IssuesLink>
+                  <div className="overview-domain-measure-sup">
+                    <DrilldownLink component={this.props.component.key} metric="reliability_rating">
+                      <Rating value={this.props.measures['reliability_rating']}/>
+                    </DrilldownLink>
+                  </div>
                 </div>
                 <div className="overview-domain-measure-label">{getMetricName('bugs')}</div>
               </div>
             </Measure>
 
             <Measure composite={true}>
-              <div className="display-inline-block text-middle big-spacer-right">
-                <div
-                    className="overview-domain-measure-value"
-                    title={translateWithParameters('widget.as_calculated_on_x', formattedSnapshotDate)}
-                    data-toggle="tooltip">
-                  <DrilldownLink component={this.props.component.key} metric="security_rating">
-                    <Rating value={this.props.measures['security_rating']}/>
-                  </DrilldownLink>
-                </div>
-              </div>
               <div className="display-inline-block text-middle">
                 <div className="overview-domain-measure-value">
                   <IssuesLink
@@ -150,6 +135,11 @@ export const Risk = React.createClass({
                       {formatMeasure(vulnerabilities, 'SHORT_INT')}
                     </span>
                   </IssuesLink>
+                  <div className="overview-domain-measure-sup">
+                    <DrilldownLink component={this.props.component.key} metric="security_rating">
+                      <Rating value={this.props.measures['security_rating']}/>
+                    </DrilldownLink>
+                  </div>
                 </div>
                 <div className="overview-domain-measure-label">{getMetricName('vulnerabilities')}</div>
               </div>
diff --git a/server/sonar-web/src/main/less/pages/overview.less b/server/sonar-web/src/main/less/pages/overview.less
index c87ce90ba4d..de53c77286e 100644
--- a/server/sonar-web/src/main/less/pages/overview.less
+++ b/server/sonar-web/src/main/less/pages/overview.less
@@ -243,6 +243,14 @@
   .overview-domain-leak & { text-align: center; }
 }
 
+.overview-domain-measure-sup {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: -4px;
+  margin-left: 6px;
+  font-size: 16px;
+}
+
 .overview-domain-timeline {
   position: absolute;
   z-index: 1;