darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-04 16:28:25 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
8769a8e242e28cd86afbbefb71fc62bc8b1ec26b
notifications-admin/app/assets/stylesheets/views/dashboard.scss

100 lines
1.5 KiB
SCSS
Raw Normal View History

Add usage to the dashboard Takes the number of emails and SMS fragments sent from: https://github.com/alphagov/notifications-api/pull/273 Using these numbers it’s possible to show: - how much of your allowance is left - or how much you have spent For now the allowance and rates are hard coded. Only for users that have manage service.
2016-04-20 15:37:17 +01:00
.dashboard {
Put uploaded files on the dashboard This commit depends on and uses the data returned by: - [x] https://github.com/alphagov/notifications-api/pull/345 - [x] https://github.com/alphagov/notifications-api/pull/347 - [x] https://github.com/alphagov/notifications-admin/pull/612 It puts the last 5 jobs on the dashboard. This should be changed to all the jobs from the last 7 days when that parameter is available. It also: - links to the jobs page - makes the numbers on the jobs page consistent with the dashboard - makes the numbers on an individual job consistent with the appearance of the dashboard
2016-05-25 13:36:35 +01:00
table {
th {
Give headline numbers a blue, not black background 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.
2016-06-08 15:41:02 +01:00
@include core-19;
Give each row in a table a heading The first columns of our tables are always headings for the subsequent columns, even though they go horizontally. HTML has the `<th>` tag, which doesn’t just have to be used for headings along the top of a table. So this commit changes the first column to be a `<th>`. This then allows us to style these elements differently, specifically making them 50% wide. This makes pages like the dashboard align more nicely.
2016-06-08 13:41:02 +01:00
border-bottom: 0;
Put uploaded files on the dashboard This commit depends on and uses the data returned by: - [x] https://github.com/alphagov/notifications-api/pull/345 - [x] https://github.com/alphagov/notifications-api/pull/347 - [x] https://github.com/alphagov/notifications-admin/pull/612 It puts the last 5 jobs on the dashboard. This should be changed to all the jobs from the last 7 days when that parameter is available. It also: - links to the jobs page - makes the numbers on the jobs page consistent with the dashboard - makes the numbers on an individual job consistent with the appearance of the dashboard
2016-05-25 13:36:35 +01:00
}
td {
@include core-19;
border: 0;
}
Add usage to the dashboard Takes the number of emails and SMS fragments sent from: https://github.com/alphagov/notifications-api/pull/273 Using these numbers it’s possible to show: - how much of your allowance is left - or how much you have spent For now the allowance and rates are hard coded. Only for users that have manage service.
2016-04-20 15:37:17 +01:00
}
Move switch service out of black header Also following the pattern work that Tim and Stephen have done.
2016-11-18 11:18:29 +00:00
Fix heading spacing on dashboard with 0 templates
2016-11-18 15:50:56 +00:00
> .heading-medium:first-of-type {
Move switch service out of black header Also following the pattern work that Tim and Stephen have done.
2016-11-18 11:18:29 +00:00
margin-top: 10px;
}
Add usage to the dashboard Takes the number of emails and SMS fragments sent from: https://github.com/alphagov/notifications-api/pull/273 Using these numbers it’s possible to show: - how much of your allowance is left - or how much you have spent For now the allowance and rates are hard coded. Only for users that have manage service.
2016-04-20 15:37:17 +01:00
}
.keyline-block {
border-top: 1px solid $border-colour;
padding-top: $gutter-half;
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’
2016-05-11 15:05:40 +01:00
}
.spark-bar {
Include template type in bar graph label It’s possible that users will have email and SMS templates with similar names, and will send them depending on their users’ contact preferences. So it’s useful to be able to compare how many emails vs SMS you’re sending, even if the template names are similar.
2016-05-12 21:31:47 +01:00
@include core-16;
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’
2016-05-11 15:05:40 +01:00
box-sizing: border-box;
display: block;
width: 100%;
margin-bottom: $gutter-half;
Include template type in bar graph label It’s possible that users will have email and SMS templates with similar names, and will send them depending on their users’ contact preferences. So it’s useful to be able to compare how many emails vs SMS you’re sending, even if the template names are similar.
2016-05-12 21:31:47 +01:00
height: $gutter-half;
Make template graphs look consistent with page The graphs of template usage feel a bit weird to me now. 1. They are counts of messages, but the numbers are very small not big like we do everywhere else (eg the counts on a job) 2. There’s a lot of blue, especially for something that you can’t click This commit makes the numbers bigger and the bar chart grey.
2016-06-07 16:35:03 +01:00
color: $text-colour;
Make template usage graph take up 100% of width The bars were sitting in a table cell with some right padding, so they never extended all the way to the right. Making it right-aligned removes this padding, then setting the text to left aligned keeps things looking the same.
2017-02-15 13:24:21 +00:00
text-align: left;
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’
2016-05-11 15:05:40 +01:00
span {
Include template type in bar graph label It’s possible that users will have email and SMS templates with similar names, and will send them depending on their users’ contact preferences. So it’s useful to be able to compare how many emails vs SMS you’re sending, even if the template names are similar.
2016-05-12 21:31:47 +01:00
box-sizing: border-box;
Make template graphs look consistent with page The graphs of template usage feel a bit weird to me now. 1. They are counts of messages, but the numbers are very small not big like we do everywhere else (eg the counts on a job) 2. There’s a lot of blue, especially for something that you can’t click This commit makes the numbers bigger and the bar chart grey.
2016-06-07 16:35:03 +01:00
display: inline-block;
overflow: visible;
background: $panel-colour;
color: $black;
padding: 5px 5px 2px 5px;
text-indent: -2px;
Include template type in bar graph label It’s possible that users will have email and SMS templates with similar names, and will send them depending on their users’ contact preferences. So it’s useful to be able to compare how many emails vs SMS you’re sending, even if the template names are similar.
2016-05-12 21:31:47 +01:00
margin: 3px 0 5px 0;
transition: width 0.6s ease-in-out;
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’
2016-05-11 15:05:40 +01:00
}
Add usage to the dashboard Takes the number of emails and SMS fragments sent from: https://github.com/alphagov/notifications-api/pull/273 Using these numbers it’s possible to show: - how much of your allowance is left - or how much you have spent For now the allowance and rates are hard coded. Only for users that have manage service.
2016-04-20 15:37:17 +01:00
}
Put uploaded files on the dashboard This commit depends on and uses the data returned by: - [x] https://github.com/alphagov/notifications-api/pull/345 - [x] https://github.com/alphagov/notifications-api/pull/347 - [x] https://github.com/alphagov/notifications-admin/pull/612 It puts the last 5 jobs on the dashboard. This should be changed to all the jobs from the last 7 days when that parameter is available. It also: - links to the jobs page - makes the numbers on the jobs page consistent with the dashboard - makes the numbers on an individual job consistent with the appearance of the dashboard
2016-05-25 13:36:35 +01:00
.file-list {
&-filename {
@include bold-19;
Truncate items that don’t fit in the first column The first column of a table is a heading, and will always be 50% wide. It makes the table harder to scan when the information in the first column breaks onto multiple lines, and introduces uneven whitespace in the table. This commit adds some CSS to force things in the first column to only ever be one line. If they are too long to fit, they get truncated with an ellipsis (`…`)
2016-06-09 11:05:54 +01:00
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Revert "Merge pull request #1336 from alphagov/revert-show-notifications" This reverts commit 7e354ff341172041d6141b50833af6262308fcb4, reversing changes made to 6f3bcff32fbfc78b4df0558d08605a260786112f.
2017-06-24 17:12:45 +01:00
padding-bottom: 30px;
padding-top: 10px;
margin-bottom: -30px;
margin-top: -10px;
Put uploaded files on the dashboard This commit depends on and uses the data returned by: - [x] https://github.com/alphagov/notifications-api/pull/345 - [x] https://github.com/alphagov/notifications-api/pull/347 - [x] https://github.com/alphagov/notifications-admin/pull/612 It puts the last 5 jobs on the dashboard. This should be changed to all the jobs from the last 7 days when that parameter is available. It also: - links to the jobs page - makes the numbers on the jobs page consistent with the dashboard - makes the numbers on an individual job consistent with the appearance of the dashboard
2016-05-25 13:36:35 +01:00
}
&-hint {
@include core-16;
display: block;
color: $secondary-text-colour;
Revert "Merge pull request #1336 from alphagov/revert-show-notifications" This reverts commit 7e354ff341172041d6141b50833af6262308fcb4, reversing changes made to 6f3bcff32fbfc78b4df0558d08605a260786112f.
2017-06-24 17:12:45 +01:00
pointer-events: none;
Truncate inbound message content Inbound text messages can run over multiple lines. This makes the page harder to scan. Your phone, and the outbound messages page, only show the first line of the text message, and truncate the rest with an ellipsis. This commit does the same for inbound text messages. It also stops the timestamp for the inbound messages being squashed and wrapping over multiple lines, which looks messy. We couldn’t do this before, because it would have stopped people from being able to copy/paste the full message content from this page.
2017-10-17 12:00:51 +01:00
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 580px;
Put uploaded files on the dashboard This commit depends on and uses the data returned by: - [x] https://github.com/alphagov/notifications-api/pull/345 - [x] https://github.com/alphagov/notifications-api/pull/347 - [x] https://github.com/alphagov/notifications-admin/pull/612 It puts the last 5 jobs on the dashboard. This should be changed to all the jobs from the last 7 days when that parameter is available. It also: - links to the jobs page - makes the numbers on the jobs page consistent with the dashboard - makes the numbers on an individual job consistent with the appearance of the dashboard
2016-05-25 13:36:35 +01:00
}
}
Break down usage by month, filter by year The previous, weekly activity breakdown was what we reckoned might be useful. But now that we have people using the platform it feels like aggregating a service’s usage by month is: - matches the timeframe users report on within their organisation - is consistent with the usage page And like the usage page this commit also limits the page to only show one financial year’s worth of data at once (rather than data for all time). This commit also makes some changes to the jobs view code so that our aggregation of failure states is consistent between the dashboard pages and the jobs pages.
2017-01-30 17:27:09 +00:00
.failure-highlight {
@include bold-19;
color: $error-colour;
}
Show template usage broken down by month This follows on from: - https://github.com/alphagov/notifications-admin/pull/1094 - https://github.com/alphagov/notifications-admin/pull/1109 It depends on: - [ ] https://github.com/alphagov/notifications-api/pull/829 A year is too long. Month-by-month is a better timeframe for making decisions or seeing patterns in your usage.
2017-02-16 15:08:16 +00:00
.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;
}
}
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-05-22 17:02:03 +01:00
.align-with-message-body {
Revert "Merge pull request #1336 from alphagov/revert-show-notifications" This reverts commit 7e354ff341172041d6141b50833af6262308fcb4, reversing changes made to 6f3bcff32fbfc78b4df0558d08605a260786112f.
2017-06-24 17:12:45 +01:00
display: block;
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-05-22 17:02:03 +01:00
margin-top: $gutter * 5 / 6;
}
Reference in New Issue Copy Permalink