darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-05 06:08:24 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
82eaf4e40cec6dce690e7d7edae73d164efab80b
notifications-admin/app/assets/stylesheets/components/area-list.scss

157 lines
2.8 KiB
SCSS
Raw Normal View History

Style the area labels and polygons Gives them some colours, borders and stuff to make them visually consistent with the rest of Notify. The idea is the tags and polygons have a similar affordances (i.e. border thickness, colour) to visually link them and imply that they are two representations of the same thing.
2020-07-06 10:53:15 +01:00
.area-list {
Style ‘likely’ area with a dashed line We’ve had some feedback that relying only on luminosity and position to differentiate between the ‘will get alert’ and ‘likely to get alert’ areas on the map might not be enough. We don’t want to introduce another colour because: - it will make the map look very busy - not many other colours contrast with the map tiles as well as blue - relying on colour only to communicate information is also bad for accessibility Instead we can make one of the lines a different style. I’ve gone for dashed on the ‘likely’ line because it looks nice, and gives some suggestion of a porous boundary. Implementing this means using CSS border image, because a `dashed` border (which we still have as a fallback) doesn’t render with consistent dash sizes from browser to browser. We need consistency to match the dashes that the map will be drawing (which use SVG not CSS so don’t have the same problem).
2020-09-24 15:52:38 +01:00
display: inline;
Add a key to the map To help people understand that broadcasting is not a precise technology, we have shown the estimate bleed area on the map. Because people aren’t familiar with the technology a visual only clue is not enough. So this commit adds a key to the map, which explains what the different outlines mean. It also removes the sticky footer from this page to: - make the key visible on the page - make people scroll and review the map before they get to the big green button - not reduce the size of the map any further
2020-08-26 10:43:55 +01:00
Style the area labels and polygons Gives them some colours, borders and stuff to make them visually consistent with the rest of Notify. The idea is the tags and polygons have a similar affordances (i.e. border thickness, colour) to visually link them and imply that they are two representations of the same thing.
2020-07-06 10:53:15 +01:00
&-item {
display: inline-block;
border: 2px solid $black;
padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 35px) govuk-spacing(1) govuk-spacing(2);
margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
position: relative;
&-remove {
font-size: 0;
&:before {
content: "×";
display: block;
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
width: 35px;
background: $govuk-blue;
color: $white;
box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
border: 2px solid $govuk-blue;
border-left: none;
font-size: 24px;
font-weight: normal;
line-height: 40px;
text-align: center;
text-decoration: none;
}
&:hover,
&:focus {
&:before {
color: $light-blue-25;
}
}
&:focus {
outline: none;
&:before {
Use new focus colour for remove area button It already adds a black border on focus so doesn’t need the thick lower border.
2020-09-17 12:46:45 +01:00
background: $govuk-focus-colour;
Style the area labels and polygons Gives them some colours, borders and stuff to make them visually consistent with the rest of Notify. The idea is the tags and polygons have a similar affordances (i.e. border thickness, colour) to visually link them and imply that they are two representations of the same thing.
2020-07-06 10:53:15 +01:00
color: $black;
border-color: $black;
}
}
}
Fix spacing between button and selected areas Adding left margin to the button meant that when it wrapped onto a new line it didn’t align flush with the left edge of its containing column. Instead we can: - move the link outside the list (which is better semantically anyway) - then add the margin to the last item of the list (which is now the last selected area, not the link)
2020-08-18 09:51:52 +01:00
&:last-child {
margin-right: govuk-spacing(1) * 1.5;
}
Add style for areas once selected Just having them in the boxes with the 2px black border made them look too much like textboxes.
2020-07-08 17:41:20 +01:00
&--unremoveable {
padding-right: govuk-spacing(2);
background: $light-blue-25;
Make selected areas more tag-like I’ve never liked the style of the selected areas on the preview of a broadcast message. They were a compromise, taking what’s on the map page and giving it a shaded background so it looks less like a text box. The trouble is all these stroked elements jumbled together made the page look very busy. I think it can be a bit calmer if they look more like the ‘tag’ component[1] from the Design System, which only uses shading. Going for black text not blue, because it’s one less piece of visual differentiation – again, trying to keep the busyness level down. 1. https://design-system.service.gov.uk/components/tag/
2020-10-02 14:15:40 +01:00
color: mix($black, $govuk-blue, 66%);
border-color: $light-blue-25;
margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
font-weight: bold;
Add style for areas once selected Just having them in the boxes with the 2px black border made them look too much like textboxes.
2020-07-08 17:41:20 +01:00
}
Make list of areas on dashboard use full width When the list of areas is restricted to half the width of the page it starts to look pretty higgledy-piggledy when you have lots of areas or areas with very long names. To do this I’ve ripped out the table markup in favour of headings, paragraphs and lists. Probably pros and cons for each, but it was really hard to do the layout with the content in a table.
2020-10-27 15:16:27 +00:00
&--smaller {
@include bold-16;
}
Style the area labels and polygons Gives them some colours, borders and stuff to make them visually consistent with the rest of Notify. The idea is the tags and polygons have a similar affordances (i.e. border thickness, colour) to visually link them and imply that they are two representations of the same thing.
2020-07-06 10:53:15 +01:00
}
.govuk-button {
margin-left: 3px;
}
}
Add a key to the map To help people understand that broadcasting is not a precise technology, we have shown the estimate bleed area on the map. Because people aren’t familiar with the technology a visual only clue is not enough. So this commit adds a key to the map, which explains what the different outlines mean. It also removes the sticky footer from this page to: - make the key visible on the page - make people scroll and review the map before they get to the big green button - not reduce the size of the map any further
2020-08-26 10:43:55 +01:00
Rename CSS classes for consistency This prefixes everything to do with areas/the map with `area-list`, so from looking at one element you know which `.scss` file will contain the relevant code.
2020-10-05 13:47:21 +01:00
#area-list-map {
Add a key to the map To help people understand that broadcasting is not a precise technology, we have shown the estimate bleed area on the map. Because people aren’t familiar with the technology a visual only clue is not enough. So this commit adds a key to the map, which explains what the different outlines mean. It also removes the sticky footer from this page to: - make the key visible on the page - make people scroll and review the map before they get to the big green button - not reduce the size of the map any further
2020-08-26 10:43:55 +01:00
z-index: 50;
margin-bottom: govuk-spacing(4);
}
Rename CSS classes for consistency This prefixes everything to do with areas/the map with `area-list`, so from looking at one element you know which `.scss` file will contain the relevant code.
2020-10-05 13:47:21 +01:00
.area-list-key {
Add a key to the map To help people understand that broadcasting is not a precise technology, we have shown the estimate bleed area on the map. Because people aren’t familiar with the technology a visual only clue is not enough. So this commit adds a key to the map, which explains what the different outlines mean. It also removes the sticky footer from this page to: - make the key visible on the page - make people scroll and review the map before they get to the big green button - not reduce the size of the map any further
2020-08-26 10:43:55 +01:00
display: inline-block;
position: relative;
margin-right: govuk-spacing(3);
Adjust spacing and border on details map We hide the map inside a details element. Because the map has such a strong shape I don’t think it needs the grey border to contain it. This commit removes the border, and adjusts the spacing to group things by proximity alone. By removing the border and associated gutter we can give more space to the map, and make the page look less busy.
2020-10-02 14:51:57 +01:00
margin-bottom: govuk-spacing(4);
Add a key to the map To help people understand that broadcasting is not a precise technology, we have shown the estimate bleed area on the map. Because people aren’t familiar with the technology a visual only clue is not enough. So this commit adds a key to the map, which explains what the different outlines mean. It also removes the sticky footer from this page to: - make the key visible on the page - make people scroll and review the map before they get to the big green button - not reduce the size of the map any further
2020-08-26 10:43:55 +01:00
height: govuk-spacing(7);
padding-left: govuk-spacing(8);
line-height: govuk-spacing(7);
&:before {
content: "";
display: block;
position: absolute;
Tweak position of key icons to align with text
2020-09-25 09:49:27 +01:00
top: 3px;
Rotate the map key icons We’ve had some feedback that the map key icons look a bit like checkboxes, and that this might have confused a user during the research. So we need a way of making them look different to checkboxes. We don’t want to change the border thickness because it matches what’s on the map. A different approach is changing the shape. Shapes that might still be confusing: - circles (look like radio buttons) - triangles (look like a warning) So this commit changes the shape to a diamond, which is easy to acheive by rotating the square 45 degrees.
2020-09-24 12:30:19 +01:00
left: govuk-spacing(1);
width: govuk-spacing(6);
height: govuk-spacing(6);
Add a key to the map To help people understand that broadcasting is not a precise technology, we have shown the estimate bleed area on the map. Because people aren’t familiar with the technology a visual only clue is not enough. So this commit adds a key to the map, which explains what the different outlines mean. It also removes the sticky footer from this page to: - make the key visible on the page - make people scroll and review the map before they get to the big green button - not reduce the size of the map any further
2020-08-26 10:43:55 +01:00
box-sizing: border-box;
margin-right: govuk-spacing(1);
Rotate the map key icons We’ve had some feedback that the map key icons look a bit like checkboxes, and that this might have confused a user during the research. So we need a way of making them look different to checkboxes. We don’t want to change the border thickness because it matches what’s on the map. A different approach is changing the shape. Shapes that might still be confusing: - circles (look like radio buttons) - triangles (look like a warning) So this commit changes the shape to a diamond, which is easy to acheive by rotating the square 45 degrees.
2020-09-24 12:30:19 +01:00
transform: rotate(45deg);
Add a key to the map To help people understand that broadcasting is not a precise technology, we have shown the estimate bleed area on the map. Because people aren’t familiar with the technology a visual only clue is not enough. So this commit adds a key to the map, which explains what the different outlines mean. It also removes the sticky footer from this page to: - make the key visible on the page - make people scroll and review the map before they get to the big green button - not reduce the size of the map any further
2020-08-26 10:43:55 +01:00
}
&--certain {
&:before {
Style ‘likely’ area with a dashed line We’ve had some feedback that relying only on luminosity and position to differentiate between the ‘will get alert’ and ‘likely to get alert’ areas on the map might not be enough. We don’t want to introduce another colour because: - it will make the map look very busy - not many other colours contrast with the map tiles as well as blue - relying on colour only to communicate information is also bad for accessibility Instead we can make one of the lines a different style. I’ve gone for dashed on the ‘likely’ line because it looks nice, and gives some suggestion of a porous boundary. Implementing this means using CSS border image, because a `dashed` border (which we still have as a fallback) doesn’t render with consistent dash sizes from browser to browser. We need consistency to match the dashes that the map will be drawing (which use SVG not CSS so don’t have the same problem).
2020-09-24 15:52:38 +01:00
border: 2px solid $black;
background: $light-blue-50;
Add a key to the map To help people understand that broadcasting is not a precise technology, we have shown the estimate bleed area on the map. Because people aren’t familiar with the technology a visual only clue is not enough. So this commit adds a key to the map, which explains what the different outlines mean. It also removes the sticky footer from this page to: - make the key visible on the page - make people scroll and review the map before they get to the big green button - not reduce the size of the map any further
2020-08-26 10:43:55 +01:00
}
}
&--likely {
&:before {
padding: 1px;
Style ‘likely’ area with a dashed line We’ve had some feedback that relying only on luminosity and position to differentiate between the ‘will get alert’ and ‘likely to get alert’ areas on the map might not be enough. We don’t want to introduce another colour because: - it will make the map look very busy - not many other colours contrast with the map tiles as well as blue - relying on colour only to communicate information is also bad for accessibility Instead we can make one of the lines a different style. I’ve gone for dashed on the ‘likely’ line because it looks nice, and gives some suggestion of a porous boundary. Implementing this means using CSS border image, because a `dashed` border (which we still have as a fallback) doesn’t render with consistent dash sizes from browser to browser. We need consistency to match the dashes that the map will be drawing (which use SVG not CSS so don’t have the same problem).
2020-09-24 15:52:38 +01:00
border: 2px dashed $govuk-blue;
border-image: file-url('dashed-border-govuk-blue.svg') 4 round;
background: $light-blue-25;
}
}
&--phone-estimate {
padding-left: govuk-spacing(1);
margin-right: 0;
float: right;
&:before {
display: none;
Add a key to the map To help people understand that broadcasting is not a precise technology, we have shown the estimate bleed area on the map. Because people aren’t familiar with the technology a visual only clue is not enough. So this commit adds a key to the map, which explains what the different outlines mean. It also removes the sticky footer from this page to: - make the key visible on the page - make people scroll and review the map before they get to the big green button - not reduce the size of the map any further
2020-08-26 10:43:55 +01:00
}
}
}
Adjust spacing and border on details map We hide the map inside a details element. Because the map has such a strong shape I don’t think it needs the grey border to contain it. This commit removes the border, and adjusts the spacing to group things by proximity alone. By removing the border and associated gutter we can give more space to the map, and make the page look less busy.
2020-10-02 14:51:57 +01:00
Rename CSS classes for consistency This prefixes everything to do with areas/the map with `area-list`, so from looking at one element you know which `.scss` file will contain the relevant code.
2020-10-05 13:47:21 +01:00
.area-list-map-details {
Adjust spacing and border on details map We hide the map inside a details element. Because the map has such a strong shape I don’t think it needs the grey border to contain it. This commit removes the border, and adjusts the spacing to group things by proximity alone. By removing the border and associated gutter we can give more space to the map, and make the page look less busy.
2020-10-02 14:51:57 +01:00
.govuk-details__summary {
display: block;
padding-top: govuk-spacing(1);
padding-bottom: govuk-spacing(1);
margin-top: 1px;
}
.govuk-details__text {
padding: 0;
border: none;
border-bottom: 1px solid $border-colour;
margin-top: -1px;
}
Rename CSS classes for consistency This prefixes everything to do with areas/the map with `area-list`, so from looking at one element you know which `.scss` file will contain the relevant code.
2020-10-05 13:47:21 +01:00
Adjust spacing and border on details map We hide the map inside a details element. Because the map has such a strong shape I don’t think it needs the grey border to contain it. This commit removes the border, and adjusts the spacing to group things by proximity alone. By removing the border and associated gutter we can give more space to the map, and make the page look less busy.
2020-10-02 14:51:57 +01:00
}
Reference in New Issue Copy Permalink