darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-18 05:29:38 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
817ebbe923a2e28fcbfccc9aa89ab2a235bcd54e
notifications-admin/app/templates/views/edit-sms-template.html

76 lines
2.9 KiB
HTML
Raw Normal View History

Added main nav to logged in pages
2015-12-14 16:53:07 +00:00
{% extends "withnav_template.html" %}
Add routing and pages for managing templates So that users can see what it the flow is like to: - add new templates - edit existing templates
2015-12-20 00:00:01 +00:00
{% from "components/textbox.html" import textbox %}
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 sticky footer take up full width So that we have space to display the message about how long the template content is alongside the button, without the message wrapping.
2021-01-06 16:57:57 +00:00
{% from "components/page-footer.html" import page_footer %}
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 %}
move vendored uk components to templates
2022-12-14 11:50:51 -05:00
{% from "components/uk_components/back-link/macro.njk" import govukBackLink %}
Created an initial page for editing templates [ci skip]
2015-12-09 10:52:09 +00: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 %}
{{ heading_action }} text message template
Created an initial page for editing templates [ci skip]
2015-12-09 10:52:09 +00:00
{% endblock %}
Move back link outside of main where it was used in the page header The page_header macro includes an optional back link. Since the page_header is always used inside `<main>`, where the back link should not be, this stops setting the back link in the page header and instead sets it in the new `backLink` block.
2021-07-30 18:23:12 +01:00
{% block backLink %}
{{ govukBackLink({
handle folders case
2023-07-07 10:27:29 -07:00
"href": url_for('main.choose_template', service_id=current_service.id, template_folder_id=template_folder_id) if template_folder_id else url_for('main.choose_template', service_id=current_service.id)
Move back link outside of main where it was used in the page header The page_header macro includes an optional back link. Since the page_header is always used inside `<main>`, where the back link should not be, this stops setting the back link in the page header and instead sets it in the new `backLink` block.
2021-07-30 18:23:12 +01:00
}) }}
{% endblock %}
Added main nav to logged in pages
2015-12-14 16:53:07 +00:00
{% block maincolumn_content %}
Move back link outside of main where it was used in the page header The page_header macro includes an optional back link. Since the page_header is always used inside `<main>`, where the back link should not be, this stops setting the back link in the page header and instead sets it in the new `backLink` block.
2021-07-30 18:23:12 +01:00
{{ page_header('{} text message template'.format(heading_action)) }}
Update dashboard and template flow (#514) * Updated header and footer * Moved files around and updated gulpfile to correct the build process when it goes to production * Updated fonts * Adjusted grid templating * Adding images to assets * Updated account pages, dashboard, and pages in message sending flow * Updated the styling for the landing pages in the account section once logged in
2023-06-08 13:12:00 -04:00
<div class="usa-alert usa-alert--info usa-alert--slim">
<div class="usa-alert__body">
<p class="usa-alert__text">
Don't worry, saving the template will not send
</p>
</div>
</div>
Created an initial page for editing templates [ci skip]
2015-12-09 10:52:09 +00:00
Explain about text message prefixes when editing Previously this lead to 2 support tickets because the user didn't understand why their messages was being split into 2 fragments. We tried modifying the message about charges, but that made it more complicated. Adding a hint should hopefully be enough.
2021-07-02 16:25:45 +01:00
{% if current_service.prefix_sms %}
UI tweaks
2022-07-29 15:28:10 -07:00
{% set content_hint = 'Your service name will be added to the start of your message. You can turn this off in Settings.' %}
Explain about text message prefixes when editing Previously this lead to 2 support tickets because the user didn't understand why their messages was being split into 2 fragments. We tried modifying the message about charges, but that made it more complicated. Adding a hint should hopefully be enough.
2021-07-02 16:25:45 +01:00
{% endif %}
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
{% call form_wrapper() %}
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">
Convert BaseTemplateForm to use new fields Updates StringField to GovukTextInputField. These changes also affect the following forms that inherit from BaseTemplateForm: - SMSTemplateForm - EmailTemplateForm Includes changes to templates that use these forms and associated tests.
2020-08-07 12:07:16 +01:00
{{ form.name(param_extensions={
"classes": "govuk-!-width-full",
"hint": {"text": "Your recipients will not see this"}
}) }}
Move message length information before the button We feel that this is more appropriate because it’s part of the information you’re agreeing to before you hit submit. Sometimes users can missing information that doesn’t start left-aligned to the column they’re interacting with. It also makes it closer to the Design System component. We’re keeping it in the sticky footer, so that it’s always visible no matter where in the message you’re scrolled to (this means you won’t have to edited to content then scroll down to check whether you’ve made it fit).
2021-01-08 13:49:18 +00:00
{{ textbox(
form.template_content,
highlight_placeholders=True,
width='1-1',
Explain about text message prefixes when editing Previously this lead to 2 support tickets because the user didn't understand why their messages was being split into 2 fragments. We tried modifying the message about charges, but that made it more complicated. Adding a hint should hopefully be enough.
2021-07-02 16:25:45 +01:00
hint=content_hint,
Move message length information before the button We feel that this is more appropriate because it’s part of the information you’re agreeing to before you hit submit. Sometimes users can missing information that doesn’t start left-aligned to the column they’re interacting with. It also makes it closer to the Design System component. We’re keeping it in the sticky footer, so that it’s always visible no matter where in the message you’re scrolled to (this means you won’t have to edited to content then scroll down to check whether you’ve made it fit).
2021-01-08 13:49:18 +00:00
rows=5,
UI tweaks
2022-07-29 15:28:10 -07:00
extra_form_group_classes='govuk-!-margin-bottom-2',
placeholder='Edit me! Check out the Personalization section below for details on cool ((stuff)) you can do with your messages!'
Move message length information before the button We feel that this is more appropriate because it’s part of the information you’re agreeing to before you hit submit. Sometimes users can missing information that doesn’t start left-aligned to the column they’re interacting with. It also makes it closer to the Design System component. We’re keeping it in the sticky footer, so that it’s always visible no matter where in the message you’re scrolled to (this means you won’t have to edited to content then scroll down to check whether you’ve made it fit).
2021-01-08 13:49:18 +00:00
) }}
dont use has_permissions to check for platform admins platform_admin is a separate concept to permissions, so by removing the checks for it from the current_user.has_permissions function, we can simplify things greatly. We already record on the user whether they're a platform admin anyway.
2018-02-27 16:45:20 +00:00
{% if current_user.platform_admin %}
Plug GovukRadiosField into edit sms|email pages Proof of concept for the GovukRadiosField class. Includes the removal of the a DataRequired validator. This doesn't seem to be needed as the RadioField superclass catches any submissions without any data from field.choices in its pre_validate method (which also outputs the correct error message).
2020-11-11 15:55:55 +00:00
{{ form.process_type }}
Add a selectField to edit and create templates that is only visible for platform admins that makes the template a `priority` template. There is a check that the template can not be created as priority if the user is not a platform admin. There is a check that the template can not change the `priority` unless they are a platform admin.
2017-01-18 15:11:34 +00:00
{% endif %}
Make sticky footer take up full width So that we have space to display the message about how long the template content is alongside the button, without the message wrapping.
2021-01-06 16:57:57 +00:00
</div>
<div class="govuk-grid-column-full">
Stop content length message from making page jumpy The content length message was making the page jumpy and causing reflows in three ways. This commit addresses each of those ways: As the user scrolled --- The footer went from fixed to sticky and the spacing around the message changed. This change in spacing was needed so that the message looked right in both contexts. I think the best way to resolve this is to not use the sticky footer when editing text message or broadcast templates. On my 1440×900 screen I can fit a 5 fragment text message, plus the ‘will be charged as 5 text messages’ message, plus the save button. Our top 10 screen resolutions according to our analytics are: Position | Resolution | Percentage of users ---------|------------|-------------------- 1 | 1920x1080 | 27.37% 2 | 1280×720 | 11.07% 3 | 1366×768 | 8.88% 4 | 1536×864 | 5.79% 5 | 1440×900 | 4.52% 6 | 1600×900 | 3.71% 7 | 1280×1024 | 3.10% 8 | 1680×1050 | 2.42% 9 | 1920×1200 | 2.33% 10 | 2560×1440 | 1.99% When the page first loaded --- The message is empty so takes up no space, then the javascript fires and inserts the message, taking up a line of space. This is resolved by making the empty message take up space with a non-breaking space character. When the user first typed --- We previously didn’t show any message until the user started typing. This meant that, with the above fix, there was a larger than normal empty space between the textarea and the save button. This is resolved by always showing the message, even when the user hasn’t typed anything yet. *** These are design decisions which made sense when the message was displayed along side the button, but we’ve had to change now that the message is above the button.
2021-01-08 15:23:54 +00:00
<div class="template-content-count">
<div data-module="update-status" data-target="template_content" data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='sms') }}" aria-live="polite">
&nbsp;
Use <div> for block level content
2021-01-08 12:48:42 +00:00
</div>
Make sticky footer take up full width So that we have space to display the message about how long the template content is alongside the button, without the message wrapping.
2021-01-06 16:57:57 +00:00
</div>
Stop content length message from making page jumpy The content length message was making the page jumpy and causing reflows in three ways. This commit addresses each of those ways: As the user scrolled --- The footer went from fixed to sticky and the spacing around the message changed. This change in spacing was needed so that the message looked right in both contexts. I think the best way to resolve this is to not use the sticky footer when editing text message or broadcast templates. On my 1440×900 screen I can fit a 5 fragment text message, plus the ‘will be charged as 5 text messages’ message, plus the save button. Our top 10 screen resolutions according to our analytics are: Position | Resolution | Percentage of users ---------|------------|-------------------- 1 | 1920x1080 | 27.37% 2 | 1280×720 | 11.07% 3 | 1366×768 | 8.88% 4 | 1536×864 | 5.79% 5 | 1440×900 | 4.52% 6 | 1600×900 | 3.71% 7 | 1280×1024 | 3.10% 8 | 1680×1050 | 2.42% 9 | 1920×1200 | 2.33% 10 | 2560×1440 | 1.99% When the page first loaded --- The message is empty so takes up no space, then the javascript fires and inserts the message, taking up a line of space. This is resolved by making the empty message take up space with a non-breaking space character. When the user first typed --- We previously didn’t show any message until the user started typing. This meant that, with the above fix, there was a larger than normal empty space between the textarea and the save button. This is resolved by always showing the message, even when the user hasn’t typed anything yet. *** These are design decisions which made sense when the message was displayed along side the button, but we’ve had to change now that the message is above the button.
2021-01-08 15:23:54 +00:00
{{ page_footer('Save') }}
Update dashboard and template flow (#514) * Updated header and footer * Moved files around and updated gulpfile to correct the build process when it goes to production * Updated fonts * Adjusted grid templating * Adding images to assets * Updated account pages, dashboard, and pages in message sending flow * Updated the styling for the landing pages in the account section once logged in
2023-06-08 13:12:00 -04:00
<p class="usa-hint">
UI tweaks
2022-07-29 15:28:10 -07:00
After saving, you'll have the option to send 🚀
</p>
Add a hint about how to use placeholders Since placeholders (almost) work now, it’s worth telling people what the syntax is. This commit also removes the ‘template type’ picker, since you can only create SMS templates at the moment. This will be revisited when we start looking at how you add an email template.
2016-02-18 07:44:50 +00:00
</div>
Use inset-text component for template formatting partials This adds spacing classes from the design system where necessary to keep the spacing looking the same. It also replaces the `<aside>` elements with a `<div>` on the edit template pages. The accessibility audit noted that these were inside a `<main>` element, so screen readers may not be able to navigate the elements correctly.
2021-02-19 14:46:09 +00:00
<div class="govuk-grid-column-full">
Give more guidance about what to put in templates There are some common questions that keep coming up when users are editing or creating templates. This commit adds a pattern for sections of guidance which can be shown/hidden. It then modifies the guidance as follows. Change: - guidance about placeholders; give an example about what to do and what not to do (because the mistake we keep seeing people make is putting the thing itself, not the name of the thing) Add (pretty basic at the moment but a need for these has come out of research): - guidance about links - guidance about message length for text messages
2016-06-20 11:38:30 +01:00
{% include "partials/templates/guidance-personalisation.html" %}
Added optional content guidance on edit sms template view
2016-11-11 11:44:48 +00:00
{% include "partials/templates/guidance-optional-content.html" %}
Give more guidance about what to put in templates There are some common questions that keep coming up when users are editing or creating templates. This commit adds a pattern for sections of guidance which can be shown/hidden. It then modifies the guidance as follows. Change: - guidance about placeholders; give an example about what to do and what not to do (because the mistake we keep seeing people make is putting the thing itself, not the name of the thing) Add (pretty basic at the moment but a need for these has come out of research): - guidance about links - guidance about message length for text messages
2016-06-20 11:38:30 +01:00
{% include "partials/templates/guidance-links.html" %}
{% include "partials/templates/guidance-character-count.html" %}
Use inset-text component for template formatting partials This adds spacing classes from the design system where necessary to keep the spacing looking the same. It also replaces the `<aside>` elements with a `<div>` on the edit template pages. The accessibility audit noted that these were inside a `<main>` element, so screen readers may not be able to navigate the elements correctly.
2021-02-19 14:46:09 +00:00
</div>
Add a hint about how to use placeholders Since placeholders (almost) work now, it’s worth telling people what the syntax is. This commit also removes the ‘template type’ picker, since you can only create SMS templates at the moment. This will be revisited when we start looking at how you add an email template.
2016-02-18 07:44:50 +00:00
</div>
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 %}
Created an initial page for editing templates [ci skip]
2015-12-09 10:52:09 +00:00
{% endblock %}
Reference in New Issue Copy Permalink