darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-10 19:34:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4068 from alphagov/fix-map-key-in-high-contrast

Browse Source 
Fix map key in high contrast
This commit is contained in:
Tom Byers
2021-11-18 14:36:50 +00:00
committed by GitHub
parent c82b78941e 2e53a2b6f8
commit d00d13fc2d
2 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/stylesheets/components/area-list.scss
View File

@@ -137,17 +137,10 @@
padding-left: govuk-spacing(8);
line-height: govuk-spacing(7);
&:before {
content: "";
display: block;
&__icon {
position: absolute;
top: 3px;
left: govuk-spacing(1);
width: govuk-spacing(6);
height: govuk-spacing(6);
box-sizing: border-box;
margin-right: govuk-spacing(1);
transform: rotate(45deg);
left: -5px;
top: -7px;
}
&--certain {

22
app/templates/views/broadcast/macros/area-map.html
View File

@@ -1,19 +1,29 @@
{% macro map(broadcast_message) %}
<div id="area-list-map"></div>
<p class="area-list-key area-list-key--certain">
<span class="visually-hidden">
An area of {{ (broadcast_message.simple_polygons.estimated_area)|round_to_significant_figures(1)|format_thousands }} square miles
<svg class="area-list-key__icon" width="50" height="50" viewbox="0 0 50 50" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF" />
<polygon points="25 5, 45 25, 25 45, 5 25" stroke="#0B0B0C" stroke-width="2" fill="#96C6E2" />
</svg>
<span class="govuk-visually-hidden">
An area of {{ (broadcast_message.simple_polygons.estimated_area)|round_to_significant_figures(1)|format_thousands }} square miles&nbsp;
</span>
Will get
<span class="visually-hidden">the</span>
<span class="govuk-visually-hidden">
the
</span>
alert
</p>
<p class="area-list-key area-list-key--likely">
<span class="visually-hidden">
An extra area of {{ (broadcast_message.simple_polygons_with_bleed.estimated_area - broadcast_message.simple_polygons.estimated_area)|round_to_significant_figures(1)|format_thousands }} square miles is
<svg class="area-list-key__icon" width="50" height="50" viewbox="0 0 50 50" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF" />
<polygon points="25 5, 45 25, 25 45, 5 25" stroke="#005ea5" stroke-opacity="1" stroke-width="2" stroke-linecap="square" stroke-linejoin="round" stroke-dasharray="4,7.5,5,7.5,8,8,5,8,7.5,8,5,8,7,8,5,8,4" fill="#2B8CC4" fill-opacity="0.15" />
</svg>
<span class="govuk-visually-hidden">
An extra area of {{ (broadcast_message.simple_polygons_with_bleed.estimated_area - broadcast_message.simple_polygons.estimated_area)|round_to_significant_figures(1)|format_thousands }} square miles is&nbsp;
</span>
Likely to get
<span class="visually-hidden">
<span class="govuk-visually-hidden">
the
</span>
alert