From 47b86e70dfaa64c11eb7929cc9bc47bb267e80d3 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 4 Apr 2016 16:51:45 +0100 Subject: [PATCH 1/2] Use SVG images for tour SVG images will look sharper and scale more cleanly. However they are not supported on older browsers[1] > The element allows for fallback images when the browser > doesn't support a specified image format. `` is supported in the latest versions of Chrome, Firefox, IE (Edge), Safari and Android, so all these browsers will get the SVG version. Older browsers will fall back to the PNG version. [1] http://caniuse.com/#feat=svg [2] https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-svg-as-img-picture [3] http://caniuse.com/#feat=SVG --- app/assets/images/tour/2.svg | 1 + app/assets/images/tour/3.svg | 1 + app/assets/images/tour/4.svg | 1 + app/assets/stylesheets/components/banner.scss | 3 ++- app/templates/views/tour/2.html | 14 +++++++++++--- app/templates/views/tour/3.html | 12 ++++++++++-- app/templates/views/tour/4.html | 12 ++++++++++-- 7 files changed, 36 insertions(+), 8 deletions(-) create mode 100644 app/assets/images/tour/2.svg create mode 100644 app/assets/images/tour/3.svg create mode 100644 app/assets/images/tour/4.svg 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/templates/views/tour/2.html b/app/templates/views/tour/2.html index ecad22e6a..85f1b4068 100644 --- a/app/templates/views/tour/2.html +++ b/app/templates/views/tour/2.html @@ -15,11 +15,19 @@ 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..7b56ce674 100644 --- a/app/templates/views/tour/3.html +++ b/app/templates/views/tour/3.html @@ -15,11 +15,19 @@ 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..4b4e6f6a6 100644 --- a/app/templates/views/tour/4.html +++ b/app/templates/views/tour/4.html @@ -17,12 +17,20 @@ Next - + + + > + {% endcall %} {% endblock %} From 0a3567ec485e25eb9db207f28c67f6b67037e92d Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 4 Apr 2016 16:54:28 +0100 Subject: [PATCH 2/2] Add page ``s to tour pages --- app/main/views/tour.py | 11 ++++++++++- app/templates/views/tour/1.html | 2 +- app/templates/views/tour/2.html | 2 +- app/templates/views/tour/3.html | 2 +- app/templates/views/tour/4.html | 4 ++-- 5 files changed, 15 insertions(+), 6 deletions(-) diff --git a/app/main/views/tour.py b/app/main/views/tour.py index 3615b2a9c..222b2d0fa 100644 --- a/app/main/views/tour.py +++ b/app/main/views/tour.py @@ -4,6 +4,14 @@ 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/<service_id>/tour/<int:page>") @login_required def tour(service_id, page): @@ -11,5 +19,6 @@ def tour(service_id, page): 'views/tour/{}.html'.format(page), service_id=service_id, # TODO: fix when Nick’s PR is merged 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') %} - <h2 class="heading-large">Trial mode</h2> + <h2 class="heading-large">{{ heading }}</h2> <p> To start off with, you can only send messages to yourself. </p> diff --git a/app/templates/views/tour/2.html b/app/templates/views/tour/2.html index 85f1b4068..d3bfe1b2f 100644 --- a/app/templates/views/tour/2.html +++ b/app/templates/views/tour/2.html @@ -10,7 +10,7 @@ {% block maincolumn_content %} {% call banner_wrapper(type='tour') %} - <h2 class="heading-large">Start with templates</h2> + <h2 class="heading-large">{{ heading }}</h2> <p> Set up a template like this: </p> diff --git a/app/templates/views/tour/3.html b/app/templates/views/tour/3.html index 7b56ce674..2e71ead07 100644 --- a/app/templates/views/tour/3.html +++ b/app/templates/views/tour/3.html @@ -10,7 +10,7 @@ {% block maincolumn_content %} {% call banner_wrapper(type='tour') %} - <h2 class="heading-large">Add recipients</h2> + <h2 class="heading-large">{{ heading }}</h2> <p> Add recipients by uploading a .csv spreadsheet: </p> diff --git a/app/templates/views/tour/4.html b/app/templates/views/tour/4.html index 4b4e6f6a6..f1d5b0145 100644 --- a/app/templates/views/tour/4.html +++ b/app/templates/views/tour/4.html @@ -4,13 +4,13 @@ {% 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') %} - <h2 class="heading-large">Send your messages</h2> + <h2 class="heading-large">{{ heading }}</h2> <p> Notify merges your data with the template and sends the messages </p>