SONAR-6331 update the style of the overview page

6 files changed, 99 insertions, 214 deletions

diff --git a/server/sonar-web/src/main/hbs/overview/overview-coverage.hbs b/server/sonar-web/src/main/hbs/overview/overview-coverage.hbs
index a46eb394a94..bdca7c4d95b 100644
--- a/server/sonar-web/src/main/hbs/overview/overview-coverage.hbs
+++ b/server/sonar-web/src/main/hbs/overview/overview-coverage.hbs
@@ -1,68 +1,26 @@
-<h6 class="note">{{t 'overview.coverage'}}</h6>
+<div class="overview-highlight">
+  <h6 class="note">{{t 'overview.coverage'}}</h6>
+  <div class="overview-main-measure">
+    {{#notNull coverage}}
+      <a href="{{urlForDrilldown componentKey 'overall_coverage'}}">{{formatMeasure coverage 'PERCENT'}}</a>
+    {{else}}
+      –
+    {{/notNull}}
+  </div>
+  {{#notNull coverage3}}
+    <div class="spacer-top">
+      <span class="overview-measure {{#gt coverage3 0}}text-success{{/gt}}{{#lt coverage3 0}}text-danger{{/lt}}">{{formatMeasureVariation coverage3 'PERCENT'}}</span>
+      <span class="note">{{period3Name}}</span>
+    </div>
+  {{/notNull}}
+  {{#notNull newCoverage3}}
+    <div class="spacer-top">
+      <a class="overview-measure spacer-top" href="{{urlForDrilldown componentKey 'new_overall_coverage' 3}}">{{formatMeasure newCoverage3 'PERCENT'}}</a>
+      <span class="note">on new code</span>
+    </div>
+  {{/notNull}}
+</div>
 
-<table class="width100">
-  <tr>
-    <td class="width-55">
-      <div class="overview-main-measure">
-        <a href="{{urlForDrilldown componentKey 'overall_coverage'}}">{{formatMeasure coverage 'PERCENT'}}</a>
-      </div>
-      <div class="overview-trend">
-        <div id="overview-coverage-trend" data-width="100" data-height="30" data-color="#4b9fd5"></div>
-      </div>
-    </td>
-    <td class="width-15">
-      {{#notNull coverage1}}
-        <a class="overview-measure" href="{{urlForDrilldown componentKey 'overall_coverage' 1}}">
-          {{formatMeasureVariation coverage1 'PERCENT'}}
-        </a>
-        <p class="note">{{period1Name}}</p>
-      {{/notNull}}
-    </td>
-    <td class="width-15">
-      {{#notNull coverage2}}
-        <a class="overview-measure" href="{{urlForDrilldown componentKey 'overall_coverage' 2}}">
-          {{formatMeasureVariation coverage2 'PERCENT'}}
-        </a>
-        <p class="note">{{period2Name}}</p>
-      {{/notNull}}
-    </td>
-    <td class="width-15">
-      {{#notNull coverage3}}
-        <a class="overview-measure" href="{{urlForDrilldown componentKey 'overall_coverage' 3}}">
-          {{formatMeasureVariation coverage3 'PERCENT'}}
-        </a>
-        <p class="note">{{period3Name}}</p>
-      {{/notNull}}
-    </td>
-  </tr>
-  <tr>
-    <td class="width-55"></td>
-    <td class="width-15">
-      {{#notNull newCoverage1}}
-        <div class="spacer-top"></div>
-        <a class="overview-measure" href="{{urlForDrilldown componentKey 'new_overall_coverage' 1}}">
-          {{formatMeasure newCoverage1 'PERCENT'}}
-        </a>
-        <p class="note">on new code</p>
-      {{/notNull}}
-    </td>
-    <td class="width-15">
-      {{#notNull newCoverage2}}
-        <div class="spacer-top"></div>
-        <a class="overview-measure spacer-top" href="{{urlForDrilldown componentKey 'new_overall_coverage' 2}}">
-          {{formatMeasure newCoverage2 'PERCENT'}}
-        </a>
-        <p class="note">on new code</p>
-      {{/notNull}}
-    </td>
-    <td class="width-15">
-      {{#notNull newCoverage3}}
-        <div class="spacer-top"></div>
-        <a class="overview-measure spacer-top" href="{{urlForDrilldown componentKey 'new_overall_coverage' 3}}">
-          {{formatMeasure newCoverage3 'PERCENT'}}
-        </a>
-        <p class="note">on new code</p>
-      {{/notNull}}
-    </td>
-  </tr>
-</table>
+<div class="overview-trend">
+  <div class="overview-sparkline" id="overview-coverage-trend" data-width="300" data-height="50" data-color="#f3ca8e" data-type="PERCENT"></div>
+</div>
diff --git a/server/sonar-web/src/main/hbs/overview/overview-debt.hbs b/server/sonar-web/src/main/hbs/overview/overview-debt.hbs
deleted file mode 100644
index 132f040fcbd..00000000000
--- a/server/sonar-web/src/main/hbs/overview/overview-debt.hbs
+++ /dev/null
@@ -1,38 +0,0 @@
-<h6 class="note">{{t 'overview.debt'}}</h6>
-
-<table class="width100">
-  <tr>
-    <td class="width-55">
-      <div class="overview-main-measure">
-        {{#notNull sqaleRating}}
-          <a href="{{urlForDrilldown componentKey 'sqale_rating'}}"><span class="rating rating-{{formatMeasure sqaleRating 'RATING'}}">{{formatMeasure sqaleRating 'RATING'}}</span></a>
-        {{/notNull}}
-        <a href="{{urlForDrilldown componentKey 'sqale_index'}}">{{formatMeasure debt 'WORK_DUR'}}</a>
-      </div>
-      <div class="overview-trend">
-        <div id="overview-debt-trend" data-width="100" data-height="30" data-color="#4b9fd5"></div>
-      </div>
-    </td>
-    <td class="width-15">
-      <a href="{{urlForDrilldown componentKey 'sqale_index' 1}}"
-         class="overview-measure {{#gt deb1 0}}text-danger{{/gt}}{{#lt debt1 0}}text-success{{/lt}}">
-        {{formatMeasureVariation debt1 'WORK_DUR'}}
-      </a>
-      <p class="note">{{period1Name}}</p>
-    </td>
-    <td class="width-15">
-      <a href="{{urlForDrilldown componentKey 'sqale_index' 2}}"
-         class="overview-measure {{#gt debt2 0}}text-danger{{/gt}}{{#lt debt2 0}}text-success{{/lt}}">
-        {{formatMeasureVariation debt2 'WORK_DUR'}}
-      </a>
-      <p class="note">{{period2Name}}</p>
-    </td>
-    <td class="width-15">
-      <a href="{{urlForDrilldown componentKey 'sqale_index' 3}}"
-         class="overview-measure {{#gt debt3 0}}text-danger{{/gt}}{{#lt debt3 0}}text-success{{/lt}}">
-        {{formatMeasureVariation debt3 'WORK_DUR'}}
-      </a>
-      <p class="note">{{period3Name}}</p>
-    </td>
-  </tr>
-</table>
diff --git a/server/sonar-web/src/main/hbs/overview/overview-duplications.hbs b/server/sonar-web/src/main/hbs/overview/overview-duplications.hbs
index 2f670d35cc4..68b7ecf1748 100644
--- a/server/sonar-web/src/main/hbs/overview/overview-duplications.hbs
+++ b/server/sonar-web/src/main/hbs/overview/overview-duplications.hbs
@@ -1,34 +1,19 @@
-<h6 class="note">{{t 'overview.duplications'}}</h6>
+<div class="overview-highlight">
+  <h6 class="note">{{t 'overview.duplications'}}</h6>
+  <div class="overview-main-measure">
+    <a href="{{urlForDrilldown componentKey 'duplicated_lines_density'}}">
+      {{formatMeasure duplications 'PERCENT'}}
+    </a>
+  </div>
+  {{#notNull duplications3}}
+    <div class="spacer-top">
+      <a class="overview-measure {{#gt duplications3 0}}text-danger{{/gt}}{{#lt duplications3 0}}text-success{{/lt}}"
+         href="{{urlForDrilldown componentKey 'duplicated_lines_density' 3}}">{{formatMeasureVariation duplications3 'PERCENT'}}</a>
+      <span class="note">{{period3Name}}</span>
+    </div>
+  {{/notNull}}
+</div>
 
-<table class="width100">
-  <tr>
-    <td class="width-55">
-      <div class="overview-main-measure">
-        <a href="{{urlForDrilldown componentKey 'duplicated_lines_density'}}">
-          {{formatMeasure duplications 'PERCENT'}}
-        </a>
-      </div>
-      <div class="overview-trend">
-        <div id="overview-duplications-trend" data-width="100" data-height="30" data-color="#4b9fd5"></div>
-      </div>
-    </td>
-    <td class="width-15">
-      <a class="overview-measure" href="{{urlForDrilldown componentKey 'duplicated_lines_density' 1}}">
-        {{formatMeasureVariation duplications1 'PERCENT'}}
-      </a>
-      <p class="note">{{period1Name}}</p>
-    </td>
-    <td class="width-15">
-      <a class="overview-measure" href="{{urlForDrilldown componentKey 'duplicated_lines_density' 2}}">
-        {{formatMeasureVariation duplications2 'PERCENT'}}
-      </a>
-      <p class="note">{{period2Name}}</p>
-    </td>
-    <td class="width-15">
-      <a class="overview-measure" href="{{urlForDrilldown componentKey 'duplicated_lines_density' 3}}">
-        {{formatMeasureVariation duplications3 'PERCENT'}}
-      </a>
-      <p class="note">{{period3Name}}</p>
-    </td>
-  </tr>
-</table>
+<div class="overview-trend">
+  <div class="overview-sparkline" id="overview-duplications-trend" data-width="300" data-height="50" data-color="#f3ca8e" data-type="PERCENT"></div>
+</div>
diff --git a/server/sonar-web/src/main/hbs/overview/overview-issues.hbs b/server/sonar-web/src/main/hbs/overview/overview-issues.hbs
index 5a7ba8090c3..ddc1ebdc350 100644
--- a/server/sonar-web/src/main/hbs/overview/overview-issues.hbs
+++ b/server/sonar-web/src/main/hbs/overview/overview-issues.hbs
@@ -1,44 +1,24 @@
-<h6 class="note">{{t 'overview.issues'}}</h6>
+<div class="overview-highlight">
+  <h6 class="note">{{t 'overview.issues'}}</h6>
+  <div class="overview-main-measure">
+    <a href="{{urlForIssuesOverview componentKey}}">{{formatMeasure issues 'INT'}}</a>
+  </div>
+  <div class="spacer-top">
+    {{#notNull sqaleRating}}
+      <a class="overview-measure" href="{{urlForDrilldown componentKey 'sqale_rating'}}"><span class="rating rating-{{formatMeasure sqaleRating 'RATING'}}">{{formatMeasure sqaleRating 'RATING'}}</span></a>
+    {{/notNull}}
+    &nbsp;&nbsp;
+    <a class="overview-measure" href="{{urlForDrilldown componentKey 'sqale_index'}}">{{formatMeasure debt 'WORK_DUR'}}</a>
+  </div>
+  {{#notNull issues3}}
+    <div class="spacer-top">
+      <a href="{{urlForIssuesOverview componentKey period3Date}}"
+         class="overview-measure {{#gt issues3 0}}text-danger{{else}}text-success{{/gt}}">{{formatMeasureVariation issues3 'INT'}}</a>
+      <span class="note">new {{period3Name}}</span>
+    </div>
+  {{/notNull}}
+</div>
 
-<table class="width100">
-  <tr>
-    <td class="width-55">
-      <div class="overview-main-measure">
-        <a href="{{urlForIssuesOverview componentKey}}">{{formatMeasure issues 'INT'}}</a>
-      </div>
-      <div class="overview-trend">
-        <div id="overview-issues-trend" data-width="100" data-height="30" data-color="#4b9fd5"></div>
-      </div>
-    </td>
-    <td class="width-15">
-      {{#notNull issues1}}
-        <a href="{{urlForIssuesOverview componentKey period1Date}}"
-           class="overview-measure {{#gt issues1 0}}text-danger{{else}}text-success{{/gt}}">
-          {{formatMeasureVariation issues1 'INT'}}
-        </a>
-        <span class="note">new</span>
-        <p class="note">{{period1Name}}</p>
-      {{/notNull}}
-    </td>
-    <td class="width-15">
-      {{#notNull issues2}}
-        <a href="{{urlForIssuesOverview componentKey period2Date}}"
-           class="overview-measure {{#gt issues2 0}}text-danger{{else}}text-success{{/gt}}">
-          {{formatMeasureVariation issues2 'INT'}}
-        </a>
-        <span class="note">new</span>
-        <p class="note">{{period2Name}}</p>
-      {{/notNull}}
-    </td>
-    <td class="width-15">
-      {{#notNull issues3}}
-        <a href="{{urlForIssuesOverview componentKey period3Date}}"
-           class="overview-measure {{#gt issues3 0}}text-danger{{else}}text-success{{/gt}}">
-          {{formatMeasureVariation issues3 'INT'}}
-        </a>
-        <span class="note">new</span>
-        <p class="note">{{period3Name}}</p>
-      {{/notNull}}
-    </td>
-  </tr>
-</table>
+<div class="overview-trend">
+  <div class="overview-sparkline" id="overview-issues-trend" data-width="300" data-height="50" data-color="#f3ca8e" data-type="INT"></div>
+</div>
diff --git a/server/sonar-web/src/main/hbs/overview/overview-layout.hbs b/server/sonar-web/src/main/hbs/overview/overview-layout.hbs
index 46bf13084f5..8ce2a7d4e4f 100644
--- a/server/sonar-web/src/main/hbs/overview/overview-layout.hbs
+++ b/server/sonar-web/src/main/hbs/overview/overview-layout.hbs
@@ -1,6 +1,18 @@
-<div class="overview-card" id="overview-gate"></div>
-<div class="overview-card" id="overview-size"></div>
-<div class="overview-card" id="overview-issues"></div>
-<div class="overview-card" id="overview-debt"></div>
-<div class="overview-card" id="overview-coverage"></div>
-<div class="overview-card" id="overview-duplications"></div>
+<div class="overview-card overview-gate" id="overview-gate"></div>
+
+<div class="overview-container columns">
+  <div class="column-half">
+    <div class="overview-card" id="overview-size"></div>
+  </div>
+  <div class="column-half">
+    <div class="overview-card" id="overview-issues"></div>
+  </div>
+</div>
+<div class="overview-container columns">
+  <div class="column-half">
+    <div class="overview-card" id="overview-coverage"></div>
+  </div>
+  <div class="column-half">
+    <div class="overview-card" id="overview-duplications"></div>
+  </div>
+</div>
diff --git a/server/sonar-web/src/main/hbs/overview/overview-size.hbs b/server/sonar-web/src/main/hbs/overview/overview-size.hbs
index f3e18a8ef6f..b06b14ed706 100644
--- a/server/sonar-web/src/main/hbs/overview/overview-size.hbs
+++ b/server/sonar-web/src/main/hbs/overview/overview-size.hbs
@@ -1,28 +1,16 @@
-<h6 class="note">{{t 'overview.lines_of_code'}}</h6>
-
-<table class="width100">
-  <tr>
-    <td class="width-55">
-      <div>
-        <div class="overview-main-measure">
-          <a href="{{urlForDrilldown componentKey 'ncloc'}}">{{formatMeasure ncloc 'INT'}}</a>
-        </div>
-        <div class="overview-trend">
-          <div id="overview-size-trend" data-width="100" data-height="30" data-color="#4b9fd5"></div>
-        </div>
-      </div>
-    </td>
-    <td class="width-15">
-      <span class="overview-measure">{{formatMeasureVariation ncloc1 'INT'}}</span>
-      <p class="note">{{period1Name}}</p>
-    </td>
-    <td class="width-15">
-      <span class="overview-measure">{{formatMeasureVariation ncloc2 'INT'}}</span>
-      <p class="note">{{period2Name}}</p>
-    </td>
-    <td class="width-15">
+<div class="overview-highlight">
+  <h6 class="note">{{t 'overview.lines_of_code'}}</h6>
+  <div class="overview-main-measure">
+    <a href="{{urlForDrilldown componentKey 'ncloc'}}">{{formatMeasure ncloc 'INT'}}</a>
+  </div>
+  {{#notNull ncloc3}}
+    <div class="spacer-top">
       <span class="overview-measure">{{formatMeasureVariation ncloc3 'INT'}}</span>
-      <p class="note">{{period3Name}}</p>
-    </td>
-  </tr>
-</table>
+      <span class="note">{{period3Name}}</span>
+    </div>
+  {{/notNull}}
+</div>
+
+<div class="overview-trend">
+  <div class="overview-sparkline" id="overview-size-trend" data-width="300" data-height="50" data-color="#f3ca8e" data-type="INT"></div>
+</div>