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:
Chris Hill-Scott
2015-12-10 17:54:05 +00:00
parent c4df25c8db
commit dbc55e76b0
8 changed files with 87 additions and 12 deletions

View File

@@ -3,5 +3,5 @@
background: $light-blue;
color: $white;
padding: 0 5px;
box-shadow: inset 0 0 0 2px $panel-colour;
border-radius: 3px;
}

View File

@@ -0,0 +1,7 @@
.table {
&-heading {
text-align: left;
}
}

View File

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

View File

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

View File

@@ -0,0 +1,3 @@
{% macro placeholder(variable) %}
<span class='placeholder'>{{variable}}</span>
{% endmacro %}

View 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 %}

View File

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

View File

@@ -23,6 +23,10 @@
</div>
{% endfor %}
<p>
<a href="#">Create a new template</a>
</p>
<h2 class="heading-medium">2. Add recipients</h2>
<p>