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;