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

131 lines
2.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
Revert "Revert "Restyle template statistics and received text messages""
2020-02-18 16:16:51 +00:00
th {
font-weight: normal;
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 {
Replace $gutter with govuk-spacing function Replaced `$gutter` and similar variables such as `$gutter-half` with the `govuk-spacing()` static spacing function. This uses `govuk-spacing()` instead of `$govuk-gutter` because `$govuk-gutter` should only be used for the gaps in between grid columns and we were mostly using `$gutter` to add more space around elements. There are other places in the SCSS files where we had hardcoded a measurement in px which could be replaced with `govuk-spacing`, but this commit only replaces the existing uses of `$gutter`.
2020-02-21 13:21:44 +00:00
margin-top: govuk-spacing(3);
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
}
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;
Replace $gutter with govuk-spacing function Replaced `$gutter` and similar variables such as `$gutter-half` with the `govuk-spacing()` static spacing function. This uses `govuk-spacing()` instead of `$govuk-gutter` because `$govuk-gutter` should only be used for the gaps in between grid columns and we were mostly using `$gutter` to add more space around elements. There are other places in the SCSS files where we had hardcoded a measurement in px which could be replaced with `govuk-spacing`, but this commit only replaces the existing uses of `$gutter`.
2020-02-21 13:21:44 +00:00
padding-top: govuk-spacing(3);
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%;
Replace $gutter with govuk-spacing function Replaced `$gutter` and similar variables such as `$gutter-half` with the `govuk-spacing()` static spacing function. This uses `govuk-spacing()` instead of `$govuk-gutter` because `$govuk-gutter` should only be used for the gaps in between grid columns and we were mostly using `$gutter` to add more space around elements. There are other places in the SCSS files where we had hardcoded a measurement in px which could be replaced with `govuk-spacing`, but this commit only replaces the existing uses of `$gutter`.
2020-02-21 13:21:44 +00:00
margin-bottom: govuk-spacing(3);
height: govuk-spacing(3);
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
Revert "Revert "Restyle template statistics and received text messages""
2020-02-18 16:16:51 +00:00
&-bar {
Use tabular figures for template statistics We use tabular (not lining) figures everywhere else that we display counts, so that they don’t shift around as the AJAX updates the numbers. There’s a good explanation of the difference here: https://www.fonts.com/content/learning/fontology/level-3/numbers/proportional-vs-tabular-figures
2020-03-27 09:30:28 +00:00
@include bold-27($tabular-numbers: true);
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;
Revert "Revert "Restyle template statistics and received text messages""
2020-02-18 16:16:51 +00:00
padding: 10px 6px 8px 0;
text-indent: 12px;
text-align: right;
margin: 2px 0 1px 0;
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
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
}
Differentiate between different kinds of uploads Knowing what kind of upload a thing is is useful. And the information that is useful to show about each upload depends on what kind of upload it is.
2020-02-27 14:03:03 +00:00
&-filename-large {
@include bold-24;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 30px;
padding-top: 10px;
margin-bottom: -30px;
margin-top: -10px;
}
Add a page for each report It’s useful to get some kind of preview of the report before you download it. And if there’s only a few letters in there then you might not even need to download it at all. For teams with lots of letters we don’t want the page to load too slowly so let’s cap the number of displayed items to 50, same as previewing a spreadsheet.
2019-12-31 13:27:27 +00:00
&-filename-unlinked {
@include core-19;
}
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
}
Harmonise the typography when listing uploads 24px with 19px is what we use on the uploads page. On notifications page we use 19px with 16px. There’s some loose idea that the bigger size is for items that contain other items. This also increases the line height for recipients of PDF letters to make things line up.
2020-03-16 14:14:29 +00:00
&-hint-large {
@include core-19;
display: block;
color: $secondary-text-colour;
pointer-events: none;
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
Fix links to files in dashboard table Includes fixes for the grey text they overlap, when the adjacent link is focused.
2020-09-15 11:01:32 +01:00
/* The focus state for sibling links overlaps the hint so the hint's text colour needs to adapt */
.govuk-link:focus {
&.file-list-filename,
&.file-list-filename-large,
& + .file-list-hint,
& + .file-list-hint-large {
/* link needs non-static position to overlap the cell border, hint so it isn't overlapped itself */
position: relative;
}
&.file-list-filename,
&.file-list-filename-large {
/* override box-shadow to push underline down a bit */
box-shadow: 0 -2px $govuk-focus-colour, 0 5px $govuk-focus-text-colour;
}
& + .file-list-hint,
& + .file-list-hint-large {
color: $govuk-focus-text-colour;
}
}
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
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;
Replace $gutter with govuk-spacing function Replaced `$gutter` and similar variables such as `$gutter-half` with the `govuk-spacing()` static spacing function. This uses `govuk-spacing()` instead of `$govuk-gutter` because `$govuk-gutter` should only be used for the gaps in between grid columns and we were mostly using `$gutter` to add more space around elements. There are other places in the SCSS files where we had hardcoded a measurement in px which could be replaced with `govuk-spacing`, but this commit only replaces the existing uses of `$gutter`.
2020-02-21 13:21:44 +00:00
margin-top: govuk-spacing(5);
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
}
Reference in New Issue Copy Permalink