Make template usage on dashboard easier to scan

The dashboard looked a bit table-y. This commit makes four main changes:

- show a bar chart (drawn in CSS) for template usage (only shown if
  you’ve used more than one template recently)
- only break down template usage by template name, not template type
  (because that’s happening with the big numbers)
- change the style of the ‘show more’ links under each section so that
  they are all consistent, and a little less busy (one less keyline)
- remove the ‘recent templates‘ title so that the first two sections of
  the page group under ‘in the last 7 days’

app/assets/stylesheets/components/big-number.scss

@@ -1,19 +1,29 @@
 %big-number,
 .big-number {
 
-  @include bold-48;
+  display: block;
+
+  &-number {
+    @include bold-48;
+    display: block;
+  }
 
   &-label {
     @include core-19;
-    display: block;
-    padding-bottom: $gutter-half;
+    display: inline-block;
+    padding-bottom: 10px;
   }
 
 }
 
 .big-number-smaller {
+
   @extend %big-number;
-  @include bold-36($tabular-numbers: true);
+
+  .big-number-number {
+    @include bold-36($tabular-numbers: true);
+  }
+
 }
 
 .big-number-with-status {
@@ -22,25 +32,12 @@
   background: $text-colour;
   color: $white;
   position: relative;
-
-  &-show-more-link {
-    @include core-16;
-    display: block;
-    padding: 0.75em 0 0.5625em 0;
-    margin-bottom: $gutter-half;
-    text-align: center;
-    border-bottom: 1px solid $border-colour;
-
-    &:focus {
-      outline: none;
-      color: $text-colour;
-      border-bottom: 1px solid $brown;
-    }
-  }
+  margin-bottom: $gutter-half;
 
   .big-number {
     padding: 15px;
     position: relative;
+    
   }
 
   .big-number-overlay-link {
@@ -66,6 +63,8 @@
     &:link,
     &:visited {
       color: $white;
+      text-decoration: none;
+      border-bottom: 1px solid $white;
     }
 
   }
@@ -85,6 +84,8 @@
       &:active,
       &:hover {
         color: $white;
+        text-decoration: none;
+        border-bottom: 1px solid $white;
       }
 
     }

app/assets/stylesheets/components/show-more.scss

@@ -0,0 +1,34 @@
+.show-more {
+
+  @include core-16;
+  display: block;
+  padding: 0 0;
+  margin: $gutter-half 0 $gutter 0;
+  text-align: center;
+  border-top: 1px solid $border-colour;
+
+  &:focus {
+    
+    outline: none;
+    color: $text-colour;
+    box-shadow: 0 -10px 0 0 $yellow;
+    border-color: $yellow;
+
+    span {
+      background: $yellow;
+      outline: none;
+      border-color: $text-colour;
+    }
+
+  }
+
+  span {
+    position: relative;
+    top: -11px;
+    outline: 10px solid white;
+    background: $white;
+    display: inline-block;
+    border-bottom: 1px solid $light-blue;
+  }
+
+}

app/assets/stylesheets/main.scss

@@ -50,6 +50,7 @@ $path: '/static/images/';
 @import 'components/vendor/previous-next-navigation';
 @import 'components/pill';
 @import 'components/secondary-button';
+@import 'components/show-more';
 
 @import 'views/job';
 @import 'views/edit-template';

app/assets/stylesheets/views/dashboard.scss

@@ -5,16 +5,43 @@
 }
 
 .keyline-block {
-
   border-top: 1px solid $border-colour;
   padding-top: $gutter-half;
+}
 
-  &-show-more-link {
-    @include core-16;
-    border-top: 1px solid $border-colour;
-    border-bottom: 1px solid $border-colour;
-    padding: 0.75em 0 0.5625em 0;
-    text-align: center;
+.spark-bar {
+
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  text-align: right;
+  margin-bottom: $gutter-half;
+  height: 30px;
+  color: $govuk-blue;
+  line-height: 30px;
+  padding-right: 5px;
+  font-weight: bold;
+  color: $govuk-blue;
+
+  span {
+    display: block;
+    float: left;
+    background: $govuk-blue;
+    color: $white;
+    height: 30px;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+
+  &-label {
+    display: block;
+    line-height: 30px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: $link-colour;
+    max-width: 100%;
+    background: $white;
   }
 
 }