darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-15 07:18:58 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
4d0da6594de60fcf37dc7796279462e32072d7a1
notifications-admin/app/assets/stylesheets/views/history.scss

96 lines
1.6 KiB
SCSS
Raw Normal View History

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
$item-top-padding: govuk-spacing(3);
Chunk events by day Scanning the page is difficult at the moment because it’s hard to tell how far apart in time events are, and thereby determine which events might be related. Grouping the events by day quickly lets users narrow their focus to a meaningful subset of the events.
2019-10-18 16:43:52 +01:00
.history-list {
@include core-19;
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(6);
Chunk events by day Scanning the page is difficult at the moment because it’s hard to tell how far apart in time events are, and thereby determine which events might be related. Grouping the events by day quickly lets users narrow their focus to a meaningful subset of the events.
2019-10-18 16:43:52 +01:00
&-item {
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: $item-top-padding 0 govuk-spacing(3) 0;
Chunk events by day Scanning the page is difficult at the moment because it’s hard to tell how far apart in time events are, and thereby determine which events might be related. Grouping the events by day quickly lets users narrow their focus to a meaningful subset of the events.
2019-10-18 16:43:52 +01:00
border-top: 1px solid $border-colour;
position: relative;
&:last-child {
border-bottom: 1px solid $border-colour;
}
Add a form to set priority of top 2 providers Their priority should always add up to 100%. Currently we have to ensure this by hand. Adding this form means there’s no way to not set their combined priorities to 100%. And it’s a bit more of an intuitive UI than two textboxes on separate pages.
2019-12-02 18:15:00 +00:00
.page-footer {
margin-bottom: 5px;
}
Chunk events by day Scanning the page is difficult at the moment because it’s hard to tell how far apart in time events are, and thereby determine which events might be related. Grouping the events by day quickly lets users narrow their focus to a meaningful subset of the events.
2019-10-18 16:43:52 +01:00
}
&-user {
display: block;
}
&-time {
display: block;
color: $secondary-text-colour;
}
Add page showing priority of two SMS providers It’s not very useful to know the priority of one provider without knowing the other. And these pages were never really designed, so they weren’t super easy to understand anyway. This commit adds a page that takes the first two text message providers and shows their relative priority against each other. It follows the design of the events page, as a pattern for showing a log of historical events.
2019-12-02 14:29:34 +00:00
&-percentage {
$axis-thickness: 2px;
border-bottom: $axis-thickness solid $black;
position: relative;
Add a form to set priority of top 2 providers Their priority should always add up to 100%. Currently we have to ensure this by hand. Adding this form means there’s no way to not set their combined priorities to 100%. And it’s a bit more of an intuitive UI than two textboxes on separate pages.
2019-12-02 18:15:00 +00:00
margin-bottom: 35px;
Add page showing priority of two SMS providers It’s not very useful to know the priority of one provider without knowing the other. And these pages were never really designed, so they weren’t super easy to understand anyway. This commit adds a page that takes the first two text message providers and shows their relative priority against each other. It follows the design of the events page, as a pattern for showing a log of historical events.
2019-12-02 14:29:34 +00:00
height: 35px;
&:before,
&:after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
height: 10px;
width: $axis-thickness;
background: $black;
}
&:after {
left: auto;
right: 0;
}
Add a form to set priority of top 2 providers Their priority should always add up to 100%. Currently we have to ensure this by hand. Adding this form means there’s no way to not set their combined priorities to 100%. And it’s a bit more of an intuitive UI than two textboxes on separate pages.
2019-12-02 18:15:00 +00:00
&-without-border {
position: relative;
padding-top: 35px;
}
Add page showing priority of two SMS providers It’s not very useful to know the priority of one provider without knowing the other. And these pages were never really designed, so they weren’t super easy to understand anyway. This commit adds a page that takes the first two text message providers and shows their relative priority against each other. It follows the design of the events page, as a pattern for showing a log of historical events.
2019-12-02 14:29:34 +00:00
&-marker {
$size: 20px;
$border-thickness: 7px;
$text-width: 100px;
display: block;
width: $size;
height: $size;
position: absolute;
top: 35px - ($size / 2) - ($border-thickness - ($axis-thickness / 2));
margin-left: 0 - ($size / 2) - $border-thickness;
background: $black;
border-radius: $size;
border: $border-thickness solid $white;
}
&-left-label,
&-right-label {
width: 100%;
position: absolute;
top: 0;
}
&-left-label {
left: 0;
}
&-right-label {
right: 0;
text-align: right;
}
}
Chunk events by day Scanning the page is difficult at the moment because it’s hard to tell how far apart in time events are, and thereby determine which events might be related. Grouping the events by day quickly lets users narrow their focus to a meaningful subset of the events.
2019-10-18 16:43:52 +01:00
}
Reference in New Issue Copy Permalink