darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-07 11:28:25 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
cd1fe0640c8ece975ac43d8ea7d1fdca23cdd7fb
notifications-admin/app/templates/views/service-settings/set-email-branding.html

40 lines
1.1 KiB
HTML
Raw Normal View History

Add a page to set organisation and branding option Platform admin only. Adds radio buttons to choose one of: - three hard-coded branding options - organisations from a list provided by the API
2016-08-08 10:28:40 +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 %}
{% from "components/page-footer.html" import page_footer, sticky_page_footer %}
Add live-search to set-email-branding page
2018-08-22 14:23:06 +01:00
{% from "components/live-search.html" import live_search %}
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 %}
Add a page to set organisation and branding option Platform admin only. Adds radio buttons to choose one of: - three hard-coded branding options - organisations from a list provided by the API
2016-08-08 10:28:40 +01:00
Turn autofocus on for setting service branding Accessibility audit uncovered issues screen-reader users would have with autofocus on Notify pages. Autofocus can lead to confusion for those types of users and make them miss parts of the page. Hence, we decided that autofocus will be turned off by default for live-search component. We decided to keep the autofocus on for live-search text box when: 1. the page is a task page - as opposed to browsing pages, where user wonders freely, task pages have more established flow, so page focusing on textbox can actually be helpful. 2. page does not have actionable elements above the autofocus.
2020-09-10 16:00:41 +01:00
{% set page_title = "Set email branding" %}
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 %}
Turn autofocus on for setting service branding Accessibility audit uncovered issues screen-reader users would have with autofocus on Notify pages. Autofocus can lead to confusion for those types of users and make them miss parts of the page. Hence, we decided that autofocus will be turned off by default for live-search component. We decided to keep the autofocus on for live-search text box when: 1. the page is a task page - as opposed to browsing pages, where user wonders freely, task pages have more established flow, so page focusing on textbox can actually be helpful. 2. page does not have actionable elements above the autofocus.
2020-09-10 16:00:41 +01:00
{{ page_title }}
Add a page to set organisation and branding option Platform admin only. Adds radio buttons to choose one of: - three hard-coded branding options - organisations from a list provided by the API
2016-08-08 10:28:40 +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(
Turn autofocus on for setting service branding Accessibility audit uncovered issues screen-reader users would have with autofocus on Notify pages. Autofocus can lead to confusion for those types of users and make them miss parts of the page. Hence, we decided that autofocus will be turned off by default for live-search component. We decided to keep the autofocus on for live-search text box when: 1. the page is a task page - as opposed to browsing pages, where user wonders freely, task pages have more established flow, so page focusing on textbox can actually be helpful. 2. page does not have actionable elements above the autofocus.
2020-09-10 16:00:41 +01:00
page_title,
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
back_link=url_for('.service_settings', service_id=current_service.id)
) }}
Change preview pane JS to preview letters as well as emails
2019-02-14 14:06:31 +00:00
{% call form_wrapper(data_kwargs={'preview-type': 'email'}) %}
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-full` with `govuk-grid-column-full`
2020-02-19 12:23:56 +00:00
<div class="govuk-grid-column-full preview-pane">
Add live-search to set-email-branding page
2018-08-22 14:23:06 +01:00
</div>
</div>
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-full` with `govuk-grid-column-full`
2020-02-19 12:23:56 +00:00
<div class="govuk-grid-column-full">
Turn autofocus on for setting service branding Accessibility audit uncovered issues screen-reader users would have with autofocus on Notify pages. Autofocus can lead to confusion for those types of users and make them miss parts of the page. Hence, we decided that autofocus will be turned off by default for live-search component. We decided to keep the autofocus on for live-search text box when: 1. the page is a task page - as opposed to browsing pages, where user wonders freely, task pages have more established flow, so page focusing on textbox can actually be helpful. 2. page does not have actionable elements above the autofocus.
2020-09-10 16:00:41 +01:00
{{ live_search(
Update liveSearch selector in set email|letter Changes the selector the live search in the set email and letter branding pages in service settings and organisation settings. The current one targeted the old radios HTML whereas this version targets the same for the GOVUK Frontend radios.
2020-12-15 11:40:49 +00:00
target_selector='.govuk-radios__item',
Turn autofocus on for setting service branding Accessibility audit uncovered issues screen-reader users would have with autofocus on Notify pages. Autofocus can lead to confusion for those types of users and make them miss parts of the page. Hence, we decided that autofocus will be turned off by default for live-search component. We decided to keep the autofocus on for live-search text box when: 1. the page is a task page - as opposed to browsing pages, where user wonders freely, task pages have more established flow, so page focusing on textbox can actually be helpful. 2. page does not have actionable elements above the autofocus.
2020-09-10 16:00:41 +01:00
show=True,
form=search_form,
label='Search branding styles by name',
autofocus=True
) }}
Convert radios on email branding page
2020-06-26 21:57:36 +01:00
{{ form.branding_style }}
Add preview step to branding selection flow Gives platform admins a chance to preview the combination of brand type and custom brand (coloured banner and logo) set for service before saving.
2018-08-02 14:46:01 +01:00
</div>
</div>
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
{{ sticky_page_footer('Preview') }}
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 %}
Add a page to set organisation and branding option Platform admin only. Adds radio buttons to choose one of: - three hard-coded branding options - organisations from a list provided by the API
2016-08-08 10:28:40 +01:00
{% endblock %}
Reference in New Issue Copy Permalink