mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-06 11:23:48 -05:00
Merge pull request #93 from alphagov/send-sms-page-2
Put message previews on ‘Send SMS’ page
This commit is contained in:
Adam Shimali
@@ -1,3 +1,3 @@
|
||||
$(() => GOVUK.modules.start());
|
||||
|
||||
$(() => new GOVUK.SelectionButtons('.block-label input'));
|
||||
$(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input'));
|
||||
|
||||
@@ -1,53 +1,63 @@
|
||||
.sms-message {
|
||||
|
||||
position: relative;
|
||||
%sms-message-wrapper,
|
||||
.sms-message-wrapper {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: $gutter/2;
|
||||
background: $panel-colour;
|
||||
border: 1px solid $panel-colour;
|
||||
border-radius: 5px;
|
||||
white-space: normal;
|
||||
margin: 0 0 $gutter 0;
|
||||
}
|
||||
|
||||
.sms-message-wrapper-with-radio {
|
||||
@extend %sms-message-wrapper;
|
||||
padding-left: 45px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sms-message-recipient {
|
||||
@include copy-19;
|
||||
color: $secondary-text-colour;
|
||||
margin: -$gutter-half 0 $gutter 0;
|
||||
}
|
||||
|
||||
.sms-message-name {
|
||||
@include bold-19;
|
||||
margin: 30px 0 10px 0;
|
||||
}
|
||||
|
||||
.sms-message-picker {
|
||||
display: block;
|
||||
margin: 7px 0 0 0;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
label.sms-message-option {
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&.selected {
|
||||
|
||||
.sms-message-wrapper-with-radio {
|
||||
background: $white;
|
||||
border: 1px solid $text-colour;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: -12px;
|
||||
right: 5px;
|
||||
width: 20px;
|
||||
height: 25px;
|
||||
border-radius: 100%;
|
||||
background: $panel-colour;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
bottom: -15px;
|
||||
right: -5px;
|
||||
border-radius: 100%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: $white;
|
||||
}
|
||||
&.focused {
|
||||
|
||||
&-wrapper {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
padding: $gutter/2;
|
||||
background: $panel-colour;
|
||||
border-radius: 5px;
|
||||
white-space: normal;
|
||||
}
|
||||
outline: none;
|
||||
|
||||
&-recipient {
|
||||
@include copy-19;
|
||||
color: $secondary-text-colour;
|
||||
margin: -$gutter-half 0 $gutter 0;
|
||||
}
|
||||
.sms-message-wrapper-with-radio {
|
||||
box-shadow: 0 0 0 3px $yellow;
|
||||
}
|
||||
|
||||
&-name {
|
||||
@include bold-19;
|
||||
margin: 50px 0 10px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
.template-picker {
|
||||
|
||||
&-name {
|
||||
@include bold-19;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
&-option {
|
||||
|
||||
white-space: nowrap;
|
||||
clear: both;
|
||||
|
||||
&-radio {
|
||||
padding-right: 10px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
width: 33%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.block-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sms-message {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
max-width: 66%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -32,7 +32,6 @@
|
||||
|
||||
// Specific to this application
|
||||
@import 'grids';
|
||||
@import 'components/template-picker';
|
||||
@import 'components/placeholder';
|
||||
@import 'components/sms-message';
|
||||
@import 'components/page-footer';
|
||||
|
||||
@@ -1,39 +1,12 @@
|
||||
templates = [
|
||||
{
|
||||
'type': 'sms',
|
||||
'name': 'Confirmation',
|
||||
'body': 'Lasting power of attorney: We’ve received your application. Applications take between 8 and 10 weeks to process.' # noqa
|
||||
'name': 'Confirmation with details Jan 2016',
|
||||
'body': '((name)), we’ve received your ((thing)). We’ll contact you again within 1 week.'
|
||||
},
|
||||
{
|
||||
'type': 'sms',
|
||||
'name': 'Reminder',
|
||||
'body': 'Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)). Tax your vehicle at www.gov.uk/vehicle-tax' # noqa
|
||||
},
|
||||
{
|
||||
'type': 'sms',
|
||||
'name': 'Warning',
|
||||
'body': 'Vehicle tax: Your vehicle tax for ((registration number)) has expired. Tax your vehicle at www.gov.uk/vehicle-tax' # noqa
|
||||
},
|
||||
{
|
||||
'type': 'email',
|
||||
'name': 'Application alert 06/2016',
|
||||
'subject': 'Your lasting power of attorney application',
|
||||
'body': """Dear ((name)),
|
||||
|
||||
When you’ve made your lasting power of attorney (LPA), you need to register it \
|
||||
with the Office of the Public Guardian (OPG).
|
||||
|
||||
You can apply to register your LPA yourself if you’re able to make your own decisions.
|
||||
|
||||
Your attorney can also register it for you. You’ll be told if they do and you can \
|
||||
object to the registration.
|
||||
|
||||
It takes between 8 and 10 weeks to register an LPA if there are no mistakes in the application.
|
||||
"""
|
||||
},
|
||||
{
|
||||
'type': 'sms',
|
||||
'name': 'Air quality alert',
|
||||
'body': 'Air pollution levels will be ((level)) in ((region)) tomorrow.'
|
||||
},
|
||||
'name': 'Confirmation Jan 2016',
|
||||
'body': 'We’ve received your payment. We’ll contact you again within 1 week.'
|
||||
}
|
||||
]
|
||||
|
||||
@@ -55,8 +55,10 @@
|
||||
<summary class="dropdown-toggle">
|
||||
Service name
|
||||
</summary>
|
||||
<a href="#">Switch to A N Other service</a>
|
||||
<a href="{{ url_for('.add_service') }}">Add a new service to GOV.UK Notify</a>
|
||||
<div>
|
||||
<a href="#">Switch to A N Other service</a>
|
||||
<a href="{{ url_for('.add_service') }}">Add a new service to GOV.UK Notify</a>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<div class="column-half management-navigation-account">
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
{% macro sms_message(body, recipient=None, name=None, edit_link=None) %}
|
||||
{% macro sms_message(
|
||||
body, recipient=None, name=None, edit_link=None, input_name=None, input_index=None
|
||||
) %}
|
||||
{% if input_name %}
|
||||
<label class="sms-message-option" for="{{ input_name }}-{{ input_index }}">
|
||||
{% endif %}
|
||||
{% if name %}
|
||||
<h3 class="sms-message-name">
|
||||
{% if edit_link %}
|
||||
@@ -8,14 +13,18 @@
|
||||
{% endif %}
|
||||
</h3>
|
||||
{% endif %}
|
||||
<div class="sms-message">
|
||||
<div class="sms-message-wrapper">
|
||||
{{ body|placeholders }}
|
||||
</div>
|
||||
{% if input_name %}
|
||||
<input class="sms-message-picker" type="radio" id="{{ input_name }}-{{ input_index }}" name="{{ input_name }}" />
|
||||
{% endif %}
|
||||
<div class="sms-message-wrapper{% if input_name %}-with-radio{% endif %}">
|
||||
{{ body|placeholders }}
|
||||
</div>
|
||||
{% if recipient %}
|
||||
<p class="sms-message-recipient">
|
||||
{{ recipient }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if input_name %}
|
||||
</label>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
@@ -10,35 +10,36 @@
|
||||
{% block maincolumn_content %}
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
|
||||
<h1 class="heading-xlarge">Send text messages</h1>
|
||||
<div class="grid-row">
|
||||
<div class="column-three-quarters">
|
||||
|
||||
<fieldset class='form-group'>
|
||||
<legend class="heading-medium">1. Choose text message template</legend>
|
||||
{% for template in message_templates %}
|
||||
<label class="block-label" for="template-{{loop.index}}">
|
||||
{{ template.name }}
|
||||
<input type="radio" name="template" id="template-{{loop.index}}" value="{{ template.name }}" />
|
||||
</label>
|
||||
{% endfor %}
|
||||
</fieldset>
|
||||
<h1 class="heading-xlarge">Send text messages</h1>
|
||||
|
||||
<p>
|
||||
or <a href="{{ url_for('.add_service_template', service_id=service_id) }}">create a new template</a>
|
||||
</p>
|
||||
<fieldset class='form-group'>
|
||||
<legend class="heading-medium">1. Choose text message template</legend>
|
||||
{% for template in message_templates %}
|
||||
{{ sms_message(
|
||||
template.body, name=template.name, input_name='template', input_index=loop.index
|
||||
) }}
|
||||
{% endfor %}
|
||||
</fieldset>
|
||||
|
||||
<h2 class="heading-medium">2. Add recipients</h2>
|
||||
<h2 class="heading-medium">2. Add recipients</h2>
|
||||
|
||||
<p>
|
||||
Upload a CSV file to add your recipients’ details.
|
||||
</p>
|
||||
<p>
|
||||
You can also <a href="#">download an example CSV</a>.
|
||||
</p>
|
||||
<p>
|
||||
{{textbox(form.file)}}
|
||||
</p>
|
||||
<p>
|
||||
Upload a CSV file to add your recipients’ details.
|
||||
</p>
|
||||
<p>
|
||||
You can also <a href="#">download an example CSV</a>.
|
||||
</p>
|
||||
<p>
|
||||
{{textbox(form.file)}}
|
||||
</p>
|
||||
|
||||
{{ page_footer("Continue") }}
|
||||
{{ page_footer("Continue") }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
|
||||
<h2 class="heading-large">SMS message</h2>
|
||||
|
||||
<p>Used to show or preview an SMS message.</p>
|
||||
<p>Used to show, preview or choose an SMS message.</p>
|
||||
|
||||
<div class="grid-row">
|
||||
<div class="column-half">
|
||||
@@ -102,6 +102,12 @@
|
||||
"Your vehicle tax for registration number is due on date. Renew online at www.gov.uk/vehicle-tax",
|
||||
"+44 7700 900 306"
|
||||
) }}
|
||||
{{ sms_message(
|
||||
"Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax",
|
||||
name="Reminder",
|
||||
input_name="template",
|
||||
input_index=1
|
||||
) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user