mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-08 23:03:13 -04: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;
|
background: $light-blue;
|
||||||
color: $white;
|
color: $white;
|
||||||
padding: 0 5px;
|
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/sms-message";
|
||||||
@import "components/placeholder";
|
@import "components/placeholder";
|
||||||
@import "components/template-picker";
|
@import "components/template-picker";
|
||||||
|
@import "components/table";
|
||||||
|
|
||||||
// Break this uq
|
// TODO: break this up into components
|
||||||
@import "app";
|
@import "app";
|
||||||
|
|||||||
@@ -68,7 +68,13 @@ def sendsms():
|
|||||||
def checksms():
|
def checksms():
|
||||||
return render_template(
|
return render_template(
|
||||||
'views/check-sms.html',
|
'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="""
|
message_template="""
|
||||||
Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)).
|
Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)).
|
||||||
Tax your vehicle at www.gov.uk/vehicle-tax
|
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" %}
|
{% extends "admin_template.html" %}
|
||||||
{% from "components/sms-message.html" import sms_message %}
|
{% from "components/sms-message.html" import sms_message %}
|
||||||
|
{% from "components/table.html" import table, field %}
|
||||||
|
{% from "components/placeholder.html" import placeholder %}
|
||||||
|
|
||||||
{% block page_title %}
|
{% block page_title %}
|
||||||
GOV.UK Notify | Send text messages
|
GOV.UK Notify | Send text messages
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
<div class="grid-row">
|
<div class="grid-row">
|
||||||
<div class="column-two-thirds">
|
<div class="column-two-thirds">
|
||||||
<h1 class="heading-xlarge">Send text messages</h1>
|
<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>
|
<p>
|
||||||
<a class="button" href="/jobs/job" role="button">Send {{recipient_count}} text messages</a>
|
<a class="button" href="/jobs/job" role="button">Send {{recipients|length}} text messages</a>
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
</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 %}
|
{% endblock %}
|
||||||
|
|||||||
@@ -23,6 +23,10 @@
|
|||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<a href="#">Create a new template</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
<h2 class="heading-medium">2. Add recipients</h2>
|
<h2 class="heading-medium">2. Add recipients</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
Reference in New Issue
Block a user