Merge pull request #428 from alphagov/better-choose-template

Make choose template page clearer

app/templates/components/email-message.html

@@ -31,8 +31,10 @@
         </tbody>
       </table>
     {% endif %}
-    <div class="email-message-body">
+    <div class="email-message-body" data-module="expand-collapse">
+      <div class="email-message-body-wrapper collapsed">
       {{ body|nl2br }}
+      </div>
     </div>
   </div>
 {% endmacro %}

app/templates/components/sms-message.html

@@ -16,7 +16,7 @@
         {{ from }}
       </span>
     {% endif %}
-    {{ body }}
+    {{ body|nl2br }}
   </div>
   {% if recipient %}
     <p class="sms-message-recipient">

app/templates/main_nav.html

@@ -2,35 +2,25 @@
   <h2 class="navigation-service-name">
     <a href="{{ url_for('.service_dashboard', service_id=current_service.id) }}">{{ current_service.name }}</a>
   </h2>
-  {% if current_user.has_permissions(['view_activity'], admin_override=True) %}
   <ul>
+  {% if current_user.has_permissions(['view_activity'], admin_override=True) %}
     <li><a href="{{ url_for('.view_notifications', service_id=current_service.id, page=1) }}">Activity</a></li>
-  </ul>
   {% endif %}
   {% if current_user.has_permissions(['view_activity', 'manage_templates', 'manage_api_keys'], admin_override=True, any_=True) %}
-  <ul>
     <li><a href="{{ url_for('.choose_template', service_id=current_service.id, template_type='sms') }}">Text message templates</a></li>
     <li><a href="{{ url_for('.choose_template', service_id=current_service.id, template_type='email') }}">Email templates</a></li>
-  </ul>
   {% endif %}
   {% if current_user.has_permissions(['manage_users', 'manage_settings'], admin_override=True) %}
-  <ul>
     <li><a href="{{ url_for('.manage_users', service_id=current_service.id) }}">Team members</a></li>
     <li><a href="{{ url_for('.service_settings', service_id=current_service.id) }}">Settings</a></li>
-  </ul>
   {% elif current_user.has_permissions(['view_activity']) %}
-  <ul>
     <li><a href="{{ url_for('.manage_users', service_id=current_service.id) }}">Team members</a></li>
-  </ul>
   {% endif %}
   {% if current_user.has_permissions(['manage_api_keys']) %}
-  <ul>
     <li><a href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a></li>
-  </ul>
   {% endif %}
   {% if current_user.has_permissions(admin_override=True) %}
-    <ul>
-      <li><a href="{{ url_for('.show_all_services') }}"> List all services </a></li>
-    </ul>
+    <li><a href="{{ url_for('.show_all_services') }}"> List all services </a></li>
   {% endif %}
+  </ul>
 </nav>

app/templates/views/api-keys.html

@@ -22,7 +22,7 @@
     developer documentation</a>.
   </p>
 
-  <h2 class="api-key-name">
+  <h2 class="heading-medium">
     Service ID
   </h2>
   <p class="api-key-key">
@@ -33,7 +33,6 @@
     keys,
     empty_message="You haven’t created any API keys yet",
     caption="API keys",
-    caption_visible=False,
     field_headings=['Key name', hidden_field_heading('Action')]
   ) %}
     {% call field() %}

app/templates/views/check.html

@@ -74,7 +74,7 @@
   {% call(item, row_number) list_table(
     recipients.initial_annotated_rows_with_errors if rows_have_errors else recipients.initial_annotated_rows,
     caption=original_file_name,
-    field_headings=['1'] + recipients.column_headers_with_placeholders_highlighted
+    field_headings=['1'] + recipients.column_headers
   ) %}
     {{ index_field(item.index + 2) }}
     {% for column in recipients.column_headers %}

app/templates/views/choose-template.html

@@ -43,25 +43,15 @@
         <div class="column-two-thirds">
           {% if 'email' == template_type %}
             {{ email_message(
-              template.subject,
+              None,
               template.formatted_as_markup,
               name=template.name,
-              edit_link=(
-                url_for(".edit_service_template", service_id=current_service.id, template_id=template.id)
-                if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) else
-                None
-              )
             ) }}
           {% elif 'sms' == template_type %}
             {{ sms_message(
-                template.formatted_as_markup,
-                name=template.name,
-                edit_link=(
-                  url_for(".edit_service_template", service_id=current_service.id, template_id=template.id)
-                  if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) else
-                  None
-                )
-              ) }}
+              template.formatted_as_markup,
+              name=template.name
+            ) }}
           {% endif %}
         </div>
         <div class="column-one-third">
@@ -73,6 +63,9 @@
             {% if current_user.has_permissions(permissions=['manage_api_keys']) %}
               <a href="{{ url_for(".send_from_api", service_id=current_service.id, template_id=template.id) }}">API integration</a>
             {% endif %}
+            {% if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) %}
+              <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}">Edit template</a>
+            {% endif %}
           </div>
         </div>
       {% endfor %}

app/templates/views/send.html

@@ -28,7 +28,7 @@
     ) }}
   {% endif %}
 
-  <p>
+  <h2 class="heading-medium">
     You need
     {{ template.placeholders|length + 1 }}
     {% if template.placeholders %}
@@ -37,13 +37,13 @@
       column
     {% endif %}
     in your file, like this:
-  </p>
+  </h2>
 
   {% call(item, row_number) list_table(
     example,
     caption="Example",
     caption_visible=False,
-    field_headings=['1'] + [recipient_column] + template.placeholders|list
+    field_headings=['1'] + [recipient_column] + template.placeholders_as_markup|list
   ) %}
     {{ index_field(row_number) }}
     {% for column in item %}
@@ -51,7 +51,7 @@
     {% endfor %}
   {% endcall %}
 
-  <p class="bottom-gutter">
+  <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>