mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-03 18:18:26 -04:00
bc22c206b9
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.
39 lines
2.1 KiB
HTML
39 lines
2.1 KiB
HTML
{% 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>
|
|
Will get
|
|
<span class="visually-hidden">the</span>
|
|
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>
|
|
Likely to get
|
|
<span class="visually-hidden">
|
|
the
|
|
</span>
|
|
alert
|
|
</p>
|
|
<p class="area-list-key area-list-key--phone-estimate">
|
|
{% if broadcast_message.count_of_phones == 0 %}
|
|
Unknown number of phones
|
|
{% elif broadcast_message.count_of_phones == broadcast_message.count_of_phones_likely %}
|
|
{{ broadcast_message.count_of_phones|format_thousands }} phones estimated
|
|
{% else %}
|
|
{{ broadcast_message.count_of_phones|format_thousands }} to {{ broadcast_message.count_of_phones_likely|format_thousands }} phones
|
|
{% endif %}
|
|
</p>
|
|
{% endmacro %}
|