From a0f6956eab8af9df7465184d62e1ac7b2a37795d Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Wed, 8 Jun 2016 15:41:02 +0100 Subject: [PATCH] Give headline numbers a blue, not black background MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit These numbers don’t look very clickable white-on-black. Blue is the colour of links, so lets see if they are more clickable in blue. The same clicking-a-big-number thing is also happening on the activity page, so this commit also changes the activity page to look the same. --- .../stylesheets/components/big-number.scss | 62 +++++++++++-------- app/assets/stylesheets/components/pill.scss | 19 ++++-- app/assets/stylesheets/views/dashboard.scss | 2 +- app/templates/components/big-number.html | 17 ++--- .../views/dashboard/template-statistics.html | 1 + app/templates/views/dashboard/today.html | 8 +-- 6 files changed, 66 insertions(+), 43 deletions(-) diff --git a/app/assets/stylesheets/components/big-number.scss b/app/assets/stylesheets/components/big-number.scss index f3a97af4a..3e785dcb6 100644 --- a/app/assets/stylesheets/components/big-number.scss +++ b/app/assets/stylesheets/components/big-number.scss @@ -21,7 +21,7 @@ @extend %big-number; .big-number-number { - @include bold-36($tabular-numbers: true); + @include bold-36(); } } @@ -39,31 +39,13 @@ .big-number-with-status { @extend %big-number; - background: $text-colour; - color: $white; position: relative; margin-bottom: $gutter-half; .big-number { - padding: 15px; + padding: $gutter-half; position: relative; - - } - - .big-number-overlay-link { - - background: transparent; - position: absolute; - top: 0; - left: 0; - background: transparent; - width: 100%; - height: 100%; - - &:hover { - background: rgba($text-colour, 0.2); - } - + cursor: pointer; } .big-number-label { @@ -72,9 +54,31 @@ &:link, &:visited { - color: $white; - text-decoration: none; - border-bottom: 1px solid $white; + color: $link-colour; + } + + } + + .big-number-link { + + text-decoration: none; + background: $link-colour; + color: $white; + display: block; + border: 2px solid $link-colour; + margin-bottom: 5px; + + &:hover { + color: $light-blue-25; + } + + &:active, + &:focus { + outline: 3px solid $yellow; + } + + .big-number-label { + text-decoration: underline; } } @@ -85,6 +89,7 @@ @include core-19; display: block; background: $green; + color: $white; padding: 15px; a { @@ -94,8 +99,13 @@ &:active, &:hover { color: $white; - text-decoration: none; - border-bottom: 1px solid $white; + text-decoration: underline; + } + + &:active, + &:focus { + color: $black; + border-bottom: 1px solid $black; } } diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss index 55d22dbaf..5d3b57ce5 100644 --- a/app/assets/stylesheets/components/pill.scss +++ b/app/assets/stylesheets/components/pill.scss @@ -20,9 +20,10 @@ } a { - background: $panel-colour; - color: $link-colour; - border: 1px solid $panel-colour; + $background: $link-colour; + background: $background; + color: $white; + border: 2px solid $background; position: relative; text-decoration: none; cursor: pointer; @@ -31,8 +32,13 @@ text-decoration: underline; } + &:link, + &:visited { + color: $white; + } + &:hover { - color: $text-colour; + color: $light-blue-25; } &:active, @@ -42,7 +48,10 @@ } span { - border: 1px solid $grey-1; + border: 2px solid $black; + outline: 1px solid rgba($white, 0.1); + position: relative; + z-index: 1000; color: $text-colour; } } diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss index 59fa6baca..946b78576 100644 --- a/app/assets/stylesheets/views/dashboard.scss +++ b/app/assets/stylesheets/views/dashboard.scss @@ -2,7 +2,7 @@ table { th { - @include core-16; + @include core-19; border-bottom: 0; } diff --git a/app/templates/components/big-number.html b/app/templates/components/big-number.html index 062297855..33996580d 100644 --- a/app/templates/components/big-number.html +++ b/app/templates/components/big-number.html @@ -1,4 +1,7 @@ -{% macro big_number(number, label, label_link=None, currency='', smaller=False, smallest=False) %} +{% macro big_number(number, label, link=None, currency='', smaller=False, smallest=False) %} + {% if link %} + + {% endif %}
{% if number is number %} @@ -11,13 +14,13 @@ {{ number }} {% endif %}
- {% if label_link %} - {{ label }} - - {% elif label %} + {% if label %} {{ label }} {% endif %}
+ {% if link %} + + {% endif %} {% endmacro %} @@ -28,12 +31,12 @@ failure_percentage, danger_zone=False, failure_link=None, - label_link=None, + link=None, show_more_link=None, show_more_text='' ) %}
- {{ big_number(number, label, label_link) }} + {{ big_number(number, label, link=link) }}
{% if failures %} {% if failure_link %} diff --git a/app/templates/views/dashboard/template-statistics.html b/app/templates/views/dashboard/template-statistics.html index c0d42104d..b67b5c70a 100644 --- a/app/templates/views/dashboard/template-statistics.html +++ b/app/templates/views/dashboard/template-statistics.html @@ -1,3 +1,4 @@ +{% from "components/big-number.html" import big_number %} {% from "components/message-count-label.html" import message_count_label %} {% from "components/big-number.html" import big_number %} diff --git a/app/templates/views/dashboard/today.html b/app/templates/views/dashboard/today.html index d13cfe2bc..6a17e85f4 100644 --- a/app/templates/views/dashboard/today.html +++ b/app/templates/views/dashboard/today.html @@ -14,23 +14,23 @@
{{ big_number_with_status( statistics.emails_requested, - message_count_label(statistics.emails_requested, 'email'), + message_count_label(statistics.emails_requested, 'email', suffix=''), statistics.emails_failed, statistics.get('emails_failure_rate', 0.0), statistics.get('emails_failure_rate', 0)|float > 3, failure_link=url_for(".view_notifications", service_id=current_service.id, message_type='email', status='failed'), - label_link=url_for(".view_notifications", service_id=current_service.id, message_type='email', status='sending,delivered,failed') + link=url_for(".view_notifications", service_id=current_service.id, message_type='email', status='sending,delivered,failed') ) }}
{{ big_number_with_status( statistics.sms_requested, - message_count_label(statistics.sms_requested, 'sms'), + message_count_label(statistics.sms_requested, 'sms', suffix=''), statistics.sms_failed, statistics.get('sms_failure_rate', 0.0), statistics.get('sms_failure_rate', 0)|float > 3, failure_link=url_for(".view_notifications", service_id=current_service.id, message_type='sms', status='failed'), - label_link=url_for(".view_notifications", service_id=current_service.id, message_type='sms', status='sending,delivered,failed') + link=url_for(".view_notifications", service_id=current_service.id, message_type='sms', status='sending,delivered,failed') ) }}