From 0369472a762e4d4dad1963bf295f0511997a730b Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Wed, 26 Aug 2020 10:43:55 +0100 Subject: [PATCH 1/2] Add a key to the map MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit To help people understand that broadcasting is not a precise technology, we have shown the estimate bleed area on the map. Because people aren’t familiar with the technology a visual only clue is not enough. So this commit adds a key to the map, which explains what the different outlines mean. It also removes the sticky footer from this page to: - make the key visible on the page - make people scroll and review the map before they get to the big green button - not reduce the size of the map any further --- .../stylesheets/components/area-list.scss | 47 ++++++++++++++++++- .../partials/area-map-javascripts.html | 16 +++---- .../partials/area-map-stylesheets.html | 7 --- .../views/broadcast/preview-areas.html | 12 ++++- 4 files changed, 64 insertions(+), 18 deletions(-) diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss index 298330909..25bb283d0 100644 --- a/app/assets/stylesheets/components/area-list.scss +++ b/app/assets/stylesheets/components/area-list.scss @@ -1,7 +1,7 @@ .area-list { display: inline-block; - + &-item { display: inline-block; @@ -74,3 +74,48 @@ } } + +#map { + z-index: 50; + margin-bottom: govuk-spacing(4); +} + +.area-key { + + display: inline-block; + position: relative; + margin-right: govuk-spacing(3); + margin-bottom: govuk-spacing(5); + height: govuk-spacing(7); + padding-left: govuk-spacing(8); + line-height: govuk-spacing(7); + + &:before { + content: ""; + display: block; + position: absolute; + top: 0; + left: 0; + width: govuk-spacing(7); + height: govuk-spacing(7); + box-sizing: border-box; + margin-right: govuk-spacing(1); + } + + &--certain { + &:before { + border: 4px solid rgba($white, 0.1); + background: rgba($govuk-blue, 0.6); + box-shadow: inset 0 0 0 2px $black; + } + } + + &--likely { + &:before { + padding: 1px; + border: 2px solid $govuk-blue; + background: rgba($govuk-blue, 0.2); + } + } + +} diff --git a/app/templates/views/broadcast/partials/area-map-javascripts.html b/app/templates/views/broadcast/partials/area-map-javascripts.html index 5d1fcb37e..6111f6be2 100644 --- a/app/templates/views/broadcast/partials/area-map-javascripts.html +++ b/app/templates/views/broadcast/partials/area-map-javascripts.html @@ -5,10 +5,10 @@ {% for polygon in broadcast_message.simple_polygons.bleed.as_coordinate_pairs_lat_long %} polygons.push( L.polygon({{polygon}}, { - opacity: 0.5, - color: '#2B8CC4', // $light-blue - fillColor: '#2B8CC4', // $light-blue - fillOpacity: 0.2, + opacity: 0.8, + color: '#005ea5', // $light-blue + fillColor: '#005ea5', // $light-blue + fillOpacity: 0.15, weight: 2 }) ); @@ -17,10 +17,10 @@ {% for polygon in broadcast_message.simple_polygons.as_coordinate_pairs_lat_long %} polygons.push( L.polygon({{polygon}}, { - opacity: 0.1, - color: '#2B8CC4', // $black - fillColor: '#2B8CC4', // $light-blue - fillOpacity: 0.4, + opacity: 0.3, + color: '#005ea5', // $black + fillColor: '#005ea5', // $light-blue + fillOpacity: 0.3, weight: 1 }) ); diff --git a/app/templates/views/broadcast/partials/area-map-stylesheets.html b/app/templates/views/broadcast/partials/area-map-stylesheets.html index cb1333424..e007724a1 100644 --- a/app/templates/views/broadcast/partials/area-map-stylesheets.html +++ b/app/templates/views/broadcast/partials/area-map-stylesheets.html @@ -1,8 +1 @@ - diff --git a/app/templates/views/broadcast/preview-areas.html b/app/templates/views/broadcast/preview-areas.html index acc5dc2fa..83a231876 100644 --- a/app/templates/views/broadcast/preview-areas.html +++ b/app/templates/views/broadcast/preview-areas.html @@ -1,6 +1,6 @@ {% from "components/button/macro.njk" import govukButton %} {% from "components/page-header.html" import page_header %} -{% from "components/page-footer.html" import sticky_page_footer %} +{% from "components/page-footer.html" import page_footer %} {% extends "withnav_template.html" %} @@ -52,8 +52,16 @@ {% if broadcast_message.areas %}
+
+
+ Will get alert +
+
+ Likely to get alert +
+
- {{ sticky_page_footer('Continue to preview') }} + {{ page_footer('Continue to preview') }}
{% endif %} From f553158846f7a77b272c3004ab83a9c0b2fefdcf Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Tue, 8 Sep 2020 16:35:03 +0100 Subject: [PATCH 2/2] Add estimated areas for non-visual users MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Since the key relies on visual association between the shapes on the maps and the styling of the key, it won’t work for non-visual users. An alternative way of giving them the same information is by providing the size of the area numerically. --- app/broadcast_areas/polygons.py | 9 ++++++++ .../views/broadcast/macros/area-map.html | 23 +++++++++++++++++++ .../views/broadcast/preview-areas.html | 11 ++------- .../views/broadcast/view-message.html | 3 ++- tests/app/main/views/test_broadcast.py | 20 +++++++++++++++- 5 files changed, 55 insertions(+), 11 deletions(-) create mode 100644 app/templates/views/broadcast/macros/area-map.html diff --git a/app/broadcast_areas/polygons.py b/app/broadcast_areas/polygons.py index 53cdf32fa..f6fcd328f 100644 --- a/app/broadcast_areas/polygons.py +++ b/app/broadcast_areas/polygons.py @@ -14,6 +14,9 @@ class Polygons(): approx_metres_to_degree = 111_320 approx_square_metres_to_square_degree = approx_metres_to_degree ** 2 + square_degrees_to_square_miles = ( + approx_square_metres_to_square_degree / (1000 * 1000) * 0.386102 + ) # Estimated amount of bleed into neigbouring areas based on typical # range/separation of cell towers. @@ -161,6 +164,12 @@ class Polygons(): def point_count(self): return len(list(itertools.chain(*self.as_coordinate_pairs_long_lat))) + @property + def estimated_area(self): + return sum( + polygon.area for polygon in self + ) * self.square_degrees_to_square_miles + def flatten_polygons(polygons): if isinstance(polygons, GeometryCollection): diff --git a/app/templates/views/broadcast/macros/area-map.html b/app/templates/views/broadcast/macros/area-map.html new file mode 100644 index 000000000..67d0cce94 --- /dev/null +++ b/app/templates/views/broadcast/macros/area-map.html @@ -0,0 +1,23 @@ +{% macro map(broadcast_message) %} +
+ +{% endmacro %} diff --git a/app/templates/views/broadcast/preview-areas.html b/app/templates/views/broadcast/preview-areas.html index 83a231876..9e1efad65 100644 --- a/app/templates/views/broadcast/preview-areas.html +++ b/app/templates/views/broadcast/preview-areas.html @@ -1,6 +1,7 @@ {% from "components/button/macro.njk" import govukButton %} {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} +{% from "views/broadcast/macros/area-map.html" import map %} {% extends "withnav_template.html" %} @@ -51,15 +52,7 @@ {% endfor %} {% if broadcast_message.areas %} -
-
-
- Will get alert -
-
- Likely to get alert -
-
+ {{ map(broadcast_message) }}
{{ page_footer('Continue to preview') }}
diff --git a/app/templates/views/broadcast/view-message.html b/app/templates/views/broadcast/view-message.html index 29db61202..236090bc5 100644 --- a/app/templates/views/broadcast/view-message.html +++ b/app/templates/views/broadcast/view-message.html @@ -5,6 +5,7 @@ {% from "components/banner.html" import banner %} {% from "components/page-header.html" import page_header %} {% from "components/page-footer.html" import page_footer %} +{% from "views/broadcast/macros/area-map.html" import map %} {% extends "withnav_template.html" %} @@ -139,7 +140,7 @@ {{ govukDetails({ "summaryText": "Show map", - "html": '
' + "html": map(broadcast_message) }) }} {{ broadcast_message.template|string }} diff --git a/tests/app/main/views/test_broadcast.py b/tests/app/main/views/test_broadcast.py index 37b8d7ce6..41bbde824 100644 --- a/tests/app/main/views/test_broadcast.py +++ b/tests/app/main/views/test_broadcast.py @@ -331,12 +331,30 @@ def test_preview_broadcast_areas_page( mock_get_draft_broadcast_message, ): service_one['permissions'] += ['broadcast'] - client_request.get( + page = client_request.get( '.preview_broadcast_areas', service_id=SERVICE_ONE_ID, broadcast_message_id=fake_uuid, ) + assert [ + normalize_spaces(item.text) + for item in page.select('ul.area-list li.area-list-item') + ] == [ + 'England remove', + 'Scotland remove', + ] + + assert len(page.select('#map')) == 1 + + assert [ + normalize_spaces(item.text) + for item in page.select('ul li.area-key') + ] == [ + 'An area of 176,714.9 square miles Will get the alert', + 'An extra area of 3,052.8 square miles is Likely to get the alert', + ] + def test_choose_broadcast_library_page( client_request,