From 3a5b76ce2a672ba5d42b4013a0274f64742eb5d7 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 11 Apr 2016 15:16:41 +0100 Subject: [PATCH] Truncate previews of email messages to ~3 lines MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 41 ++++++++++++++ .../stylesheets/components/email-message.scss | 55 ++++++++++++++++++- .../stylesheets/components/sms-message.scss | 8 ++- app/assets/stylesheets/components/table.scss | 1 + app/templates/components/email-message.html | 4 +- app/templates/views/choose-template.html | 2 +- app/templates/views/send.html | 2 +- gulpfile.babel.js | 1 + 8 files changed, 108 insertions(+), 6 deletions(-) create mode 100644 app/assets/javascripts/expandCollapse.js diff --git a/app/assets/javascripts/expandCollapse.js b/app/assets/javascripts/expandCollapse.js new file mode 100644 index 000000000..be1a0ab41 --- /dev/null +++ b/app/assets/javascripts/expandCollapse.js @@ -0,0 +1,41 @@ +(function(Modules) { + "use strict"; + + Modules.ExpandCollapse = function() { + + this.start = function(component) { + + this.$component = $(component) + .append(` +
...
+ `) + .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); diff --git a/app/assets/stylesheets/components/email-message.scss b/app/assets/stylesheets/components/email-message.scss index c8b9bbee3..6604495f2 100644 --- a/app/assets/stylesheets/components/email-message.scss +++ b/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; + } + + } + } } diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss index b4e00d9ce..77ebe5d0d 100644 --- a/app/assets/stylesheets/components/sms-message.scss +++ b/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; + } + } } diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss index fe6ff2016..ddb9c5eef 100644 --- a/app/assets/stylesheets/components/table.scss +++ b/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; diff --git a/app/templates/components/email-message.html b/app/templates/components/email-message.html index 4b0047651..616f6e9e1 100644 --- a/app/templates/components/email-message.html +++ b/app/templates/components/email-message.html @@ -31,8 +31,10 @@ {% endif %} -
+
{% endmacro %} diff --git a/app/templates/views/choose-template.html b/app/templates/views/choose-template.html index b73124ffb..083e55888 100644 --- a/app/templates/views/choose-template.html +++ b/app/templates/views/choose-template.html @@ -42,7 +42,7 @@
{% if 'email' == template_type %} {{ email_message( - template.subject, + None, template.formatted_as_markup, name=template.name, ) }} diff --git a/app/templates/views/send.html b/app/templates/views/send.html index 5ed9e7c2d..a5f63e08c 100644 --- a/app/templates/views/send.html +++ b/app/templates/views/send.html @@ -51,7 +51,7 @@ {% endfor %} {% endcall %} -

+

Download this example

diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 3606b418d..a6026fbe9 100644 --- a/gulpfile.babel.js +++ b/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({