darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-23 15:57:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refactor dashboard banner CSS and fix its text

Browse Source 
Switches the CSS to use flexbox for layout and
uses a macro to let the text support single and
multiple messsages.
This commit is contained in:
Tom Byers
2020-02-17 16:44:41 +00:00
parent 84df70e520
commit cd262559cc
2 changed files with 25 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/assets/stylesheets/components/banner.scss
View File

@@ -145,10 +145,12 @@
.banner-dashboard { .banner-dashboard {
$baseline-shift: -5px; $baseline-shift: 5px;
display: block; display: block; // for browsers that don't support flexbox
position: relative; display: flex;
align-items: baseline;
flex-wrap: wrap;
padding: $gutter-two-thirds 0; padding: $gutter-two-thirds 0;
border-top: 1px solid $border-colour; border-top: 1px solid $border-colour;
border-bottom: 1px solid $border-colour; border-bottom: 1px solid $border-colour;
@@ -156,29 +158,36 @@
text-decoration: none; text-decoration: none;
&:focus { &:focus {
border-color: $focus-colour; border: none;
box-shadow: 0 3px 0 0 $focus-colour, 0 -3px 0 0 $focus-colour; }
color: $text-colour;
&-count,
&-meta {
float: left; // for browsers that don't support flexbox
} }
&-count { &-count {
@include bold-36; @include govuk-font(36, $weight: bold);
padding-right: 5px; padding-right: 5px;
position: relative;
// remove the top of the extra line-height this introduces
top: $baseline-shift;
margin-top: -$baseline-shift;
flex: 0 1 0.85ch;
} }
&-count-label { &-count-label {
@include bold-24; @include govuk-font(24, $weight: bold);
text-decoration: underline; text-decoration: underline;
position: relative; padding-right: govuk-spacing(6);
top: $baseline-shift; flex: 2 1 auto;
} }
&-meta { &-meta {
@include core-19; @include govuk-font(19);
position: absolute; float: right;
right: 0;
bottom: $gutter-two-thirds - $baseline-shift;
text-align: right; text-align: right;
flex: initial;
} }
& + .banner-dashboard { & + .banner-dashboard {

3
app/templates/views/dashboard/_inbox.html
View File

@@ -1,4 +1,5 @@
{% from "components/big-number.html" import big_number, big_number_with_status %} {% from "components/big-number.html" import big_number, big_number_with_status %}
{% from "components/message-count-label.html" import message_count_label %}
<div class="ajax-block"> <div class="ajax-block">
{% if inbound_sms_summary != None %} {% if inbound_sms_summary != None %}
@@ -7,7 +8,7 @@
{{ inbound_sms_summary.count|format_thousands }} {{ inbound_sms_summary.count|format_thousands }}
</span> </span>
<span class="banner-dashboard-count-label"> <span class="banner-dashboard-count-label">
text messages received {{ message_count_label(inbound_sms_summary.count, 'sms', suffix='received') }}
</span> </span>
{% if inbound_sms_summary.most_recent %} {% if inbound_sms_summary.most_recent %}
<span class="banner-dashboard-meta"> <span class="banner-dashboard-meta">