Truncate previews of email messages to ~3 lines

Emails can get very long.

When you’re trying to do other things on the page this results in a lot
of scrolling.

This commit truncates email messages to about 3 lines, and adds a JS
toggle which reveal the full contents of the email.

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/sms-message.scss

@@ -34,7 +34,7 @@
 }
 
 .sms-message-name {
-  @include bold-19;
+  @include bold-24;
   margin: 20px 0 10px 0;
 }
 
@@ -55,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/views/choose-template.html

@@ -42,7 +42,7 @@
         <div class="column-two-thirds">
           {% if 'email' == template_type %}
             {{ email_message(
-              template.subject,
+              None,
               template.formatted_as_markup,
               name=template.name,
             ) }}

app/templates/views/send.html

@@ -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({