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

Make images in key of map SVGs

Browse Source 
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.
This commit is contained in:
Tom Byers
2021-11-03 19:50:12 +00:00
parent c82b78941e
commit bc22c206b9
2 changed files with 11 additions and 10 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 {

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

@@ -1,6 +1,10 @@
{% macro map(broadcast_message) %}
<div id="area-list-map"></div>
<p class="area-list-key area-list-key--certain">
<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="visually-hidden">
An area of {{ (broadcast_message.simple_polygons.estimated_area)|round_to_significant_figures(1)|format_thousands }} square miles
</span>
@@ -9,6 +13,10 @@
alert
</p>
<p class="area-list-key area-list-key--likely">
<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="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
</span>