darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-11 09:28:27 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
a85f7fa2c1a9ae04e4abc250660dc60ef64b02af
notifications-admin/app/templates/views/send-test.html

51 lines
1.7 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" %}
Add GOV.UK Design System style back links The Design System has standardised on back links being at the top of the page, decorated with a small text-coloured arrow. I think this makes more sense than having them at the bottom, because it suggests, in some way, being able to go back before commiting to any of the forms on the page. Whereas the things at the bottom of the page should be performing actions on what’s in the page. The reason for making this change now is that it de-clutters the area around the green buttons. This was presenting a design challenge where multiple levels of interaction were happening in the same form. Moving these back links to the top of the page should mean that, in these complicated forms, there’s one fewer thing to compete for the user’s attention. I’ve componentised this into a `page_header` macro so that the change is easier to roll out and maintain.
2019-04-29 11:44:05 +01:00
{% from "components/page-header.html" import page_header %}
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/page-footer.html" import page_footer %}
Offer link to upload ‘Upload recipients’ and ‘Send to one recipient’ have always been slightly clunky phrases. Now that basic view jumps straight into the ‘Send to one recipient’ flow there’s no way for users to get to the ‘Upload recipients’ flow. By adding a link to it from the ‘Send to one recipient’ flow it’s possible for users of basic view to access it. But we don’t want to introduce too much inconsistency between basic view and admin view because users will be migrating from one to another. They might also be talking to their manager, who wouldn’t be able to tell them where to click if they were looking at two completely different interfaces. This also means that we can keep the left-hand navigation in basic view nice and simple with the two options (‘Templates’ and ‘Sent messages’), rather than trying to introduce something like ‘Send one message’ and ‘Send lots of messages’ later on.
2018-07-18 09:48:19 +01:00
{% from "components/message-count-label.html" import recipient_count_label %}
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 %}
Use a macro for form tags This will stop us repeatedly forgetting to add `novalidate` and `autocomplete='off'` to our forms (which is how most of them are set up). It uses sensible defaults, based on how we most-commonly configure forms: - most of our forms are `post`ed (but this can be overridden) - `autocomplete` should only be enabled where it makes sense, otherwise it’s more annoying than useful (but this can be overriden) - we should never be using HTML5 form validation because our own error styles and messages are better
2018-09-19 12:39:36 +01:00
{% from "components/form.html" import form_wrapper %}
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
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 GOV.UK Design System style back links The Design System has standardised on back links being at the top of the page, decorated with a small text-coloured arrow. I think this makes more sense than having them at the bottom, because it suggests, in some way, being able to go back before commiting to any of the forms on the page. Whereas the things at the bottom of the page should be performing actions on what’s in the page. The reason for making this change now is that it de-clutters the area around the green buttons. This was presenting a design challenge where multiple levels of interaction were happening in the same form. Moving these back links to the top of the page should mean that, in these complicated forms, there’s one fewer thing to compete for the user’s attention. I’ve componentised this into a `page_header` macro so that the change is easier to roll out and maintain.
2019-04-29 11:44:05 +01:00
{{ page_header(
page_title,
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
Remove sticky textbox for one-off text messages The idea behind the sticky textbox on this page is so you can scroll through a long email or letter to find where in the message the placeholder appears, while still being able to see the textbox you should be typing in. With text messages, they’re hardly ever long enough for anything to be off the screen – ie no scrolling is required. However if the user does scroll, they can end up covering the message content with the sticky top panel. Which then looks like the message has disappeared, so they click ‘back’ in the browser, then click into the message again to make the page reload. This commit removes the stickyness when sending from a text message template.
2018-12-07 10:34:58 +00:00
{% call form_wrapper(
Fix spacing on upload link when not inside sticky We adjust the spacing under the textbox when doing the send one off flow. This was based on the assumption that there would always be a sticky header in the send one off flow. This assumption is no longer true, so this commit implements the same spacing in an independent way.
2018-12-07 11:41:11 +00:00
class='js-stick-at-top-when-scrolling send-one-off-form' if template.template_type != 'sms' else 'send-one-off-form',
Prevent autofocus when page has scrolled If users scroll a page with an autofocus component on so it is off-screen it seems safe to assume they won't want it focused if they return to it. This prevents that happening. This adds a data-attribute flag to allow this behaviour to be overridden. We have some situations where the assumption here isn't appropriate, for example on pages where the component with autofocus is in a sticky element. This means it will appear offscreen when the page loads but, when its parent becomes sticky, will be visible again.
2019-03-28 16:45:36 +00:00
module="autofocus",
Correct name of forceFocus data attribute Data attributes need to be '-' separated strings in the HTML to appear as camelCase keys in the `.dataset` (`.data()` in jQuery) property. This corrects the assumption that the camelCasing would carry through from the HTML. More info: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
2019-04-03 14:23:07 +01:00
data_kwargs={'force-focus': True}
Remove sticky textbox for one-off text messages The idea behind the sticky textbox on this page is so you can scroll through a long email or letter to find where in the message the placeholder appears, while still being able to see the textbox you should be typing in. With text messages, they’re hardly ever long enough for anything to be off the screen – ie no scrolling is required. However if the user does scroll, they can end up covering the message content with the sticky top panel. Which then looks like the message has disappeared, so they click ‘back’ in the browser, then click into the message again to make the page reload. This commit removes the stickyness when sending from a text message template.
2018-12-07 10:34:58 +00:00
) %}
Replace `grid-row` with `govuk-grid-row` Replaced all instances of `grid-row` in the HTML and JavaScript with `govuk-grid-row`, which is the new GOV.UK Frontend class.
2020-02-19 11:57:15 +00:00
<div class="govuk-grid-row">
Replace `column-two-thirds` with `govuk-grid-column-two-thirds`
2020-02-19 12:36:02 +00:00
<div class="govuk-grid-column-two-thirds {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">
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
{{ textbox(
form.placeholder_value,
hint='Optional' if optional_placeholder else None,
width='1-1',
) }}
</div>
{% if skip_link %}
Replace `column-one-third` with `govuk-grid-column-one-third` Also replaces `column-third`, with `govuk-grid-column-one-third`, since this appears to be an alias of `column-one-third`.
2020-02-19 12:29:28 +00:00
<div class="govuk-grid-column-one-third">
Update all links to use GOVUK Frontend style Includes: - turning off :visited styles to match existing design - swapping heading classes used to make links bold for the GOVUK Frontend bold override class - adding visually hidden text to some links to make them work when isolated from their context We may need to revisit whether some links, such as those for documentation and features, may benefit from having some indication that their target has been visited.
2019-12-06 07:53:46 +00:00
<a href="{{ skip_link[1] }}" class="govuk-link govuk-link--no-visited-state top-gutter-4-3">{{ skip_link[0] }}</a>
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>
{% endif %}
</div>
Offer link to upload ‘Upload recipients’ and ‘Send to one recipient’ have always been slightly clunky phrases. Now that basic view jumps straight into the ‘Send to one recipient’ flow there’s no way for users to get to the ‘Upload recipients’ flow. By adding a link to it from the ‘Send to one recipient’ flow it’s possible for users of basic view to access it. But we don’t want to introduce too much inconsistency between basic view and admin view because users will be migrating from one to another. They might also be talking to their manager, who wouldn’t be able to tell them where to click if they were looking at two completely different interfaces. This also means that we can keep the left-hand navigation in basic view nice and simple with the two options (‘Templates’ and ‘Sent messages’), rather than trying to introduce something like ‘Send one message’ and ‘Send lots of messages’ later on.
2018-07-18 09:48:19 +01:00
{% if link_to_upload %}
<p>
Update all links to use GOVUK Frontend style Includes: - turning off :visited styles to match existing design - swapping heading classes used to make links bold for the GOVUK Frontend bold override class - adding visually hidden text to some links to make them work when isolated from their context We may need to revisit whether some links, such as those for documentation and features, may benefit from having some indication that their target has been visited.
2019-12-06 07:53:46 +00:00
<a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.send_messages', service_id=current_service.id, template_id=template.id) }}">
Offer link to upload ‘Upload recipients’ and ‘Send to one recipient’ have always been slightly clunky phrases. Now that basic view jumps straight into the ‘Send to one recipient’ flow there’s no way for users to get to the ‘Upload recipients’ flow. By adding a link to it from the ‘Send to one recipient’ flow it’s possible for users of basic view to access it. But we don’t want to introduce too much inconsistency between basic view and admin view because users will be migrating from one to another. They might also be talking to their manager, who wouldn’t be able to tell them where to click if they were looking at two completely different interfaces. This also means that we can keep the left-hand navigation in basic view nice and simple with the two options (‘Templates’ and ‘Sent messages’), rather than trying to introduce something like ‘Send one message’ and ‘Send lots of messages’ later on.
2018-07-18 09:48:19 +01:00
Upload a list of {{ recipient_count_label(999, template.template_type) }}
</a>
</p>
{% endif %}
Add GOV.UK Design System style back links The Design System has standardised on back links being at the top of the page, decorated with a small text-coloured arrow. I think this makes more sense than having them at the bottom, because it suggests, in some way, being able to go back before commiting to any of the forms on the page. Whereas the things at the bottom of the page should be performing actions on what’s in the page. The reason for making this change now is that it de-clutters the area around the green buttons. This was presenting a design challenge where multiple levels of interaction were happening in the same form. Moving these back links to the top of the page should mean that, in these complicated forms, there’s one fewer thing to compete for the user’s attention. I’ve componentised this into a `page_header` macro so that the change is easier to roll out and maintain.
2019-04-29 11:44:05 +01:00
{{ page_footer('Continue') }}
Use a macro for form tags This will stop us repeatedly forgetting to add `novalidate` and `autocomplete='off'` to our forms (which is how most of them are set up). It uses sensible defaults, based on how we most-commonly configure forms: - most of our forms are `post`ed (but this can be overridden) - `autocomplete` should only be enabled where it makes sense, otherwise it’s more annoying than useful (but this can be overriden) - we should never be using HTML5 form validation because our own error styles and messages are better
2018-09-19 12:39:36 +01:00
{% endcall %}
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
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