darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-05 15:48:25 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
2312aeef676b0569bc8fee022bc89cb01c10ebc8
notifications-admin/app/assets/stylesheets/components/area-list.scss

190 lines
4.3 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;
Replace 'x' psuedo element with SVG The current link button for removing an area is created using a psuedo element with an 'x' as content. The inline box for the 'x' overlapped its parent. This is visible in high contrast mode, breaking the parent's border. Despite existing in CSS, the 'x' is also announced by screen readers, which is not what we want. This changes it to be an inline SVG with a role of image. It doesn't require as large an inline box so doesn't cause visual issues in high contrast modes. It also means we can set it's label similar to how you would an image's alt text, giving us control over what is announced by screen readers. This commit also includes some extra CSS, targeting high contrast modes, giving the link button the following when viewed in those modes: - a complete border so it is distinguishable from the list item - a focus style
2021-10-21 13:26:40 +01:00
// Create space for the remove link on the right of the list item (including borders)
Tweak spacing, size and hover state when focused The size and position of the 'X' has deviated a bit from the design intentions of the original. The original shared the x-height of the area text and has positioned to be vertically and horizontally centered. These changes assume an x-height of 11px and use flexbox to center the new 'X' horizontally and vertically. This also tweaks the visual state when focused and then hovered so matches other buttons without breaking the design.
2021-10-25 15:50:07 +01:00
padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 37px) govuk-spacing(1) govuk-spacing(2);
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
margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
position: relative;
&-remove {
Tweak spacing, size and hover state when focused The size and position of the 'X' has deviated a bit from the design intentions of the original. The original shared the x-height of the area text and has positioned to be vertically and horizontally centered. These changes assume an x-height of 11px and use flexbox to center the new 'X' horizontally and vertically. This also tweaks the visual state when focused and then hovered so matches other buttons without breaking the design.
2021-10-25 15:50:07 +01:00
display: block; // fallback for browsers that don't support flexbox
display: flex;
// center SVG vertically and horizontally
align-items: center;
justify-content: center;
Replace 'x' psuedo element with SVG The current link button for removing an area is created using a psuedo element with an 'x' as content. The inline box for the 'x' overlapped its parent. This is visible in high contrast mode, breaking the parent's border. Despite existing in CSS, the 'x' is also announced by screen readers, which is not what we want. This changes it to be an inline SVG with a role of image. It doesn't require as large an inline box so doesn't cause visual issues in high contrast modes. It also means we can set it's label similar to how you would an image's alt text, giving us control over what is announced by screen readers. This commit also includes some extra CSS, targeting high contrast modes, giving the link button the following when viewed in those modes: - a complete border so it is distinguishable from the list item - a focus style
2021-10-21 13:26:40 +01:00
position: absolute;
top: -2px; // cover list-item border-top
right: -2px; // cover list-item border-right
bottom: -2px; // cover list-item border-bottom
Tweak spacing, size and hover state when focused The size and position of the 'X' has deviated a bit from the design intentions of the original. The original shared the x-height of the area text and has positioned to be vertically and horizontally centered. These changes assume an x-height of 11px and use flexbox to center the new 'X' horizontally and vertically. This also tweaks the visual state when focused and then hovered so matches other buttons without breaking the design.
2021-10-25 15:50:07 +01:00
width: 37px;
padding: 0;
Replace 'x' psuedo element with SVG The current link button for removing an area is created using a psuedo element with an 'x' as content. The inline box for the 'x' overlapped its parent. This is visible in high contrast mode, breaking the parent's border. Despite existing in CSS, the 'x' is also announced by screen readers, which is not what we want. This changes it to be an inline SVG with a role of image. It doesn't require as large an inline box so doesn't cause visual issues in high contrast modes. It also means we can set it's label similar to how you would an image's alt text, giving us control over what is announced by screen readers. This commit also includes some extra CSS, targeting high contrast modes, giving the link button the following when viewed in those modes: - a complete border so it is distinguishable from the list item - a focus style
2021-10-21 13:26:40 +01:00
border: 2px solid $govuk-blue;
border-left: none;
text-align: center;
Make remove ('x') links buttons The text never had underlines like our other link-button components so always looked like buttons. If they look like buttons, they should act like them too and have those semantics. This give them a role of button and uses the class and data attribute for the button component from GOVUK Frontend to make them work like one. These changes include a fair amount of styles to override those the govuk-button class brings in. I've tried to mark those ones to at least make that obvious.
2021-10-22 11:54:41 +01:00
font-size: inherit; // counter govuk-button styles
Tweak spacing, size and hover state when focused The size and position of the 'X' has deviated a bit from the design intentions of the original. The original shared the x-height of the area text and has positioned to be vertically and horizontally centered. These changes assume an x-height of 11px and use flexbox to center the new 'X' horizontally and vertically. This also tweaks the visual state when focused and then hovered so matches other buttons without breaking the design.
2021-10-25 15:50:07 +01:00
line-height: 36px; // match area-list-item for browsers that don't support flexbox
Replace 'x' psuedo element with SVG The current link button for removing an area is created using a psuedo element with an 'x' as content. The inline box for the 'x' overlapped its parent. This is visible in high contrast mode, breaking the parent's border. Despite existing in CSS, the 'x' is also announced by screen readers, which is not what we want. This changes it to be an inline SVG with a role of image. It doesn't require as large an inline box so doesn't cause visual issues in high contrast modes. It also means we can set it's label similar to how you would an image's alt text, giving us control over what is announced by screen readers. This commit also includes some extra CSS, targeting high contrast modes, giving the link button the following when viewed in those modes: - a complete border so it is distinguishable from the list item - a focus style
2021-10-21 13:26:40 +01:00
Make remove ('x') links buttons The text never had underlines like our other link-button components so always looked like buttons. If they look like buttons, they should act like them too and have those semantics. This give them a role of button and uses the class and data attribute for the button component from GOVUK Frontend to make them work like one. These changes include a fair amount of styles to override those the govuk-button class brings in. I've tried to mark those ones to at least make that obvious.
2021-10-22 11:54:41 +01:00
// set styles so they don't get overriden by govuk-button styles
&,
&:hover {
background: $govuk-blue;
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
}
Make remove ('x') links buttons The text never had underlines like our other link-button components so always looked like buttons. If they look like buttons, they should act like them too and have those semantics. This give them a role of button and uses the class and data attribute for the button component from GOVUK Frontend to make them work like one. These changes include a fair amount of styles to override those the govuk-button class brings in. I've tried to mark those ones to at least make that obvious.
2021-10-22 11:54:41 +01:00
&:hover {
Replace 'x' psuedo element with SVG The current link button for removing an area is created using a psuedo element with an 'x' as content. The inline box for the 'x' overlapped its parent. This is visible in high contrast mode, breaking the parent's border. Despite existing in CSS, the 'x' is also announced by screen readers, which is not what we want. This changes it to be an inline SVG with a role of image. It doesn't require as large an inline box so doesn't cause visual issues in high contrast modes. It also means we can set it's label similar to how you would an image's alt text, giving us control over what is announced by screen readers. This commit also includes some extra CSS, targeting high contrast modes, giving the link button the following when viewed in those modes: - a complete border so it is distinguishable from the list item - a focus style
2021-10-21 13:26:40 +01:00
color: $light-blue-25;
}
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
Stop 'remove' button depression when active Noticed by @quis in https://github.com/alphagov/notifications-admin/pull/4053#issuecomment-957702649 The 'top' position from the GOVUK Frontend button styles is overriding our 'top' position. This adds some extra CSS to repeat the 'top' position in the :active state.
2021-11-02 15:11:43 +00:00
// set styles so they don't get overriden by govuk-button styles
&:active {
top: -2px;
}
Make remove ('x') links buttons The text never had underlines like our other link-button components so always looked like buttons. If they look like buttons, they should act like them too and have those semantics. This give them a role of button and uses the class and data attribute for the button component from GOVUK Frontend to make them work like one. These changes include a fair amount of styles to override those the govuk-button class brings in. I've tried to mark those ones to at least make that obvious.
2021-10-22 11:54:41 +01:00
// The box-shadow that separates the remove link from the list item is hidden in
// high contrast mode. Remake using a border instead
// Also sets text colour to match govuk-button
Replace 'x' psuedo element with SVG The current link button for removing an area is created using a psuedo element with an 'x' as content. The inline box for the 'x' overlapped its parent. This is visible in high contrast mode, breaking the parent's border. Despite existing in CSS, the 'x' is also announced by screen readers, which is not what we want. This changes it to be an inline SVG with a role of image. It doesn't require as large an inline box so doesn't cause visual issues in high contrast modes. It also means we can set it's label similar to how you would an image's alt text, giving us control over what is announced by screen readers. This commit also includes some extra CSS, targeting high contrast modes, giving the link button the following when viewed in those modes: - a complete border so it is distinguishable from the list item - a focus style
2021-10-21 13:26:40 +01:00
@media (-ms-high-contrast: active), (forced-colors: active) {
Make remove ('x') links buttons The text never had underlines like our other link-button components so always looked like buttons. If they look like buttons, they should act like them too and have those semantics. This give them a role of button and uses the class and data attribute for the button component from GOVUK Frontend to make them work like one. These changes include a fair amount of styles to override those the govuk-button class brings in. I've tried to mark those ones to at least make that obvious.
2021-10-22 11:54:41 +01:00
&:link,
&:active,
Replace 'x' psuedo element with SVG The current link button for removing an area is created using a psuedo element with an 'x' as content. The inline box for the 'x' overlapped its parent. This is visible in high contrast mode, breaking the parent's border. Despite existing in CSS, the 'x' is also announced by screen readers, which is not what we want. This changes it to be an inline SVG with a role of image. It doesn't require as large an inline box so doesn't cause visual issues in high contrast modes. It also means we can set it's label similar to how you would an image's alt text, giving us control over what is announced by screen readers. This commit also includes some extra CSS, targeting high contrast modes, giving the link button the following when viewed in those modes: - a complete border so it is distinguishable from the list item - a focus style
2021-10-21 13:26:40 +01:00
&:hover,
Make remove ('x') links buttons The text never had underlines like our other link-button components so always looked like buttons. If they look like buttons, they should act like them too and have those semantics. This give them a role of button and uses the class and data attribute for the button component from GOVUK Frontend to make them work like one. These changes include a fair amount of styles to override those the govuk-button class brings in. I've tried to mark those ones to at least make that obvious.
2021-10-22 11:54:41 +01:00
&:focus:not(:active):not(:hover) {
border-left: 2px solid $govuk-blue;
color: LinkText;
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
}
Make remove ('x') links buttons The text never had underlines like our other link-button components so always looked like buttons. If they look like buttons, they should act like them too and have those semantics. This give them a role of button and uses the class and data attribute for the button component from GOVUK Frontend to make them work like one. These changes include a fair amount of styles to override those the govuk-button class brings in. I've tried to mark those ones to at least make that obvious.
2021-10-22 11:54:41 +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
}
Make remove ('x') links buttons The text never had underlines like our other link-button components so always looked like buttons. If they look like buttons, they should act like them too and have those semantics. This give them a role of button and uses the class and data attribute for the button component from GOVUK Frontend to make them work like one. These changes include a fair amount of styles to override those the govuk-button class brings in. I've tried to mark those ones to at least make that obvious.
2021-10-22 11:54:41 +01:00
// set styles so they don't get overriden by govuk-button styles
&,
Tweak spacing, size and hover state when focused The size and position of the 'X' has deviated a bit from the design intentions of the original. The original shared the x-height of the area text and has positioned to be vertically and horizontally centered. These changes assume an x-height of 11px and use flexbox to center the new 'X' horizontally and vertically. This also tweaks the visual state when focused and then hovered so matches other buttons without breaking the design.
2021-10-25 15:50:07 +01:00
&:focus,
Make remove ('x') links buttons The text never had underlines like our other link-button components so always looked like buttons. If they look like buttons, they should act like them too and have those semantics. This give them a role of button and uses the class and data attribute for the button component from GOVUK Frontend to make them work like one. These changes include a fair amount of styles to override those the govuk-button class brings in. I've tried to mark those ones to at least make that obvious.
2021-10-22 11:54:41 +01:00
&:focus:not(:active):not(:hover) {
box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
}
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
Make remove ('x') links buttons The text never had underlines like our other link-button components so always looked like buttons. If they look like buttons, they should act like them too and have those semantics. This give them a role of button and uses the class and data attribute for the button component from GOVUK Frontend to make them work like one. These changes include a fair amount of styles to override those the govuk-button class brings in. I've tried to mark those ones to at least make that obvious.
2021-10-22 11:54:41 +01:00
// set styles so they don't get overriden by govuk-button styles
Tweak spacing, size and hover state when focused The size and position of the 'X' has deviated a bit from the design intentions of the original. The original shared the x-height of the area text and has positioned to be vertically and horizontally centered. These changes assume an x-height of 11px and use flexbox to center the new 'X' horizontally and vertically. This also tweaks the visual state when focused and then hovered so matches other buttons without breaking the design.
2021-10-25 15:50:07 +01:00
&:focus,
Make remove ('x') links buttons The text never had underlines like our other link-button components so always looked like buttons. If they look like buttons, they should act like them too and have those semantics. This give them a role of button and uses the class and data attribute for the button component from GOVUK Frontend to make them work like one. These changes include a fair amount of styles to override those the govuk-button class brings in. I've tried to mark those ones to at least make that obvious.
2021-10-22 11:54:41 +01:00
&:focus:not(:active):not(:hover) {
Replace 'x' psuedo element with SVG The current link button for removing an area is created using a psuedo element with an 'x' as content. The inline box for the 'x' overlapped its parent. This is visible in high contrast mode, breaking the parent's border. Despite existing in CSS, the 'x' is also announced by screen readers, which is not what we want. This changes it to be an inline SVG with a role of image. It doesn't require as large an inline box so doesn't cause visual issues in high contrast modes. It also means we can set it's label similar to how you would an image's alt text, giving us control over what is announced by screen readers. This commit also includes some extra CSS, targeting high contrast modes, giving the link button the following when viewed in those modes: - a complete border so it is distinguishable from the list item - a focus style
2021-10-21 13:26:40 +01:00
border-color: $black;
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
}
Tweak spacing, size and hover state when focused The size and position of the 'X' has deviated a bit from the design intentions of the original. The original shared the x-height of the area text and has positioned to be vertically and horizontally centered. These changes assume an x-height of 11px and use flexbox to center the new 'X' horizontally and vertically. This also tweaks the visual state when focused and then hovered so matches other buttons without breaking the design.
2021-10-25 15:50:07 +01:00
&:focus:hover {
background-color: $govuk-focus-colour;
color: $black;
}
Make remove ('x') links buttons The text never had underlines like our other link-button components so always looked like buttons. If they look like buttons, they should act like them too and have those semantics. This give them a role of button and uses the class and data attribute for the button component from GOVUK Frontend to make them work like one. These changes include a fair amount of styles to override those the govuk-button class brings in. I've tried to mark those ones to at least make that obvious.
2021-10-22 11:54:41 +01:00
// show outline to make focus visible when background colours are overridden
Replace 'x' psuedo element with SVG The current link button for removing an area is created using a psuedo element with an 'x' as content. The inline box for the 'x' overlapped its parent. This is visible in high contrast mode, breaking the parent's border. Despite existing in CSS, the 'x' is also announced by screen readers, which is not what we want. This changes it to be an inline SVG with a role of image. It doesn't require as large an inline box so doesn't cause visual issues in high contrast modes. It also means we can set it's label similar to how you would an image's alt text, giving us control over what is announced by screen readers. This commit also includes some extra CSS, targeting high contrast modes, giving the link button the following when viewed in those modes: - a complete border so it is distinguishable from the list item - a focus style
2021-10-21 13:26:40 +01:00
@media (-ms-high-contrast: active), (forced-colors: active) {
Make remove ('x') links buttons The text never had underlines like our other link-button components so always looked like buttons. If they look like buttons, they should act like them too and have those semantics. This give them a role of button and uses the class and data attribute for the button component from GOVUK Frontend to make them work like one. These changes include a fair amount of styles to override those the govuk-button class brings in. I've tried to mark those ones to at least make that obvious.
2021-10-22 11:54:41 +01:00
// set styles so they don't get overriden by govuk-button styles
&:focus:not(:active):not(:hover) {
Replace 'x' psuedo element with SVG The current link button for removing an area is created using a psuedo element with an 'x' as content. The inline box for the 'x' overlapped its parent. This is visible in high contrast mode, breaking the parent's border. Despite existing in CSS, the 'x' is also announced by screen readers, which is not what we want. This changes it to be an inline SVG with a role of image. It doesn't require as large an inline box so doesn't cause visual issues in high contrast modes. It also means we can set it's label similar to how you would an image's alt text, giving us control over what is announced by screen readers. This commit also includes some extra CSS, targeting high contrast modes, giving the link button the following when viewed in those modes: - a complete border so it is distinguishable from the list item - a focus style
2021-10-21 13:26:40 +01:00
outline: 3px solid transparent;
}
Make remove ('x') links buttons The text never had underlines like our other link-button components so always looked like buttons. If they look like buttons, they should act like them too and have those semantics. This give them a role of button and uses the class and data attribute for the button component from GOVUK Frontend to make them work like one. These changes include a fair amount of styles to override those the govuk-button class brings in. I've tried to mark those ones to at least make that obvious.
2021-10-22 11:54:41 +01:00
Tweak spacing, size and hover state when focused The size and position of the 'X' has deviated a bit from the design intentions of the original. The original shared the x-height of the area text and has positioned to be vertically and horizontally centered. These changes assume an x-height of 11px and use flexbox to center the new 'X' horizontally and vertically. This also tweaks the visual state when focused and then hovered so matches other buttons without breaking the design.
2021-10-25 15:50:07 +01:00
// override hover styles when focused, to preserve dimensions and outline
&:focus:hover {
top: -2px;
right: -2px;
bottom: -2px;
width: 37px;
}
Replace 'x' psuedo element with SVG The current link button for removing an area is created using a psuedo element with an 'x' as content. The inline box for the 'x' overlapped its parent. This is visible in high contrast mode, breaking the parent's border. Despite existing in CSS, the 'x' is also announced by screen readers, which is not what we want. This changes it to be an inline SVG with a role of image. It doesn't require as large an inline box so doesn't cause visual issues in high contrast modes. It also means we can set it's label similar to how you would an image's alt text, giving us control over what is announced by screen readers. This commit also includes some extra CSS, targeting high contrast modes, giving the link button the following when viewed in those modes: - a complete border so it is distinguishable from the list item - a focus style
2021-10-21 13:26:40 +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
}
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
}
Make remove ('x') links buttons The text never had underlines like our other link-button components so always looked like buttons. If they look like buttons, they should act like them too and have those semantics. This give them a role of button and uses the class and data attribute for the button component from GOVUK Frontend to make them work like one. These changes include a fair amount of styles to override those the govuk-button class brings in. I've tried to mark those ones to at least make that obvious.
2021-10-22 11:54:41 +01:00
.govuk-button--secondary {
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
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);
Make images in key of map SVGs At the moment, the icons in the key of the map showing what each type of area drawn on the map means change colour in high contrast mode. This causes a mismatch between the areas on the map and the key. These changes remake the images in SVG to prevent the colours changing in high contrast modes. They also add a white background to the icons, to make sure they match the areas they refer to in the map.
2021-11-03 19:50:12 +00:00
&__icon {
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
position: absolute;
Make images in key of map SVGs At the moment, the icons in the key of the map showing what each type of area drawn on the map means change colour in high contrast mode. This causes a mismatch between the areas on the map and the key. These changes remake the images in SVG to prevent the colours changing in high contrast modes. They also add a white background to the icons, to make sure they match the areas they refer to in the map.
2021-11-03 19:50:12 +00:00
left: -5px;
top: -7px;
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