darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-23 07:46:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Convert radios on set-sender page

Browse Source 
Includes making the legend the page header to
follow design system guidance:

https://design-system.service.gov.uk/get-started/labels-legends-headings/

I had to add some override styles to allow the
legend to classes as a full-width column, and the
radios to be in one that is three-quarters.
This commit is contained in:
Tom Byers
2021-01-13 10:31:07 +00:00
parent f6cef24617
commit ece956e324
5 changed files with 53 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/templates/views/templates/set-sender.html
View File

@@ -3,28 +3,32 @@
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}
{% from "components/back-link/macro.njk" import govukBackLink %}
{% block service_page_title %}
{{sender_context['title']}}
{{ sender_context.title }}
{% endblock %}
{% block maincolumn_content %}
{{ page_header(
sender_context.title,
back_link=url_for('.view_template', service_id=current_service.id, template_id=template_id)
) }}
{{ govukBackLink({ "href": url_for('.view_template', service_id=current_service.id, template_id=template_id) }) }}
<div class="govuk-grid-row">
<div class="govuk-grid-column-three-quarters">
{% call form_wrapper() %}
{{ radios(
form.sender,
option_hints=option_hints,
hide_legend=True
) }}
<div class="govuk-grid-row govuk-!-margin-top-3">
{% call form_wrapper() %}
{{ form.sender(param_extensions={
'fieldset': {
'legend': {
'isPageHeading': True,
'text': sender_context.title,
'classes': 'govuk-fieldset__legend--l govuk-grid-column-full'
}
},
'classes': 'govuk-grid-column-three-quarters'
}) }}
<div class="govuk-grid-column-three-quarters">
{{ page_footer('Continue') }}
{% endcall %}
</div>
{% endcall %}
</div>
</div>