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

Make choose template page clearer

app/assets/javascripts/expandCollapse.js

@@ -0,0 +1,41 @@
+(function(Modules) {
+  "use strict";
+
+  Modules.ExpandCollapse = function() {
+
+    this.start = function(component) {
+
+      this.$component = $(component)
+        .append(`
+          <div class='toggle' tabindex='0'>...<span class='visually-hidden'>show full email</span></div>
+        `)
+        .addClass('collapsed');
+
+      this.$toggle = this.$component.find('.toggle');
+
+      this.$toggle
+        .on(
+          "click",
+          ".toggle",
+          this.change
+        )
+        .on("keydown", this.filterKeyPresses([32, 13], this.change));
+
+    };
+
+    this.filterKeyPresses = (keys, callback) => function(event) {
+
+      if (keys.indexOf(event.keyCode)) return;
+
+      event.preventDefault();
+      callback();
+
+    };
+
+    this.change = () => this.toggleCollapsed() && this.$toggle.remove();
+
+    this.toggleCollapsed = () => this.$component.toggleClass('collapsed');
+
+  };
+
+})(window.GOVUK.Modules);

app/assets/stylesheets/components/email-message.scss

@@ -3,7 +3,7 @@
   margin-bottom: $gutter;
 
   &-name {
-    @include bold-19;
+    @include bold-24;
     margin: 20px 0 10px 0;
   }
 
@@ -36,13 +36,64 @@
   }
 
   &-body {
+    
     width: 100%;
     box-sizing: border-box;
     padding: $gutter-half 0 0 0;
-    margin: 0 0 $gutter 0;
+    margin: 0 0 $gutter * 1.5 0;
     clear: both;
     border-top: 1px solid $border-colour;
     border-bottom: 1px solid $border-colour;
+    position: relative;
+
+    &-wrapper {
+
+      .collapsed & {
+        max-height: 92px;
+        overflow: hidden;
+      }
+
+    }
+
+    .toggle {
+
+      position: absolute;
+      left: 50%;
+      bottom: -18px;
+      height: 25px;
+      display: inline-block;
+      padding: 0;
+      margin: 0 0 0 -30px;
+      line-height: 12px;
+      font-size: 30px;
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-align: center;
+      cursor: pointer;
+      width: 60px;
+      text-decoration: none;
+      background: $grey-1;
+      color: $white;
+      border-style: solid;
+      border-width: 3px;
+      border-colour: $white;
+      border-radius: 6px;
+      box-shadow: 0 0 0 1px rgba($white, 0.5);
+
+      &:hover {
+        background: $link-hover-colour;
+      }
+
+      &:focus,
+      &:active {
+        background: $yellow;
+        border-color: $white;
+        color: $text-colour;
+        outline: none;
+      }
+
+    }
+
   }
 
 }

app/assets/stylesheets/components/navigation.scss

@@ -1,6 +1,6 @@
 .navigation {
 
-  padding: 20px 0 0 0;
+  padding: $gutter-two-thirds $gutter-half 0 0;
 
   ul,
   h2 {
@@ -9,11 +9,6 @@
     list-style-type: none;
   }
 
-  ul {
-    border-bottom: 1px solid $border-colour;
-    padding: 0 0 10px 0;
-  }
-
   h2 {
     font-weight: bold;
     margin-bottom: 10px;

app/assets/stylesheets/components/sms-message.scss

@@ -1,5 +1,6 @@
 %sms-message-wrapper,
 .sms-message-wrapper {
+
   width: 100%;
   box-sizing: border-box;
   padding: $gutter-half;
@@ -9,6 +10,15 @@
   white-space: normal;
   margin: 0 0 $gutter 0;
   clear: both;
+
+  p {
+    margin: 0;
+  }
+
+  p + p {
+    margin-top: 20px;
+  }
+
 }
 
 .sms-message-wrapper-with-radio {
@@ -24,7 +34,7 @@
 }
 
 .sms-message-name {
-  @include bold-19;
+  @include bold-24;
   margin: 20px 0 10px 0;
 }
 
@@ -45,6 +55,12 @@
   a {
     display: block;
     margin-bottom: 5px;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+    
   }
 
 }

app/assets/stylesheets/components/table.scss

@@ -108,6 +108,7 @@
   @include core-16;
   color: $secondary-text-colour;
   margin-top: -20px;
+  margin-bottom: $gutter * 1.5;
   border-bottom: 1px solid $border-colour;
   padding-bottom: 10px;
   text-align: center;

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>
-      <li><a href="{{ url_for('.show_all_services') }}"> List all services </a></li>
-    </ul>
   {% 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,
+              template.formatted_as_markup,
-                name=template.name,
+              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
-                )
-              ) }}
           {% 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>
 

gulpfile.babel.js

@@ -58,6 +58,7 @@ gulp.task('javascripts', () => gulp
     paths.src + 'javascripts/highlightTags.js',
     paths.src + 'javascripts/fileUpload.js',
     paths.src + 'javascripts/updateContent.js',
+    paths.src + 'javascripts/expandCollapse.js',
     paths.src + 'javascripts/main.js'
   ])
   .pipe(plugins.babel({