mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-16 20:49:00 -04:00
e373296bd9
This commit adds two things: a section on the dashboard to show how many inbound messages the service has received in the last 7 days, and how recently an inbound message has been received --- Doesn’t show the contents of any messages, just like how the rest of the dashboard is an aggregation, never individual messages. a page to show all the inbound messages the service has received in the last 7 days --- This shows the first line of the message. Eventually this will link through to a ‘conversation’ page, where a service can see all the messages it’s received from a given phone number.
155 lines
2.1 KiB
SCSS
155 lines
2.1 KiB
SCSS
%big-number,
|
|
.big-number {
|
|
|
|
display: block;
|
|
|
|
&-number {
|
|
@include bold-48($tabular-numbers: true);
|
|
display: block;
|
|
}
|
|
|
|
&-label {
|
|
@include core-19;
|
|
display: inline-block;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-smaller {
|
|
|
|
@extend %big-number;
|
|
|
|
.big-number-number {
|
|
@include bold-36($tabular-numbers: true);
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-smallest {
|
|
|
|
@extend %big-number;
|
|
|
|
.big-number-number {
|
|
@include bold-24($tabular-numbers: true);
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-with-status {
|
|
|
|
@extend %big-number;
|
|
position: relative;
|
|
margin-bottom: $gutter-two-thirds;
|
|
|
|
.big-number {
|
|
padding: $gutter-half;
|
|
position: relative;
|
|
background: $black;
|
|
color: $white;
|
|
}
|
|
|
|
.big-number-label {
|
|
|
|
padding-bottom: 0;
|
|
|
|
&:link,
|
|
&:visited {
|
|
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;
|
|
|
|
.big-number {
|
|
color: $light-blue-25;
|
|
}
|
|
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
outline: 3px solid $yellow;
|
|
}
|
|
|
|
.big-number {
|
|
background: transparent;
|
|
}
|
|
|
|
.big-number-label {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
}
|
|
|
|
%big-number-status,
|
|
.big-number-status {
|
|
|
|
@include core-19;
|
|
display: block;
|
|
background: $green;
|
|
color: $white;
|
|
padding: 15px;
|
|
|
|
a {
|
|
|
|
&:link,
|
|
&:visited,
|
|
&:active,
|
|
&:hover {
|
|
color: $white;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
color: $black;
|
|
border-bottom: 1px solid $black;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-status-failing {
|
|
@extend %big-number-status;
|
|
background: $error-colour;
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-meta-wrapper {
|
|
|
|
position: relative;
|
|
margin: $gutter-half 0 $gutter 0;
|
|
background: $govuk-blue;
|
|
|
|
.big-number-meta {
|
|
|
|
padding: ($gutter / 3) $gutter-half;
|
|
color: $white;
|
|
pointer-events: none;
|
|
|
|
@include media(desktop) {
|
|
position: absolute;
|
|
bottom: 7px;
|
|
right: 5px;
|
|
text-align: right;
|
|
}
|
|
|
|
}
|
|
|
|
}
|