From 686c4127cd7a1bf23c34123739c6ec0f89e38915 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Tue, 2 Feb 2016 13:38:39 +0000 Subject: [PATCH] Various tweaks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - remove black border from banner - make banners have internal columns - make nav 2/3rd width, 19px text and more spaced out - only show the ‘restricted mode’ banner where it’s needed - rename ‘restricted mode’ to ‘trial mode’ --- app/assets/stylesheets/app.scss | 21 ------ app/assets/stylesheets/components/banner.scss | 5 +- .../stylesheets/components/navigation.scss | 10 +-- app/main/views/dashboard.py | 2 +- app/templates/components/banner.html | 15 ++++- app/templates/views/api-keys.html | 6 ++ app/templates/views/manage-templates.html | 19 ++++-- app/templates/views/send-sms.html | 51 +++++++-------- app/templates/views/service_dashboard.html | 65 +++++++++++-------- app/templates/views/styleguide.html | 11 +++- app/templates/views/verify.html | 6 +- app/templates/withnav_template.html | 8 +-- tests/app/main/views/test_dashboard.py | 1 - tests/app/main/views/test_verify.py | 2 +- 14 files changed, 118 insertions(+), 104 deletions(-) diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index 229a7276a..64db8e310 100644 --- a/app/assets/stylesheets/app.scss +++ b/app/assets/stylesheets/app.scss @@ -1,26 +1,5 @@ // Extra CSS overlaying elements -.form-control-2-3, .form-control-1-4 { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - font-family: "nta", Arial, sans-serif; - font-size: 16px; - line-height: 1.25; - font-weight: 400; - text-transform: none; - padding: 4px; - background-color: #fff; - border: 2px solid #6f777b; -} - -@media (min-width: 641px) { - .form-control-2-3, .form-control-1-4 { - font-size: 19px; - line-height: 1.31579; - } -} - #global-header-bar { background-color: $red; } diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss index ca27acac0..18a4ae6db 100644 --- a/app/assets/stylesheets/components/banner.scss +++ b/app/assets/stylesheets/components/banner.scss @@ -8,7 +8,7 @@ display: block; padding: $gutter-half; margin: $gutter-half 0 $gutter 0; - text-align: center; + text-align: left; position: relative; } @@ -16,7 +16,7 @@ .banner-with-tick { @extend %banner; - padding: $gutter-half $gutter; + padding: $gutter-half ($gutter + $gutter-half); &:before { @include core-24; @@ -58,7 +58,6 @@ background: $yellow; color: $text-colour; text-align: left; - border: 5px solid $text-colour; font-weight: bold; a:link, a:visited { diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss index 8c384cdbd..82032dea9 100644 --- a/app/assets/stylesheets/components/navigation.scss +++ b/app/assets/stylesheets/components/navigation.scss @@ -1,13 +1,13 @@ .navigation { - padding: 3px 0 0 0; + padding: 20px 0 0 0; ul, h2 { - @include core-16; + @include core-19; border-bottom: 1px solid $border-colour; - margin: 10px 20px 0 0; + margin: 10px 20px 15px 0; list-style-type: none; - padding: 0 0 8px 0; + padding: 0 0 10px 0; } h2 { @@ -15,7 +15,7 @@ } li { - margin: 7px 0 0 0; + margin: 10px 0 0 0; } a:link, diff --git a/app/main/views/dashboard.py b/app/main/views/dashboard.py index e3720a444..9c25fb21f 100644 --- a/app/main/views/dashboard.py +++ b/app/main/views/dashboard.py @@ -30,5 +30,5 @@ def service_dashboard(service_id): jobs=jobs, free_text_messages_remaining='25,000', spent_this_month='0.00', - has_templates=bool(len(templates)), + template_count=len(templates), service_id=str(service_id)) diff --git a/app/templates/components/banner.html b/app/templates/components/banner.html index 8adbfa5c6..74402779e 100644 --- a/app/templates/components/banner.html +++ b/app/templates/components/banner.html @@ -1,6 +1,19 @@ -{% macro banner(body, type=None, with_tick=False, delete_button=None) %} +{% macro banner(body, type=None, with_tick=False, delete_button=None, subhead=None) %}
+ {% if subhead %} +
+
+ {{ subhead }} +
+
+ {% endif %} + {{ body }} + + {% if subhead %} +
+
+ {% endif %} {% if delete_button %}
diff --git a/app/templates/views/api-keys.html b/app/templates/views/api-keys.html index 1ea1d7b0c..a08dcef86 100644 --- a/app/templates/views/api-keys.html +++ b/app/templates/views/api-keys.html @@ -22,6 +22,12 @@ developer documentation.

