mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-05-04 08:01:34 -04:00
a592898eff
The visual appearance of radio and checkbox form inputs changed in GOV.UK Elements here: https://github.com/alphagov/govuk_elements/pull/296 This was subsequently reimplemented with different markup and no Javascript here: https://github.com/alphagov/govuk_elements/pull/406 This has meant making the following changes to our app: - changing the markup in our radio/checkbox macros to match the example markup given by GOV.UK Elements - removing the previous Javascript file because it’s no longer needed to make the radios appear visual selected - making the buttons on the scheduled job picker look like links, because the grey button style looked weird with the new radio buttons
120 lines
3.3 KiB
HTML
120 lines
3.3 KiB
HTML
{% macro radios(
|
|
field,
|
|
hint=None,
|
|
disable=[],
|
|
option_hints={}
|
|
) %}
|
|
<div class="form-group {% if field.errors %} error{% endif %}">
|
|
<fieldset>
|
|
<legend class="form-label">
|
|
{{ field.label.text|safe }}
|
|
{% if field.errors %}
|
|
<span class="error-message">
|
|
{{ field.errors[0] }}
|
|
</span>
|
|
{% endif %}
|
|
</legend>
|
|
{% for option in field %}
|
|
<div class="multiple-choice">
|
|
<input
|
|
id="{{ option.id }}" name="{{ option.name }}" type="radio" value="{{ option.data }}"
|
|
{% if option.data in disable %}
|
|
disabled
|
|
{% endif %}
|
|
{% if option.checked %}
|
|
checked
|
|
{% endif %}
|
|
>
|
|
<label class="block-label" for="{{ option.id }}">
|
|
{{ option.label.text }}
|
|
{% if option_hints[option.data] %}
|
|
<div class="block-label-hint">
|
|
{{ option_hints[option.data] }}
|
|
</div>
|
|
{% endif %}
|
|
</label>
|
|
</div>
|
|
{% endfor %}
|
|
</fieldset>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro radio_select(
|
|
field,
|
|
hint=None,
|
|
wrapping_class='form-group'
|
|
) %}
|
|
<div class="{{ wrapping_class }} {% if field.errors %} error{% endif %}">
|
|
<fieldset>
|
|
<legend class="form-label">
|
|
{{ field.label.text }}
|
|
{% if field.errors %}
|
|
<span class="error-message">
|
|
{{ field.errors[0] }}
|
|
</span>
|
|
{% endif %}
|
|
</legend>
|
|
<div class="radio-select" data-module="radio-select" data-categories="{{ field.categories|join(',') }}">
|
|
<div class="radio-select-column">
|
|
{% for option in field %}
|
|
<div class="multiple-choice">
|
|
{{ option }}
|
|
<label for="{{ option.id }}">
|
|
{{ option.label.text }}
|
|
</label>
|
|
</div>
|
|
{% if loop.first %}
|
|
</div>
|
|
<div class="radio-select-column">
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro branding_radios(
|
|
field,
|
|
hint=None,
|
|
branding_dict={}
|
|
) %}
|
|
<div class="form-group {% if field.errors %} error{% endif %}">
|
|
<fieldset>
|
|
<legend class="form-label">
|
|
{{ field.label.text }}
|
|
{% if field.errors %}
|
|
<span class="error-message">
|
|
{{ field.errors[0] }}
|
|
</span>
|
|
{% endif %}
|
|
</legend>
|
|
{% for value, option, checked in field.iter_choices() %}
|
|
<div class="multiple-choice">
|
|
<input
|
|
type="radio"
|
|
name="{{ field.name }}"
|
|
id="{{ field.name }}-{{ loop.index }}"
|
|
value="{{ value }}"
|
|
{% if checked %}checked="checked"{% endif %}
|
|
/>
|
|
<label class="block-label" for="{{ field.name }}-{{ loop.index }}">
|
|
{% if branding_dict.get(value, {}).get('colour') %}
|
|
<span style="background: {{ branding_dict[value].colour }}; display: inline-block; width: 3px; height: 27px"></span>
|
|
{% endif %}
|
|
{% if branding_dict.get(value, {}).get('logo') %}
|
|
<img
|
|
src="{{ branding_dict[value].logo }}"
|
|
height="27"
|
|
/>
|
|
{% endif %}
|
|
{{option}}
|
|
</label>
|
|
</div>
|
|
{% endfor %}
|
|
</fieldset>
|
|
</div>
|
|
{% endmacro %}
|