From c6ab4d2c941740c700150a6a003e2e9526f8ac0a Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 17 May 2016 09:18:23 +0100
Subject: [PATCH] Hide the instructions for formatting a CSV

> On the send pages, we have a call to action in the middle of the
> page with lots of words and placeholder buttony looking things
> above and below it....
>
> You'll also see this every time you use this page, even though you
> probably get it after a single use.
>
> So let's wrap it up under a usefully titled (?) help link that
> expands to reveal all the things.

This commit implements the above.

It also rewords the messaging to talk about various spreadsheet formats,
not just CSV.
---
 app/assets/stylesheets/app.scss | 11 ++++--
 app/templates/views/send.html   | 66 +++++++++++++++++----------------
 2 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss
index a0409dff2..b47b576be 100644
--- a/app/assets/stylesheets/app.scss
+++ b/app/assets/stylesheets/app.scss
@@ -61,11 +61,11 @@ a {
   }
 
   > .grid-row  {
-    
+
     .heading-large {
       margin-top: $gutter;
     }
-    
+
   }
 
 }
@@ -104,7 +104,7 @@ td {
 #footer {
 
   .footer-categories {
-    
+
     @extend %site-width-container;
 
     &-wrapper {
@@ -148,3 +148,8 @@ a[rel='external'] {
   }
 
 }
+
+details summary {
+  text-decoration: underline;
+  margin-bottom: $gutter-half;
+}
diff --git a/app/templates/views/send.html b/app/templates/views/send.html
index e296460a4..0232824ed 100644
--- a/app/templates/views/send.html
+++ b/app/templates/views/send.html
@@ -35,44 +35,48 @@
   <div class="page-footer bottom-gutter">
     {{file_upload(
       form.file,
-      button_text='Upload a .csv file',
+      button_text='Upload a file of recipients',
       alternate_link=url_for(".send_test", service_id=current_service.id, template_id=template.id),
       alternate_link_text='send yourself a test'
     )}}
   </div>
 
-  <h2 class="heading-medium" style="margin: 45px 0 15px 0">
-    Example file
-  </h2>
+<details>
+  <summary>How to format your file</summary>
 
-  {% 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 %}
+    <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>
 
-  <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>
+    <h2 class="heading-small">
+      Example file
+    </h2>
 
-  <h2 class="heading-medium">
-    Formatting
-  </h2>
-  <ul class="list list-bullet">
-    <li>
-      put one recipient per row
-    </li>
-    <li>
-      save or export your data as a .csv (comma separated values) file
-    </li>
-  </ul>
+    {% 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>
+  </details>
 
 {% endblock %}