darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-08 20:43:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add polyfill for HTML5 <details> element

Browse Source 
The details element is fairly new. It doesn’t work in all browsers,
and isn’t keyboard/screenreader accessible even in some new browsers.

This commit adds the Polyfill script from GOV.UK elements[1] which
polyfills these features for browsers that don’t support them.

1. http://govuk-elements.herokuapp.com/typography/#typography-hidden-text
This commit is contained in:
Chris Hill-Scott
2016-05-17 14:46:34 +01:00
parent c6ab4d2c94
commit 2ba801ff73
3 changed files with 236 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
app/templates/views/send.html
View File

@@ -41,42 +41,46 @@
)}}
</div>
<details>
<summary>How to format your file</summary>
<details role="group">
<summary role="button" aria-controls="how-to-format-your-file" aria-expanded="false">
<span class="summary">How to format your file</span>
</summary>
<ul class="list list-bullet">
<li>
put one recipient per row
</li>
<li>
save or export your data as a
<acronym title="Comma Separated Values">CSV</acronym>,
<acronym title="Comma Separated Values">TSV</acronym>,
Open Document Spreadsheet (.ods)
or Microsoft Excel (.xls, .xlsx, .xlsm) file
</li>
</ul>
<div id="how-to-format-your-file" aria-hidden="true">
<ul class="list list-bullet">
<li>
put one recipient per row
</li>
<li>
save or export your data as a
<acronym title="Comma Separated Values">CSV</acronym>,
<acronym title="Comma Separated Values">TSV</acronym>,
Open Document Spreadsheet (.ods)
or Microsoft Excel (.xls, .xlsx, .xlsm) file
</li>
</ul>
<h2 class="heading-small">
Example file
</h2>
<h2 class="heading-small">
Example file
</h2>
{% call(item, row_number) list_table(
example,
caption="Example",
caption_visible=False,
field_headings=['1'] + [
'<span class="placeholder">{}</span>'.format(recipient_column)|safe
] + template.placeholders_as_markup|list
) %}
{{ index_field(row_number) }}
{% for column in item %}
{{ text_field(column) }}
{% endfor %}
{% endcall %}
<p class="table-show-more-link">
<a href="{{ url_for('.get_example_csv', service_id=current_service.id, template_id=template.id) }}">Download this example</a>
</p>
{% call(item, row_number) list_table(
example,
caption="Example",
caption_visible=False,
field_headings=['1'] + [
'<span class="placeholder">{}</span>'.format(recipient_column)|safe
] + template.placeholders_as_markup|list
) %}
{{ index_field(row_number) }}
{% for column in item %}
{{ text_field(column) }}
{% endfor %}
{% endcall %}
<p class="table-show-more-link">
<a href="{{ url_for('.get_example_csv', service_id=current_service.id, template_id=template.id) }}">Download this example</a>
</p>
</div>
</details>
{% endblock %}