Don’t hide the example on the send page

People missed this example because it was hidden in a `<details>`
element. Perhaps the wording of the link wasn’t ideal, but we’ve
tried two different varations of it (https://github.com/alphagov/notifications-admin/pull/640)

Better not to hide things, than try to think of some text which will
make people want to show them.

Also adds some headings to chunk up this page a bit.
This commit is contained in:
Chris Hill-Scott
2016-07-01 07:08:55 +01:00
parent 8c05c08249
commit c3f347760a

View File

@@ -39,36 +39,30 @@
)}}
</div>
<details role="group">
<summary role="button" aria-controls="how-to-format-your-file" aria-expanded="false">
<span class="summary">See an example</span>
</summary>
<h2 class="heading-medium">Your file needs to look like this example</h2>
<div class="spreadsheet">
{% call(item, row_number) list_table(
example,
caption="Example",
caption_visible=False,
field_headings=[''] + column_headings
) %}
{{ index_field(row_number - 1) }}
{% for column in item %}
{{ text_field(column) }}
{% endfor %}
{% endcall %}
</div>
<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 id="how-to-format-your-file" aria-hidden="true">
<div class="spreadsheet">
{% call(item, row_number) list_table(
example,
caption="Example",
caption_visible=False,
field_headings=[''] + column_headings
) %}
{{ index_field(row_number - 1) }}
{% for column in item %}
{{ text_field(column) }}
{% endfor %}
{% endcall %}
</div>
<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>
<p>Save the file as</p>
<ul class="list list-bullet">
<li>.<acronym title="Comma Separated Values">csv</acronym></li>
<li>.<acronym title="Comma Separated Values">tsv</acronym></li>
<li>Open Document Spreadsheet (.ods)</li>
<li>or Microsoft Excel (.xls, .xlsx, .xlsm)</li>
</p>
</div>
</details>
<h2 class="heading-medium">Accepted file formats</h2>
<ul class="list list-bullet">
<li>.<acronym title="Comma Separated Values">csv</acronym></li>
<li>.<acronym title="Comma Separated Values">tsv</acronym></li>
<li>Open Document Spreadsheet (.ods)</li>
<li>Microsoft Excel (.xls, .xlsx, .xlsm)</li>
</p>
{% endblock %}