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

Restyle the broadcast message preview

Browse Source 
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.
This commit is contained in:
Chris Hill-Scott
2020-10-02 13:49:44 +01:00
parent 3c7364408b
commit d7d113090c
2 changed files with 27 additions and 24 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

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

@@ -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);
}
}