darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-09 02:44:10 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
bcc45ede9cc027ad10a58d6f4c0d9ea3d53aa428
notifications-admin/app/templates/views/send-test.html

38 lines
1.1 KiB
HTML
Raw Normal View History

Make send a test teach you how placeholders work This commit does two main things: - adds textboxes to the send yourself a test page, so you can replace ((name)) with ‘Chris’, or whatever your name is - rejigs the send page a bit to make it clearer what the CSV upload is for and how to use it The idea being that, since most users go into ‘send yourself a test’ first, it teaches them about how placeholders work by making them do the replacing themselves.
2016-05-05 08:39:36 +01:00
{% extends "withnav_template.html" %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/file-upload.html" import file_upload %}
Show one field at a time on send yourself a test The send yourself a test feature is useful for two things: - constructing an email/text message/letter without uploading a CSV file - seeing what the thing your going to send will look like (either by getting it in your inbox or downloading the PDF) - learning the concept of placeholders, ie understanding they’re thing that gets populated with _stuff_ The problem we’re seeing is that the current UI breaks when a template has a lot of placeholders. This is especially apparent with letter templates, which have a minimum of 7 placeholders by virtue of the address. The idea behind having the form fields side-by-side was to help people understand the relationship between their spreadsheet columns and the placeholders. But this means that the page was doing a lot of work, trying to teach: - replacement of placeholders - link between placeholders and spreadsheet columns The latter is better explained by the example spreadsheet shown on the upload page. So it can safely be removed from the send yourself a test page – in other words the fields don’t need to be shown side by side. Showing them one-at-a-time works well because: - it’s really obvious, even on first use, what the page is asking you to do - as your step through each placeholder, you see the message build up with the data you’ve entered – you’re learning how replacement of placeholders works by repetition This also means adding a matching endpoint for viewing each step of making the test letter as a PDF/PNG because we can’t reuse the view of the template without any placeholders filled any more.
2017-05-04 09:30:55 +01:00
{% from "components/textbox.html" import textbox %}
Make send a test teach you how placeholders work This commit does two main things: - adds textboxes to the send yourself a test page, so you can replace ((name)) with ‘Chris’, or whatever your name is - rejigs the send page a bit to make it clearer what the CSV upload is for and how to use it The idea being that, since most users go into ‘send yourself a test’ first, it teaches them about how placeholders work by making them do the replacing themselves.
2016-05-05 08:39:36 +01:00
{% from "components/table.html" import list_table, field, text_field, index_field, index_field_heading %}
Include service name in page `<title>` In pages specific to a service (e.g. dashboard and sub pages) the title needs to distinguish which service it applies to. This is mainly to give context to screen reader users who could be managing multiple services. Implementing this uses template inheritance: `page_title` includes `per_page_title` includes `service_page_title` ‘GOV.UK Notify’ is inserted into every page title. Pages that set `service_page_title` get the service name inserted too.
2017-02-13 10:45:15 +00:00
{% block service_page_title %}
Ensure correct page titles on send test flows We have some fairly complicated nested if statements in our Jinja that decide what the page titles should be. It’s only going to get more complicated with the send individual message routes. So this commit: - moves the logic from Jinja to Python - adds tests to check things are working as expected - sets the page titles to the right thing for each flow
2017-05-25 13:31:23 +01:00
{{ page_title }}
Make send a test teach you how placeholders work This commit does two main things: - adds textboxes to the send yourself a test page, so you can replace ((name)) with ‘Chris’, or whatever your name is - rejigs the send page a bit to make it clearer what the CSV upload is for and how to use it The idea being that, since most users go into ‘send yourself a test’ first, it teaches them about how placeholders work by making them do the replacing themselves.
2016-05-05 08:39:36 +01:00
{% endblock %}
{% block maincolumn_content %}
Add multiple ‘edit’ links for letter templates Letter templates have (or will have) multiple different editable regions. I think that the most intuitive way for this to work is to have - an edit link for each of these areas - positioned next to the thing to be edited Again, this isn’t fully hooked up, but since no-one is using letters live yet this is a good way of getting research feedback and pointing towards where we want the feature to go. Uses percentages for the positioning so that the alignment is maintained on mobile.
2017-03-13 10:55:15 +00:00
<h1 class="heading-large">
Ensure correct page titles on send test flows We have some fairly complicated nested if statements in our Jinja that decide what the page titles should be. It’s only going to get more complicated with the send individual message routes. So this commit: - moves the logic from Jinja to Python - adds tests to check things are working as expected - sets the page titles to the right thing for each flow
2017-05-25 13:31:23 +01:00
{{ page_title }}
Add multiple ‘edit’ links for letter templates Letter templates have (or will have) multiple different editable regions. I think that the most intuitive way for this to work is to have - an edit link for each of these areas - positioned next to the thing to be edited Again, this isn’t fully hooked up, but since no-one is using letters live yet this is a good way of getting research feedback and pointing towards where we want the feature to go. Uses percentages for the positioning so that the alignment is maintained on mobile.
2017-03-13 10:55:15 +00:00
</h1>
Make send a test teach you how placeholders work This commit does two main things: - adds textboxes to the send yourself a test page, so you can replace ((name)) with ‘Chris’, or whatever your name is - rejigs the send page a bit to make it clearer what the CSV upload is for and how to use it The idea being that, since most users go into ‘send yourself a test’ first, it teaches them about how placeholders work by making them do the replacing themselves.
2016-05-05 08:39:36 +01:00
Disable autofill on one-off messages Not good to be storing people’s phone numbers in browser autocomplete. And increases the chance of accidentally sending the wrong thing to the wrong person.
2017-06-14 20:42:32 +01:00
<form method="post" class="js-stick-at-top-when-scrolling" data-module="autofocus" autocomplete="off">
Replace test with one-off It’s a confusing proposition to have two features which are almost identical. Even differentiating between them in the template menu would be tricky. I think the better thing to do is rename the whole feature to ‘send one-off message’. Then if someone wants to use there own phone number or email address, give them a quick shortcut to doing that, once they’re in the flow. In the background this reuses the ‘send yourself a test’ code, but the user is never aware that they’re going through a different route to send an individual message. So the proposition stays nice and clean.
2017-05-25 13:31:51 +01:00
<div class="grid-row">
<div class="column-two-thirds">
{{ textbox(
form.placeholder_value,
hint='Optional' if optional_placeholder else None,
width='1-1',
) }}
</div>
{% if skip_link %}
<div class="column-one-third">
<a href="{{ skip_link[1] }}" class="top-gutter-4-3">{{ skip_link[0] }}</a>
</div>
{% endif %}
</div>
Show one field at a time on send yourself a test The send yourself a test feature is useful for two things: - constructing an email/text message/letter without uploading a CSV file - seeing what the thing your going to send will look like (either by getting it in your inbox or downloading the PDF) - learning the concept of placeholders, ie understanding they’re thing that gets populated with _stuff_ The problem we’re seeing is that the current UI breaks when a template has a lot of placeholders. This is especially apparent with letter templates, which have a minimum of 7 placeholders by virtue of the address. The idea behind having the form fields side-by-side was to help people understand the relationship between their spreadsheet columns and the placeholders. But this means that the page was doing a lot of work, trying to teach: - replacement of placeholders - link between placeholders and spreadsheet columns The latter is better explained by the example spreadsheet shown on the upload page. So it can safely be removed from the send yourself a test page – in other words the fields don’t need to be shown side by side. Showing them one-at-a-time works well because: - it’s really obvious, even on first use, what the page is asking you to do - as your step through each placeholder, you see the message build up with the data you’ve entered – you’re learning how replacement of placeholders works by repetition This also means adding a matching endpoint for viewing each step of making the test letter as a PDF/PNG because we can’t reuse the view of the template without any placeholders filled any more.
2017-05-04 09:30:55 +01:00
{{ page_footer('Next', back_link=back_link) }}
Make send a test teach you how placeholders work This commit does two main things: - adds textboxes to the send yourself a test page, so you can replace ((name)) with ‘Chris’, or whatever your name is - rejigs the send page a bit to make it clearer what the CSV upload is for and how to use it The idea being that, since most users go into ‘send yourself a test’ first, it teaches them about how placeholders work by making them do the replacing themselves.
2016-05-05 08:39:36 +01:00
</form>
Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate.
2017-05-16 16:56:40 +01:00
{{ template|string }}
Make send a test teach you how placeholders work This commit does two main things: - adds textboxes to the send yourself a test page, so you can replace ((name)) with ‘Chris’, or whatever your name is - rejigs the send page a bit to make it clearer what the CSV upload is for and how to use it The idea being that, since most users go into ‘send yourself a test’ first, it teaches them about how placeholders work by making them do the replacing themselves.
2016-05-05 08:39:36 +01:00
{% endblock %}
Reference in New Issue Copy Permalink