darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-04-30 14:10:40 -04:00
Code Issues Packages Projects Releases Wiki Activity

Change radio buttons to inline

Browse Source 
Adds ability to have inline radio buttons using the fieldset.inline
functionality from gov.uk elements.

Then implements this for the radio buttons for choosing postage
class.

Also overrides the gov uk elements styling for the inline radio
buttons to place them slightly closer together as this looks
better.
This commit is contained in:
David McDonald
2019-10-09 16:16:22 +01:00
parent 2b8b4c25aa
commit 1c3095329b
4 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/stylesheets/components/radios.scss
View File

@@ -111,3 +111,9 @@
}
}
.inline {
.multiple-choice {
margin-right: 15px;
}
}

4
app/templates/components/radios.html
View File

@@ -1,7 +1,7 @@
{% from "components/select-input.html" import select, select_list, select_nested, select_wrapper, select_input %}
{% macro radios(field, hint=None, disable=[], option_hints={}, hide_legend=False) %}
{{ select(field, hint, disable, option_hints, hide_legend, input="radio") }}
{% macro radios(field, hint=None, disable=[], option_hints={}, hide_legend=False, inline=False) %}
{{ select(field, hint, disable, option_hints, hide_legend, input="radio", inline=inline) }}
{% endmacro %}

8
app/templates/components/select-input.html
View File

@@ -1,6 +1,6 @@
{% macro select(field, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text", input="radio") %}
{% macro select(field, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text", input="radio", inline=False) %}
{% call select_wrapper(
field, hint, disable, option_hints, hide_legend, collapsible_opts, legend_style
field, hint, disable, option_hints, hide_legend, collapsible_opts, legend_style, inline=inline
) %}
{% for option in field %}
{{ select_input(option, disable, option_hints, input=input) }}
@@ -35,13 +35,13 @@
{% endmacro %}
{% macro select_wrapper(field, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text") %}
{% macro select_wrapper(field, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text", inline=False) %}
{% set is_collapsible = collapsible_opts|length %}
<div class="form-group {% if field.errors %} form-group-error{% endif %}"{% if is_collapsible %} data-module="collapsible-checkboxes"{% if collapsible_opts.field %} data-field-label="{{ collapsible_opts.field }}"{% endif %}{% endif %}>
{% if is_collapsible %}
<div class="selection-summary" role="region" aria-live="polite"></div>
{% endif %}
<fieldset id="{{ field.id }}">
<fieldset id="{{ field.id }}" {% if inline %}class="inline"{% endif %}>
<legend class="{{ 'form-label' if not hide_legend else '' }}{% if legend_style != 'text' %} {{ legend_style }}{% endif %}">
{% if hide_legend %}<span class="visually-hidden">{% endif %}
{{ field.label.text|safe }}

2
app/templates/views/uploads/preview.html
View File

@@ -41,7 +41,7 @@
service_id=current_service.id,
)}}" class='page-footer'>
{{ form.csrf_token }}
{{ radios(form.postage, hide_legend=true) }}
{{ radios(form.postage, hide_legend=true, inline=True) }}
{{ form.file_id(value=file_id) }}
<button type="submit" class="button">Send 1 letter</button>
</form>