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

Add conditional reveal to network selection

Browse Source 
Rather than try to explain all/only just through words we can use some
interaction design to make the hierarchy of choices more explicit.
This commit is contained in:
Chris Hill-Scott
2021-05-11 12:39:52 +01:00
parent d720b0e47a
commit e45bd485e8
4 changed files with 161 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/templates/views/service-settings/service-set-broadcast-network.html
View File

@@ -1,6 +1,9 @@
{% extends "withnav_template.html" %}
{% 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/radios.html" import radio, conditional_radio_panel %}
{% from "components/select-input.html" import select_wrapper %}
{% from "components/back-link/macro.njk" import govukBackLink %}
{% block service_page_title %}
@@ -11,19 +14,21 @@
<div class="govuk-grid-row">
<div class="govuk-grid-column-five-sixths">
{{ govukBackLink({
"text": "Back",
"href": url_for('.service_set_broadcast_channel', service_id=current_service.id)
}) }}
{{ page_header(
'Choose a mobile network',
back_link=url_for('.service_set_broadcast_channel', service_id=current_service.id)
) }}
{% call form_wrapper() %}
{{ form.network(param_extensions={
'fieldset': {
'legend': {
'isPageHeading': True,
'classes': 'govuk-fieldset__legend--l'
}
}
}) }}
{% call select_wrapper(form.network_variant, hide_legend=True) %}
{% for option in form.network_variant %}
{{ radio(option, data_target='single-network' if option.data == "" else None) }}
{% endfor %}
{% endcall %}
{% call conditional_radio_panel('single-network') %}
{{ form.network(
param_extensions={'fieldset': {'legend': {'classes': 'govuk-visually-hidden'}}}
) }}
{% endcall %}
{{ page_footer('Continue') }}
{% endcall %}
</div>