darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-06-24 09:21:06 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3669 from alphagov/restyle-areas-and-message

Browse Source 
Restyle the list of areas and emergency alert message preview to be less busy
This commit is contained in:
Chris Hill-Scott
2020-10-12 16:07:56 +01:00
committed by GitHub
parent 3eb97f76b8 8ff9ec6d97
commit 65b2dbc031
11 changed files with 95 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/assets/images/exclamation.svg
View File

@@ -1,26 +1,26 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 17.5 14.5" width="17.5" height="14.5" style="enable-background:new 0 0 17.5 14.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:#0B0B0B;}
.st0{display:none;}
.st1{display:inline;fill:#BCBCBC;}
.st2{fill:#FFFFFF;}
.st3{fill:#6F777B;}
</style>
<path class="st0" d="M8.6,3.9l5.3,8.6H3.5L8.6,3.9 M8.6,0L0,14.5h17.5L8.6,0L8.6,0z"/>
<g>
<circle class="st0" cx="8.8" cy="10.9" r="1.1"/>
<path d="M8.8,9.8c-0.6,0-1.1,0.5-1.1,1.1c0,0.6,0.5,1.1,1.1,1.1s1.1-0.5,1.1-1.1C9.8,10.3,9.4,9.8,8.8,9.8L8.8,9.8z"/>
<g id="Layer_3" class="st0">
<rect x="-1.6" y="-0.8" class="st1" width="20.1" height="17.8"/>
</g>
<polygon class="st0" points="8.2,6.4 9.3,6.4 9.7,6.8 9.6,9.3 8.7,9.1 8,9.3 7.8,6.9 "/>
<g>
<g id="Layer_1">
<path class="st2" d="M8.6,0L0,14.5h17.5L8.6,0L8.6,0z"/>
<g>
<circle class="st2" cx="8.8" cy="10.9" r="1.1"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
<g id="Layer_2">
<path class="st3" d="M8.8,10.3c-0.8,0-1.5,0.7-1.5,1.5c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5C10.2,11,9.6,10.3,8.8,10.3L8.8,10.3z
"/>
<path class="st3" d="M10.1,5.8C10.2,6.6,9.8,9,9.8,9S9.4,9,8.8,9C8.3,9,7.8,9,7.8,9S7.3,6.7,7.3,6c0,0,0-1.6,1.4-1.6
C10.1,4.4,10.1,5.8,10.1,5.8z"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 843 B

After

Width:  |  Height:  |  Size: 1.0 KiB

29
app/assets/stylesheets/components/area-list.scss
View File

@@ -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;
}
}
@@ -75,17 +78,17 @@
}
#map {
#area-list-map {
z-index: 50;
margin-bottom: govuk-spacing(4);
}
.area-key {
.area-list-key {
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);
@@ -129,3 +132,21 @@
}
}
.area-list-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;
}
}

46
app/assets/stylesheets/components/broadcast-message.scss
View File

@@ -1,33 +1,37 @@
.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;
border: 2px solid $black;
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;
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);
}
}

8
app/templates/views/broadcast/macros/area-map.html
View File

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

6
app/templates/views/broadcast/partials/area-map-javascripts.html
View File

@@ -20,7 +20,7 @@
polygons.push(
L.polygon({{polygon}}, {
color: '#0b0b0c',
fillColor: '#005ea5',
fillColor: '#2B8CC4',
fillOpacity: 0.3,
weight: 2
})
@@ -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
}

2
app/templates/views/broadcast/preview-areas.html
View File

@@ -53,7 +53,7 @@
{% if broadcast_message.areas %}
{{ map(broadcast_message) }}
<form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" method="get">
<form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" method="get" class="govuk-!-margin-top-1">
{{ page_footer('Continue to preview') }}
</form>
{% endif %}

10
app/templates/views/broadcast/view-message.html
View File

@@ -138,10 +138,12 @@
{% endif %}
{% endfor %}
{{ govukDetails({
"summaryText": "Show map",
"html": map(broadcast_message)
}) }}
<div class="area-list-map-details">
{{ govukDetails({
"summaryText": "Show map of areas",
"html": map(broadcast_message)
}) }}
</div>
{{ broadcast_message.template|string }}

2
requirements-app.txt
View File

@@ -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

6
requirements.txt
View File

@@ -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

11
tests/app/main/views/test_broadcast.py
View File

@@ -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
@@ -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'
)

1
tests/app/main/views/test_templates.py
View File

@@ -784,6 +784,7 @@ def test_view_broadcast_template(
) == (
normalize_spaces(page.select_one('.broadcast-message-wrapper').text)
) == (
'Emergency alert '
'This is a test'
)