Files
notifications-admin/app/assets/stylesheets/views/dashboard.scss
Chris Hill-Scott e373296bd9 Show inbound messages on the dashboard
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.
2017-06-05 15:42:36 +01:00

101 lines
1.5 KiB
SCSS

.dashboard {
table {
th {
@include core-19;
border-bottom: 0;
}
td {
@include core-19;
border: 0;
}
}
> .heading-medium:first-of-type {
margin-top: 10px;
}
}
.keyline-block {
border-top: 1px solid $border-colour;
padding-top: $gutter-half;
}
.spark-bar {
@include core-16;
box-sizing: border-box;
display: block;
width: 100%;
margin-bottom: $gutter-half;
height: $gutter-half;
color: $text-colour;
text-align: left;
span {
box-sizing: border-box;
display: inline-block;
overflow: visible;
background: $panel-colour;
color: $black;
padding: 5px 5px 2px 5px;
text-indent: -2px;
margin: 3px 0 5px 0;
transition: width 0.6s ease-in-out;
}
&-label {
@include bold-19;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: $govuk-blue;
max-width: 100%;
background: $white;
}
}
.file-list {
&-filename {
@include bold-19;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&-hint {
@include core-16;
display: block;
color: $secondary-text-colour;
}
}
.failure-highlight {
@include bold-19;
color: $error-colour;
}
.template-usage-table {
border-top: 1px solid $border-colour;
border-bottom: 1px solid $border-colour;
margin-top: 10px;
margin-bottom: $gutter * 1.3333;
.table {
margin-bottom: 5px;
}
}
.align-with-message-body {
margin-top: $gutter * 5 / 6;
}