diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss
index f7df53b55..1397d6b06 100644
--- a/app/assets/stylesheets/components/area-list.scss
+++ b/app/assets/stylesheets/components/area-list.scss
@@ -78,12 +78,12 @@
}
-#map {
+#area-list-map {
z-index: 50;
margin-bottom: govuk-spacing(4);
}
-.area-key {
+.area-list-key {
display: inline-block;
position: relative;
@@ -133,7 +133,8 @@
}
-.map-details {
+.area-list-map-details {
+
.govuk-details__summary {
display: block;
padding-top: govuk-spacing(1);
@@ -147,4 +148,5 @@
border-bottom: 1px solid $border-colour;
margin-top: -1px;
}
+
}
diff --git a/app/templates/views/broadcast/macros/area-map.html b/app/templates/views/broadcast/macros/area-map.html
index 32b0ce8ee..196f4c447 100644
--- a/app/templates/views/broadcast/macros/area-map.html
+++ b/app/templates/views/broadcast/macros/area-map.html
@@ -1,7 +1,7 @@
{% macro map(broadcast_message) %}
-
+
- -
+
-
An area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.estimated_area) }} square miles
@@ -9,7 +9,7 @@
the
alert
- -
+
-
An extra area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.bleed.estimated_area - broadcast_message.simple_polygons.estimated_area) }} square miles is
@@ -19,7 +19,7 @@
alert
- -
+
-
{% if broadcast_message.count_of_phones == broadcast_message.count_of_phones_likely %}
{{ broadcast_message.count_of_phones|format_thousands }} phones estimated
{% else %}
diff --git a/app/templates/views/broadcast/partials/area-map-javascripts.html b/app/templates/views/broadcast/partials/area-map-javascripts.html
index 85a89bf72..871145332 100644
--- a/app/templates/views/broadcast/partials/area-map-javascripts.html
+++ b/app/templates/views/broadcast/partials/area-map-javascripts.html
@@ -28,7 +28,7 @@
{% endfor %}
- var mapElement = document.getElementById('map');
+ var mapElement = document.getElementById('area-list-map');
// if element is inside a details element then to make the map render correctly we open the details element
// and set up the map before closing the details map after
@@ -41,7 +41,7 @@
mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
var mymap = L.map(
- 'map',
+ 'area-list-map',
{
scrollWheelZoom: false
}
diff --git a/app/templates/views/broadcast/view-message.html b/app/templates/views/broadcast/view-message.html
index e6028d955..b474da754 100644
--- a/app/templates/views/broadcast/view-message.html
+++ b/app/templates/views/broadcast/view-message.html
@@ -138,7 +138,7 @@
{% endif %}
{% endfor %}
-
+
{{ govukDetails({
"summaryText": "Show map of areas",
"html": map(broadcast_message)
diff --git a/tests/app/main/views/test_broadcast.py b/tests/app/main/views/test_broadcast.py
index 2c8b534ec..3ee54a40f 100644
--- a/tests/app/main/views/test_broadcast.py
+++ b/tests/app/main/views/test_broadcast.py
@@ -430,11 +430,11 @@ def test_preview_broadcast_areas_page(
for item in page.select('ul.area-list li.area-list-item')
] == areas_listed
- assert len(page.select('#map')) == 1
+ assert len(page.select('#area-list-map')) == 1
assert [
normalize_spaces(item.text)
- for item in page.select('ul li.area-key')
+ for item in page.select('ul li.area-list-key')
] == estimates