darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-27 05:41:00 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add some styling to broadcast messages

Browse Source 
This is borrowed from an earlier prototype, and is meant to be temporary
– something better than just plain text.

Text in generated content isn’t always announced by screen readers, so
we should definitely move away from that once we understand what text
will be shown on the phone and where it comes from.
This commit is contained in:
Chris Hill-Scott
2020-07-08 17:24:08 +01:00
parent ea1c9f4059
commit 0cf3124f73
4 changed files with 61 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/assets/images/exclamation.svg Normal file
View File

@@ -0,0 +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"
viewBox="0 0 17.5 14.5" style="enable-background:new 0 0 17.5 14.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:#0B0B0B;}
</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>
<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>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 816 B

33
app/assets/stylesheets/components/broadcast-message.scss Normal file
View File

@@ -0,0 +1,33 @@
.broadcast-message-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;
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;
&:before {
content: "Emergency alert";
display: block;
border-bottom: 2px solid $black;
position: absolute;
top: govuk-spacing(2);
left: 0;
padding: 2px govuk-spacing(3) govuk-spacing(2) 45px;
width: 100%;
box-sizing: border-box;
font-weight: bold;
background: file-url('exclamation.svg');
background-size: 20px;
background-repeat: no-repeat;
background-position: govuk-spacing(3) 3px;
}
}

1
app/assets/stylesheets/main.scss
View File

@@ -71,6 +71,7 @@ $path: '/static/images/';
@import 'components/task-list';
@import 'components/loading-indicator';
@import 'components/area-list';
@import 'components/broadcast-message';
@import 'views/dashboard';
@import 'views/users';

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

@@ -58,7 +58,7 @@
{% block maincolumn_content %}
{{ page_header("Choose where to broadcast to", back_link="{{ url_for('.broadcast', service_id=current_service.id) }}") }}
{{ page_header("Choose where to broadcast to", back_link=url_for('.choose_template', service_id=current_service.id)) }}
{% for area in selected %}
{% if loop.first %}