From c3f347760ae93698940fd80831a716cc95c52727 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 1 Jul 2016 07:08:55 +0100
Subject: [PATCH] =?UTF-8?q?Don=E2=80=99t=20hide=20the=20example=20on=20the?=
 =?UTF-8?q?=20send=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 app/templates/views/send.html | 54 ++++++++++++++++-------------------
 1 file changed, 24 insertions(+), 30 deletions(-)

diff --git a/app/templates/views/send.html b/app/templates/views/send.html
index b66dfb639..67da7501f 100644
--- a/app/templates/views/send.html
+++ b/app/templates/views/send.html
@@ -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 %}