From 3c7364408b7572e06d1d8041b9435894a155573b Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Fri, 2 Oct 2020 14:15:40 +0100 Subject: [PATCH 1/5] Make selected areas more tag-like MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I’ve never liked the style of the selected areas on the preview of a broadcast message. They were a compromise, taking what’s on the map page and giving it a shaded background so it looks less like a text box. The trouble is all these stroked elements jumbled together made the page look very busy. I think it can be a bit calmer if they look more like the ‘tag’ component[1] from the Design System, which only uses shading. Going for black text not blue, because it’s one less piece of visual differentiation – again, trying to keep the busyness level down. 1. https://design-system.service.gov.uk/components/tag/ --- app/assets/stylesheets/components/area-list.scss | 5 ++++- .../views/broadcast/partials/area-map-javascripts.html | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss index 66769111b..43f1de582 100644 --- a/app/assets/stylesheets/components/area-list.scss +++ b/app/assets/stylesheets/components/area-list.scss @@ -64,7 +64,10 @@ &--unremoveable { padding-right: govuk-spacing(2); background: $light-blue-25; - margin-right: govuk-spacing(3); + color: mix($black, $govuk-blue, 66%); + border-color: $light-blue-25; + margin: 0 govuk-spacing(1) govuk-spacing(2) 0; + font-weight: bold; } } diff --git a/app/templates/views/broadcast/partials/area-map-javascripts.html b/app/templates/views/broadcast/partials/area-map-javascripts.html index b557e9445..85a89bf72 100644 --- a/app/templates/views/broadcast/partials/area-map-javascripts.html +++ b/app/templates/views/broadcast/partials/area-map-javascripts.html @@ -20,7 +20,7 @@ polygons.push( L.polygon({{polygon}}, { color: '#0b0b0c', - fillColor: '#005ea5', + fillColor: '#2B8CC4', fillOpacity: 0.3, weight: 2 }) From d7d113090c3fca6abe1816861cc26da705cf4727 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Fri, 2 Oct 2020 13:49:44 +0100 Subject: [PATCH 2/5] Restyle the broadcast message preview The preview of the broadcast message, with the 2px thick black lines no longer matched the style of the area labels, which have moved to just having a tinted background. This commit restyles the broadcast message preview (including the exclamation mark icon) to use shading only to differentiate the message from the rest of the page. This should make the page fit together more cohesively, and feel less busy. --- app/assets/images/exclamation.svg | 34 +++++++++---------- .../components/broadcast-message.scss | 17 ++++++---- 2 files changed, 27 insertions(+), 24 deletions(-) diff --git a/app/assets/images/exclamation.svg b/app/assets/images/exclamation.svg index 5998192ad..e530210e1 100644 --- a/app/assets/images/exclamation.svg +++ b/app/assets/images/exclamation.svg @@ -1,26 +1,26 @@ - - - - - + + - - + + + + + - - - - - - - - - + + + diff --git a/app/assets/stylesheets/components/broadcast-message.scss b/app/assets/stylesheets/components/broadcast-message.scss index 4ccf1a423..4251922b0 100644 --- a/app/assets/stylesheets/components/broadcast-message.scss +++ b/app/assets/stylesheets/components/broadcast-message.scss @@ -6,7 +6,7 @@ box-sizing: border-box; padding: govuk-spacing(9) govuk-spacing(3) govuk-spacing(3) govuk-spacing(3); background: $panel-colour; - border: 2px solid $black; + box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05); border-radius: 5px; white-space: normal; margin: govuk-spacing(2) 0 govuk-spacing(4) 0; @@ -16,18 +16,21 @@ &:before { content: "Emergency alert"; display: block; - border-bottom: 2px solid $black; position: absolute; - top: govuk-spacing(2); + top: 0; left: 0; - padding: 2px govuk-spacing(3) govuk-spacing(2) 45px; + padding: govuk-spacing(2) + 1px govuk-spacing(3) (govuk-spacing(2) - 1px) 46px; width: 100%; box-sizing: border-box; font-weight: bold; - background: file-url('exclamation.svg'); - background-size: 20px; + background: $grey-1 file-url('exclamation.svg'); + color: $white; + background-size: 22px; background-repeat: no-repeat; - background-position: govuk-spacing(3) 3px; + background-position: govuk-spacing(3) 11px; + border-top-right-radius: 5px; + border-top-left-radius: 5px; + box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); } } From d3a599a3d5b4695f69ab36705356ade681a47d35 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Fri, 2 Oct 2020 14:51:57 +0100 Subject: [PATCH 3/5] Adjust spacing and border on details map MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We hide the map inside a details element. Because the map has such a strong shape I don’t think it needs the grey border to contain it. This commit removes the border, and adjusts the spacing to group things by proximity alone. By removing the border and associated gutter we can give more space to the map, and make the page look less busy. --- .../stylesheets/components/area-list.scss | 18 +++++++++++++++++- .../views/broadcast/preview-areas.html | 2 +- .../views/broadcast/view-message.html | 10 ++++++---- 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss index 43f1de582..f7df53b55 100644 --- a/app/assets/stylesheets/components/area-list.scss +++ b/app/assets/stylesheets/components/area-list.scss @@ -88,7 +88,7 @@ display: inline-block; position: relative; margin-right: govuk-spacing(3); - margin-bottom: govuk-spacing(5); + margin-bottom: govuk-spacing(4); height: govuk-spacing(7); padding-left: govuk-spacing(8); line-height: govuk-spacing(7); @@ -132,3 +132,19 @@ } } + +.map-details { + .govuk-details__summary { + display: block; + padding-top: govuk-spacing(1); + padding-bottom: govuk-spacing(1); + margin-top: 1px; + } + + .govuk-details__text { + padding: 0; + border: none; + border-bottom: 1px solid $border-colour; + margin-top: -1px; + } +} diff --git a/app/templates/views/broadcast/preview-areas.html b/app/templates/views/broadcast/preview-areas.html index 9e1efad65..327355ac5 100644 --- a/app/templates/views/broadcast/preview-areas.html +++ b/app/templates/views/broadcast/preview-areas.html @@ -53,7 +53,7 @@ {% if broadcast_message.areas %} {{ map(broadcast_message) }} -
+ {{ page_footer('Continue to preview') }}
{% endif %} diff --git a/app/templates/views/broadcast/view-message.html b/app/templates/views/broadcast/view-message.html index 236090bc5..e6028d955 100644 --- a/app/templates/views/broadcast/view-message.html +++ b/app/templates/views/broadcast/view-message.html @@ -138,10 +138,12 @@ {% endif %} {% endfor %} - {{ govukDetails({ - "summaryText": "Show map", - "html": map(broadcast_message) - }) }} +
+ {{ govukDetails({ + "summaryText": "Show map of areas", + "html": map(broadcast_message) + }) }} +
{{ broadcast_message.template|string }} From 3f338d45cac42a68d6a9a17f497878ffcaf0ec54 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 5 Oct 2020 13:47:21 +0100 Subject: [PATCH 4/5] 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. --- app/assets/stylesheets/components/area-list.scss | 8 +++++--- app/templates/views/broadcast/macros/area-map.html | 8 ++++---- .../views/broadcast/partials/area-map-javascripts.html | 4 ++-- app/templates/views/broadcast/view-message.html | 2 +- tests/app/main/views/test_broadcast.py | 4 ++-- 5 files changed, 14 insertions(+), 12 deletions(-) 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) %} -
+
    -
  • +
  • @@ -9,7 +9,7 @@ alert
    • -
  • +
  • @@ -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 From 8ff9ec6d97eea4d5ab5583dc66a81e052287cc5d Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Tue, 6 Oct 2020 10:09:25 +0100 Subject: [PATCH 5/5] Replace generated content with proper heading Brings in https://github.com/alphagov/notifications-utils/pull/797 but adapts the CSS so nothing changes visually --- .../components/broadcast-message.scss | 31 ++++++++++--------- requirements-app.txt | 2 +- requirements.txt | 6 ++-- tests/app/main/views/test_broadcast.py | 7 +++++ tests/app/main/views/test_templates.py | 1 + 5 files changed, 28 insertions(+), 19 deletions(-) diff --git a/app/assets/stylesheets/components/broadcast-message.scss b/app/assets/stylesheets/components/broadcast-message.scss index 4251922b0..d9e51f85f 100644 --- a/app/assets/stylesheets/components/broadcast-message.scss +++ b/app/assets/stylesheets/components/broadcast-message.scss @@ -1,20 +1,21 @@ -.broadcast-message-wrapper { +.broadcast-message { - position: relative; - width: 100%; - max-width: 464px; - box-sizing: border-box; - padding: govuk-spacing(9) govuk-spacing(3) govuk-spacing(3) govuk-spacing(3); - background: $panel-colour; - box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05); - border-radius: 5px; - white-space: normal; - margin: govuk-spacing(2) 0 govuk-spacing(4) 0; - clear: both; - word-wrap: break-word; + &-wrapper { + position: relative; + width: 100%; + max-width: 464px; + box-sizing: border-box; + padding: govuk-spacing(9) govuk-spacing(3) govuk-spacing(3) govuk-spacing(3); + background: $panel-colour; + box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05); + border-radius: 5px; + white-space: normal; + margin: govuk-spacing(2) 0 govuk-spacing(4) 0; + clear: both; + word-wrap: break-word; + } - &:before { - content: "Emergency alert"; + &-heading { display: block; position: absolute; top: 0; diff --git a/requirements-app.txt b/requirements-app.txt index 555515483..01532ed9c 100644 --- a/requirements-app.txt +++ b/requirements-app.txt @@ -24,7 +24,7 @@ Shapely==1.7.1 awscli-cwlogs>=1.4,<1.5 itsdangerous==1.1.0 -git+https://github.com/alphagov/notifications-utils.git@42.2.1#egg=notifications-utils==42.2.1 +git+https://github.com/alphagov/notifications-utils.git@42.2.2#egg=notifications-utils==42.2.2 git+https://github.com/alphagov/govuk-frontend-jinja.git@v0.5.1-alpha#egg=govuk-frontend-jinja==0.5.1-alpha # gds-metrics requires prometheseus 0.2.0, override that requirement as later versions bring significant performance gains diff --git a/requirements.txt b/requirements.txt index a29cf753b..25fad9075 100644 --- a/requirements.txt +++ b/requirements.txt @@ -26,7 +26,7 @@ Shapely==1.7.1 awscli-cwlogs>=1.4,<1.5 itsdangerous==1.1.0 -git+https://github.com/alphagov/notifications-utils.git@42.2.1#egg=notifications-utils==42.2.1 +git+https://github.com/alphagov/notifications-utils.git@42.2.2#egg=notifications-utils==42.2.2 git+https://github.com/alphagov/govuk-frontend-jinja.git@v0.5.1-alpha#egg=govuk-frontend-jinja==0.5.1-alpha # gds-metrics requires prometheseus 0.2.0, override that requirement as later versions bring significant performance gains @@ -34,10 +34,10 @@ prometheus-client==0.8.0 gds-metrics==0.2.4 ## The following requirements were added by pip freeze: -awscli==1.18.154 +awscli==1.18.157 bleach==3.1.4 boto3==1.10.38 -botocore==1.18.13 +botocore==1.18.16 cachetools==4.1.0 certifi==2020.6.20 chardet==3.0.4 diff --git a/tests/app/main/views/test_broadcast.py b/tests/app/main/views/test_broadcast.py index 3ee54a40f..bba981f2f 100644 --- a/tests/app/main/views/test_broadcast.py +++ b/tests/app/main/views/test_broadcast.py @@ -968,9 +968,16 @@ def test_preview_broadcast_message_page( 'Scotland', ] + assert normalize_spaces( + page.select_one('h2.broadcast-message-heading').text + ) == ( + 'Emergency alert' + ) + assert normalize_spaces( page.select_one('.broadcast-message-wrapper').text ) == ( + 'Emergency alert ' 'This is a test' ) diff --git a/tests/app/main/views/test_templates.py b/tests/app/main/views/test_templates.py index afd12d037..8dc5daeb1 100644 --- a/tests/app/main/views/test_templates.py +++ b/tests/app/main/views/test_templates.py @@ -784,6 +784,7 @@ def test_view_broadcast_template( ) == ( normalize_spaces(page.select_one('.broadcast-message-wrapper').text) ) == ( + 'Emergency alert ' 'This is a test' )