Make radio select work w/ new checkboxes/radios

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
This commit is contained in:
Chris Hill-Scott
2016-12-19 10:36:17 +00:00
parent 31d03acc11
commit a592898eff
7 changed files with 91 additions and 81 deletions

View File

@@ -1,29 +1,22 @@
{% macro checkbox(
field,
hint=False,
help_link=None,
help_link_text=None,
width='2-3',
suffix=None,
block=False
width='2-3'
) %}
<label class="{% if block %}block-label{% endif %}" for="{{ field.name }}">
{{ field()}}
{{ field.label.text }}
{% if hint %}
<span class="form-hint">
{{ hint }}
</span>
{% endif %}
{% if field.errors %}
<span class="error-message">
{{ field.errors[0] }}
</span>
{% endif %}
{% if help_link and help_link_text %}
<p class="textbox-help-link">
<a href='{{ help_link }}'>{{ help_link_text }}</a>
</p>
{% endif %}
<div class="multiple-choice">
<input
id="{{ field.id }}" name="{{ field.name }}" type="checkbox" value="{{ field.data }}"
{% if field.checked %}
checked
{% endif %}
>
<label for="{{ field.id }}">
{{ field.label.text }}
{% if hint %}
<div class="hint">
{{ hint }}
</div>
{% endif %}
</label>
</div>
{% endmacro %}