diff --git a/app/assets/images/tour/2.svg b/app/assets/images/tour/2.svg new file mode 100644 index 000000000..05987a49d --- /dev/null +++ b/app/assets/images/tour/2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/tour/3.svg b/app/assets/images/tour/3.svg new file mode 100644 index 000000000..52d0f0146 --- /dev/null +++ b/app/assets/images/tour/3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/tour/4.svg b/app/assets/images/tour/4.svg new file mode 100644 index 000000000..ba12e62a2 --- /dev/null +++ b/app/assets/images/tour/4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss index 822392b34..16e6b8868 100644 --- a/app/assets/stylesheets/components/banner.scss +++ b/app/assets/stylesheets/components/banner.scss @@ -131,7 +131,8 @@ } - img { + img, + source { max-width: 100%; display: block; } diff --git a/app/main/views/tour.py b/app/main/views/tour.py index 1074ce0bd..a1a98300f 100644 --- a/app/main/views/tour.py +++ b/app/main/views/tour.py @@ -4,11 +4,20 @@ from flask_login import login_required from app.main import main +headings = [ + 'Trial mode', + 'Start with templates', + 'Add recipients', + 'Send your messages', +] + + @main.route("/services//tour/") @login_required def tour(service_id, page): return render_template( 'views/tour/{}.html'.format(page), current_page=page, - next_page=(page + 1) + next_page=(page + 1), + heading=headings[page - 1] ) diff --git a/app/templates/views/tour/1.html b/app/templates/views/tour/1.html index c25116f6a..bd2d6d0db 100644 --- a/app/templates/views/tour/1.html +++ b/app/templates/views/tour/1.html @@ -10,7 +10,7 @@ {% block maincolumn_content %} {% call banner_wrapper(type='tour') %} -

Trial mode

+

{{ heading }}

To start off with, you can only send messages to yourself.

diff --git a/app/templates/views/tour/2.html b/app/templates/views/tour/2.html index ecad22e6a..d3bfe1b2f 100644 --- a/app/templates/views/tour/2.html +++ b/app/templates/views/tour/2.html @@ -10,16 +10,24 @@ {% block maincolumn_content %} {% call banner_wrapper(type='tour') %} -

Start with templates

+

{{ heading }}

Set up a template like this:

- + + A template for a text message with placeholders for the recipients name, document and date + alt="A screenshot of a spreadsheet containing data about three people" + > +

Next diff --git a/app/templates/views/tour/3.html b/app/templates/views/tour/3.html index 1cef34c1c..2e71ead07 100644 --- a/app/templates/views/tour/3.html +++ b/app/templates/views/tour/3.html @@ -10,16 +10,24 @@ {% block maincolumn_content %} {% call banner_wrapper(type='tour') %} -

Add recipients

+

{{ heading }}

Add recipients by uploading a .csv spreadsheet:

- + + A screenshot of a spreadsheet containing data about three people + > +

Developers, you can add data automatically using an API diff --git a/app/templates/views/tour/4.html b/app/templates/views/tour/4.html index f1284d3ef..f1d5b0145 100644 --- a/app/templates/views/tour/4.html +++ b/app/templates/views/tour/4.html @@ -4,25 +4,33 @@ {% from "components/banner.html" import banner_wrapper %} {% block page_title %} - {{heading}} – GOV.UK Notify + {{ heading }} – GOV.UK Notify {% endblock %} {% block maincolumn_content %} {% call banner_wrapper(type='tour') %} -

Send your messages

+

{{ heading }}

Notify merges your data with the template and sends the messages

Next - + + + > + {% endcall %} {% endblock %}