From 91565afa6bd529588ede0d426920e9a9e21e23a3 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 11 Apr 2016 10:38:43 +0100 Subject: [PATCH 1/6] Change display of placeholder columns MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On the send page, it should hightlight the placeholders so they match what you need to put in the CSV file. On the check page, they should not be highlighted, to match what’s in the (rendered) template. --- app/templates/views/check.html | 2 +- app/templates/views/send.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/templates/views/check.html b/app/templates/views/check.html index 255a84dfd..1822bd72d 100644 --- a/app/templates/views/check.html +++ b/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 %} diff --git a/app/templates/views/send.html b/app/templates/views/send.html index f2dae8767..93e574506 100644 --- a/app/templates/views/send.html +++ b/app/templates/views/send.html @@ -43,7 +43,7 @@ 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 %} From e526852f5371a649a376fd0af2a5bcf44a34323c Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 11 Apr 2016 10:40:32 +0100 Subject: [PATCH 2/6] Remove keylines from nav MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We have lots of keylines in our pages, eg tables, email message previews This makes the pages look quite cluttered, especially because the keylines don’t always align. I think it looks much cleaner without the keylines in the nav, and we have few enough nav items that we don’t need to chunk them up. --- .../stylesheets/components/navigation.scss | 7 +------ app/templates/main_nav.html | 16 +++------------- 2 files changed, 4 insertions(+), 19 deletions(-) diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss index d0093bd11..232c334c8 100644 --- a/app/assets/stylesheets/components/navigation.scss +++ b/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; diff --git a/app/templates/main_nav.html b/app/templates/main_nav.html index 705c7ec4a..923aaa781 100644 --- a/app/templates/main_nav.html +++ b/app/templates/main_nav.html @@ -2,35 +2,25 @@

{{ current_service.name }}

- {% if current_user.has_permissions(['view_activity'], admin_override=True) %} {% endif %} {% if current_user.has_permissions(['view_activity', 'manage_templates', 'manage_api_keys'], admin_override=True, any_=True) %} - {% endif %} {% if current_user.has_permissions(['manage_users', 'manage_settings'], admin_override=True) %} - {% elif current_user.has_permissions(['view_activity']) %} - {% endif %} {% if current_user.has_permissions(['manage_api_keys']) %} - {% endif %} {% if current_user.has_permissions(admin_override=True) %} - +
  • List all services
    • {% endif %} + From 30e1e67c17af5f919c1fc22574021330b911e511 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 11 Apr 2016 10:43:59 +0100 Subject: [PATCH 3/6] Make heading sizes more consistent MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On: - the API keys page - the ‘send’ page There are some inconsistently small heading sizes. This commit makes them consistent with the heading sizes on other pages. --- app/templates/views/api-keys.html | 3 +-- app/templates/views/send.html | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/app/templates/views/api-keys.html b/app/templates/views/api-keys.html index fd59b9f79..eca7175cf 100644 --- a/app/templates/views/api-keys.html +++ b/app/templates/views/api-keys.html @@ -22,7 +22,7 @@ developer documentation.

    -

    +

    Service ID

    @@ -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() %} diff --git a/app/templates/views/send.html b/app/templates/views/send.html index 93e574506..5ed9e7c2d 100644 --- a/app/templates/views/send.html +++ b/app/templates/views/send.html @@ -28,7 +28,7 @@ ) }} {% endif %} -

    +

    You need {{ template.placeholders|length + 1 }} {% if template.placeholders %} @@ -37,7 +37,7 @@ column {% endif %} in your file, like this: -

    +

    {% call(item, row_number) list_table( example, From 6bfb7914e25eeef6cff8f8cc8037dae3cedc614e Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 11 Apr 2016 10:51:32 +0100 Subject: [PATCH 4/6] Respect linebreaks in templates If a user puts a linebreak in an SMS template then the recipient will see these linebreaks on their phone. So when we show a preview of an SMS template, it should have linebreaks in it. --- app/assets/stylesheets/components/sms-message.scss | 10 ++++++++++ app/templates/components/sms-message.html | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss index d86d6a48d..b4e00d9ce 100644 --- a/app/assets/stylesheets/components/sms-message.scss +++ b/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 { diff --git a/app/templates/components/sms-message.html b/app/templates/components/sms-message.html index 04d334d97..4d0e1fdd7 100644 --- a/app/templates/components/sms-message.html +++ b/app/templates/components/sms-message.html @@ -16,7 +16,7 @@ {{ from }} {% endif %} - {{ body }} + {{ body|nl2br }} {% if recipient %}

    From 33e1b2679fceb13c890826735d95661c2e073b63 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 11 Apr 2016 15:18:29 +0100 Subject: [PATCH 5/6] =?UTF-8?q?Move=20=E2=80=98edit=20template=E2=80=99=20?= =?UTF-8?q?to=20its=20own=20link?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It’s probably clearer to have it labelled explicitly, rather than have people infer that they should click the title of a template to edit it. --- app/templates/views/choose-template.html | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/app/templates/views/choose-template.html b/app/templates/views/choose-template.html index 15d1ba883..b73124ffb 100644 --- a/app/templates/views/choose-template.html +++ b/app/templates/views/choose-template.html @@ -45,22 +45,12 @@ template.subject, 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 %}

    @@ -72,6 +62,9 @@ {% if current_user.has_permissions(permissions=['manage_api_keys']) %} API integration {% endif %} + {% if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) %} + Edit template + {% endif %}
    {% endfor %} From 3a5b76ce2a672ba5d42b4013a0274f64742eb5d7 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 11 Apr 2016 15:16:41 +0100 Subject: [PATCH 6/6] 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({