From 47b86e70dfaa64c11eb7929cc9bc47bb267e80d3 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 4 Apr 2016 16:51:45 +0100 Subject: [PATCH] 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 %}