mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-09 12:59:48 -04:00
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:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 %}
|
||||||
|
|||||||
@@ -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
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
@@ -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
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user