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.
This commit is contained in:
Chris Hill-Scott
2020-10-05 13:47:21 +01:00
parent d3a599a3d5
commit 3f338d45ca
5 changed files with 14 additions and 12 deletions

View File

@@ -78,12 +78,12 @@
} }
#map { #area-list-map {
z-index: 50; z-index: 50;
margin-bottom: govuk-spacing(4); margin-bottom: govuk-spacing(4);
} }
.area-key { .area-list-key {
display: inline-block; display: inline-block;
position: relative; position: relative;
@@ -133,7 +133,8 @@
} }
.map-details { .area-list-map-details {
.govuk-details__summary { .govuk-details__summary {
display: block; display: block;
padding-top: govuk-spacing(1); padding-top: govuk-spacing(1);
@@ -147,4 +148,5 @@
border-bottom: 1px solid $border-colour; border-bottom: 1px solid $border-colour;
margin-top: -1px; margin-top: -1px;
} }
} }

View File

@@ -1,7 +1,7 @@
{% macro map(broadcast_message) %} {% macro map(broadcast_message) %}
<div id="map"></div> <div id="area-list-map"></div>
<ul> <ul>
<li class="area-key area-key--certain"> <li class="area-list-key area-list-key--certain">
<span class="visually-hidden"> <span class="visually-hidden">
An area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.estimated_area) }} square miles An area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.estimated_area) }} square miles
</span> </span>
@@ -9,7 +9,7 @@
<span class="visually-hidden">the</span> <span class="visually-hidden">the</span>
alert alert
</li> </li>
<li class="area-key area-key--likely"> <li class="area-list-key area-list-key--likely">
<span class="visually-hidden"> <span class="visually-hidden">
An extra area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.bleed.estimated_area - broadcast_message.simple_polygons.estimated_area) }} square miles is An extra area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.bleed.estimated_area - broadcast_message.simple_polygons.estimated_area) }} square miles is
</span> </span>
@@ -19,7 +19,7 @@
</span> </span>
alert alert
</li> </li>
<li class="area-key area-key--phone-estimate"> <li class="area-list-key area-list-key--phone-estimate">
{% if broadcast_message.count_of_phones == broadcast_message.count_of_phones_likely %} {% if broadcast_message.count_of_phones == broadcast_message.count_of_phones_likely %}
{{ broadcast_message.count_of_phones|format_thousands }} phones estimated {{ broadcast_message.count_of_phones|format_thousands }} phones estimated
{% else %} {% else %}

View File

@@ -28,7 +28,7 @@
{% endfor %} {% 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 // 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 // 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'; mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
var mymap = L.map( var mymap = L.map(
'map', 'area-list-map',
{ {
scrollWheelZoom: false scrollWheelZoom: false
} }

View File

@@ -138,7 +138,7 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<div class="map-details"> <div class="area-list-map-details">
{{ govukDetails({ {{ govukDetails({
"summaryText": "Show map of areas", "summaryText": "Show map of areas",
"html": map(broadcast_message) "html": map(broadcast_message)

View File

@@ -430,11 +430,11 @@ def test_preview_broadcast_areas_page(
for item in page.select('ul.area-list li.area-list-item') for item in page.select('ul.area-list li.area-list-item')
] == areas_listed ] == areas_listed
assert len(page.select('#map')) == 1 assert len(page.select('#area-list-map')) == 1
assert [ assert [
normalize_spaces(item.text) normalize_spaces(item.text)
for item in page.select('ul li.area-key') for item in page.select('ul li.area-list-key')
] == estimates ] == estimates