mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-05 19:03:30 -05:00
Add table of recipients
Uses an adapted version of the 'summary table' pattern from Digital Marketplace frontend toolkit: http://alphagov.github.io/digitalmarketplace-frontend-toolkit/summary-table.html
This commit is contained in:
@@ -3,5 +3,5 @@
|
||||
background: $light-blue;
|
||||
color: $white;
|
||||
padding: 0 5px;
|
||||
box-shadow: inset 0 0 0 2px $panel-colour;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
7
app/assets/stylesheets/components/table.scss
Normal file
7
app/assets/stylesheets/components/table.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
.table {
|
||||
|
||||
&-heading {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -30,6 +30,7 @@
|
||||
@import "components/sms-message";
|
||||
@import "components/placeholder";
|
||||
@import "components/template-picker";
|
||||
@import "components/table";
|
||||
|
||||
// Break this uq
|
||||
// TODO: break this up into components
|
||||
@import "app";
|
||||
|
||||
@@ -68,7 +68,13 @@ def sendsms():
|
||||
def checksms():
|
||||
return render_template(
|
||||
'views/check-sms.html',
|
||||
recipient_count=159,
|
||||
recipients=[
|
||||
{'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '25 December 2015'},
|
||||
{'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '25 December 2015'},
|
||||
{'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '25 December 2015'},
|
||||
{'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '25 December 2015'},
|
||||
{'phone': "+44 7815838437", 'registration': 'LC12 BFL', 'date': '25 December 2015'}
|
||||
],
|
||||
message_template="""
|
||||
Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)).
|
||||
Tax your vehicle at www.gov.uk/vehicle-tax
|
||||
|
||||
3
app/templates/components/placeholder.html
Normal file
3
app/templates/components/placeholder.html
Normal file
@@ -0,0 +1,3 @@
|
||||
{% macro placeholder(variable) %}
|
||||
<span class='placeholder'>{{variable}}</span>
|
||||
{% endmacro %}
|
||||
39
app/templates/components/table.html
Normal file
39
app/templates/components/table.html
Normal file
@@ -0,0 +1,39 @@
|
||||
{% macro table(items, caption='', field_headings='', field_headings_visible=True) -%}
|
||||
<table class="table">
|
||||
<caption class="heading-medium table-heading">
|
||||
{{ caption }}
|
||||
</caption>
|
||||
<thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
|
||||
<tr>
|
||||
{% for field_heading in field_headings %}
|
||||
<th scope="col" class="table-field-heading{% if loop.first %}-first{% endif %}">
|
||||
{% if field_headings_visible %}
|
||||
{{ field_heading }}
|
||||
{% else %}
|
||||
<span class="visuallyhidden">{{ field_heading }}</span>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% if items %}
|
||||
{% for item in items %}
|
||||
<tr class="table-row">
|
||||
{{ caller(item) }}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p class="table-no-content">
|
||||
{{ empty_message }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
{%- endmacro %}
|
||||
|
||||
{% macro field(first=False, wide=False, action=False) -%}
|
||||
<td class="table-field{% if first %}-first{% endif %}{% if first and wide %}-wider{% endif %}{% if action %}-with-action{% endif %}">
|
||||
<span>{{ caller() }}</span>
|
||||
</td>
|
||||
{%- endmacro %}
|
||||
@@ -1,22 +1,37 @@
|
||||
{% extends "admin_template.html" %}
|
||||
{% from "components/sms-message.html" import sms_message %}
|
||||
{% from "components/table.html" import table, field %}
|
||||
{% from "components/placeholder.html" import placeholder %}
|
||||
|
||||
{% block page_title %}
|
||||
GOV.UK Notify | Send text messages
|
||||
GOV.UK Notify | Send text messages
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="grid-row">
|
||||
<div class="column-two-thirds">
|
||||
<h1 class="heading-xlarge">Send text messages</h1>
|
||||
<div class="grid-row">
|
||||
<div class="column-two-thirds">
|
||||
<h1 class="heading-xlarge">Send text messages</h1>
|
||||
|
||||
{{ sms_message(message_template) }}
|
||||
<h2 class="heading-medium">Check and confirm</h2>
|
||||
{{ sms_message(message_template) }}
|
||||
|
||||
<p>
|
||||
<a class="button" href="/jobs/job" role="button">Send {{recipient_count}} text messages</a>
|
||||
</p>
|
||||
<p>
|
||||
<a class="button" href="/jobs/job" role="button">Send {{recipients|length}} text messages</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% call(item) table(
|
||||
recipients,
|
||||
caption="Preview of the first 3 recipients",
|
||||
field_headings=[
|
||||
'Recipient', placeholder('registration number'), placeholder('date')
|
||||
]
|
||||
) %}
|
||||
{% call field() %}{{item.phone}}{% endcall %}
|
||||
{% call field() %}{{item.registration}}{% endcall %}
|
||||
{% call field() %}{{item.date}}{% endcall %}
|
||||
{% endcall %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -23,6 +23,10 @@
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<p>
|
||||
<a href="#">Create a new template</a>
|
||||
</p>
|
||||
|
||||
<h2 class="heading-medium">2. Add recipients</h2>
|
||||
|
||||
<p>
|
||||
|
||||
Reference in New Issue
Block a user