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/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/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss index d86d6a48d..77ebe5d0d 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 { @@ -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; + } + } } 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/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 %}

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 %} + 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/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/choose-template.html b/app/templates/views/choose-template.html index 655dbe03c..c3fd1fc00 100644 --- a/app/templates/views/choose-template.html +++ b/app/templates/views/choose-template.html @@ -43,25 +43,15 @@

    {% 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, - 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 %}
    @@ -73,6 +63,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 %} diff --git a/app/templates/views/send.html b/app/templates/views/send.html index f2dae8767..a5f63e08c 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,13 +37,13 @@ column {% endif %} in your file, like this: -

    +

    {% 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 %} -

    +

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