+ {{ banner( + 'You can only send notifications to yourself', + subhead='Trial mode', + type='info' + ) }} +

Service ID

diff --git a/app/templates/views/manage-templates.html b/app/templates/views/manage-templates.html index 0c4e9040f..32b1512bf 100644 --- a/app/templates/views/manage-templates.html +++ b/app/templates/views/manage-templates.html @@ -9,14 +9,19 @@ GOV.UK Notify | Manage templates {% block maincolumn_content %} +

Templates

+ + {{ banner( + 'Try sending a text message'.format( + url_for(".send_sms", service_id=service_id) + )|safe, + subhead='Next step', + type="tip" + )}} +
-

Templates

- -

- Add new template - {% for template in templates %} {% if template.get_field('template_type') == 'sms' %} {{ sms_message( @@ -35,6 +40,10 @@ GOV.UK Notify | Manage templates {% endif %} {% endfor %} +

+ Add new template +

+
diff --git a/app/templates/views/send-sms.html b/app/templates/views/send-sms.html index 408580744..b37e4f61e 100644 --- a/app/templates/views/send-sms.html +++ b/app/templates/views/send-sms.html @@ -10,37 +10,34 @@ {% block maincolumn_content %} -
-
-

Send text messages

-
- 1. Choose text message template - {% for template in templates %} - {{ sms_message( - template.content, name=template.name, input_name='template', input_index=template.id - ) }} - {% endfor %} -
+
+ 1. Choose text message template + {% for template in templates %} + {{ sms_message( + template.content, name=template.name, input_name='template', input_index=template.id + ) }} + {% endfor %} +
-

2. Add recipients

+

2. Add recipients

+ {{ banner( + 'You can only send notifications to yourself', + subhead='Trial mode', + type='info' + ) }} +

+ Upload a CSV file to add your recipients’ details. +

+

+ You can also download an example CSV. +

+

+ {{textbox(form.file)}} +

-

- Upload a CSV file to add your recipients’ details. -

-

- You can also download an example CSV. -

-

- {{textbox(form.file)}} -

- - {{ page_footer("Continue") }} - -
-
+ {{ page_footer("Continue") }}
- {% endblock %} diff --git a/app/templates/views/service_dashboard.html b/app/templates/views/service_dashboard.html index 3b53246ac..08450bcc1 100644 --- a/app/templates/views/service_dashboard.html +++ b/app/templates/views/service_dashboard.html @@ -8,15 +8,6 @@ {% block maincolumn_content %} - {% if not has_templates %} - {{ banner( - 'Add a template to start sending notifications'.format( - url_for(".add_service_template", service_id=service_id) - )|safe, - type="tip" - )}} - {% endif %} - - {% call(item) list_table( - [], - caption="Recent text messages", - empty_message='You haven’t sent any text messages yet', - field_headings=['Job', 'File', 'Time', 'Status'] - ) %} - {% call field() %} - {{ item.file }} + {% if not template_count %} + {{ banner( + 'Add a text message template'.format( + url_for(".add_service_template", service_id=service_id) + )|safe, + subhead='Get started', + type="tip" + )}} + {% else %} + {{ banner( + 'Try sending a text message'.format( + url_for(".send_sms", service_id=service_id) + )|safe, + subhead='Next step', + type="tip" + )}} + {% endif %} + + {% if [] %} + {% call(item) list_table( + [], + caption="Recent text messages", + empty_message='You haven’t sent any text messages yet', + field_headings=['Job', 'File', 'Time', 'Status'] + ) %} + {% call field() %} + {{ item.file }} + {% endcall %} + {% call field() %} + {{ item.job }} + {% endcall %} + {% call field() %} + {{ item.time }} + {% endcall %} + {% call field() %} + {{ item.status }} + {% endcall %} {% endcall %} - {% call field() %} - {{ item.job }} - {% endcall %} - {% call field() %} - {{ item.time }} - {% endcall %} - {% call field() %} - {{ item.status }} - {% endcall %} - {% endcall %} + {% endif %} {% endblock %} diff --git a/app/templates/views/styleguide.html b/app/templates/views/styleguide.html index 9c6783243..b62449140 100644 --- a/app/templates/views/styleguide.html +++ b/app/templates/views/styleguide.html @@ -35,15 +35,20 @@
{{ banner( - 'Your service is in restricted mode. You can only send notifications to yourself.', - 'info' + 'You can only send notifications to yourself', + type='info', + subhead='Restricted mode' ) }} {{ banner('You’re not allowed to do this', 'dangerous')}} {{ banner('Are you sure you want to delete?', 'dangerous', delete_button="Yes, delete this thing")}} - {{ banner('Send your first message'|safe, 'tip')}} + {{ banner( + 'Send your first message'|safe, + subhead='Get started', + type='tip' + )}}

Big number

diff --git a/app/templates/views/verify.html b/app/templates/views/verify.html index 850a92a9d..b04726c16 100644 --- a/app/templates/views/verify.html +++ b/app/templates/views/verify.html @@ -12,16 +12,16 @@ GOV.UK Notify | Confirm email address and mobile number

Activate your account

-

We've sent you confirmation codes by email and text message. You need to enter both codes here.

+

We’ve sent you confirmation codes by email and text message. You need to enter both codes here.

{{ textbox(form.email_code) }}

- I haven't received an email + I haven’t received an email

{{ textbox(form.sms_code) }}

- I haven't received a text + I haven’t received a text

{{ page_footer("Continue") }}
diff --git a/app/templates/withnav_template.html b/app/templates/withnav_template.html index 1201801b3..73ce81224 100644 --- a/app/templates/withnav_template.html +++ b/app/templates/withnav_template.html @@ -2,14 +2,10 @@ {% block fullwidth_content %}
-
+
{% include "main_nav.html" %}
-
- {{ banner( - 'Your service is in restricted mode. You can only send notifications to yourself.', - 'info' - ) }} +
{% include 'flash_messages.html' %} {% block maincolumn_content %}{% endblock %}
diff --git a/tests/app/main/views/test_dashboard.py b/tests/app/main/views/test_dashboard.py index 1c969c3bc..7a2a3ad67 100644 --- a/tests/app/main/views/test_dashboard.py +++ b/tests/app/main/views/test_dashboard.py @@ -16,5 +16,4 @@ def test_should_show_recent_jobs_on_dashboard(app_, assert response.status_code == 200 text = response.get_data(as_text=True) - assert 'You haven’t sent any text messages yet' in text assert 'Test Service' in text diff --git a/tests/app/main/views/test_verify.py b/tests/app/main/views/test_verify.py index 11a9e6adf..48240e307 100644 --- a/tests/app/main/views/test_verify.py +++ b/tests/app/main/views/test_verify.py @@ -17,7 +17,7 @@ def test_should_return_verify_template(app_, response = client.get(url_for('main.verify')) assert response.status_code == 200 assert ( - "We've sent you confirmation codes by email and text message." + "We’ve sent you confirmation codes by email and text message." " You need to enter both codes here.") in response.get_data(as_text=True)