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

Restore correct spacing on templates page

Browse Source 
During the move to GOV.UK Frontend checkboxes our template list has
started to be wrapped in a `<div>` with the `govuk-form-group` class.

This adds extra spacing, like you’d want in a regular transaction
service which might have multiple sets of form controls on a single
page.

It isn’t appropriate on our templates page, because there should be a
consistent rhythm where the space between each checkboxes is the same as
the space between the search box and the first checkbox, to the last
checkbox and the buttons. Not having this space is also consistent with
other pages with sticky grey buttons, eg the team members page.

This commit also fixes a typo in the name of one of the classes used to
control spacing between the checkboxes and search bar.
This commit is contained in:
Chris Hill-Scott
2020-09-25 13:02:19 +01:00
parent c7ef7d5083
commit 9e8df33832
2 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/templates/forms/fields/checkboxes/template.njk
View File

@@ -6,6 +6,7 @@
{#- Copied from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/checkboxes/template.njk
Changes:
- `formGroup` option to control whether or not the checkboxes are wrapped with a `govuk-form-group` class
- `classes` option added to `item` allow custom classes on the `.govuk-checkboxes__item` element
- `classes` option added to `item.hint` allow custom classes on the `.govuk-hint` element (added to GOVUK Frontend in v3.5.0 - remove when we update)
- `asList` option added the root `params` object to allow setting of the `.govuk-checkboxes` and `.govuk-checkboxes__item` element types
@@ -14,6 +15,12 @@
instead. We need this for error messages and hints as well -#}
{% set idPrefix = params.idPrefix if params.idPrefix else params.name %}
{% if 'formGroup' not in params %}
{% set formGroup = True %}
{% else %}
{% set formGroup = params.formGroup %}
{% endif %}
{#- a record of other elements that we need to associate with the input using
aria-describedby – for example hints or error messages -#}
{% set describedBy = params.describedBy if params.describedBy else "" %}
@@ -120,7 +127,7 @@
</{{ groupElement }}>
{% endset -%}
<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
<div class="{% if formGroup %}govuk-form-group{% endif %} {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
{% if params.fieldset %}
{% call govukFieldset({
describedBy: describedBy,

7
app/templates/views/templates/_template_list.html
View File

@@ -23,7 +23,7 @@
{% endif %}
</p>
{% else %}
<nav id="template-list" class="{{ 'govuk-!-margin-top-1' if (not show_template_nav and not show_search_box) else 'govuk-!margin-top-6' }}">
<nav id="template-list" class="{{ 'govuk-!-margin-top-1' if (not show_template_nav and not show_search_box) else 'govuk-!-margin-top-6' }}">
{% set checkboxes_data = [] %}
{% for item in template_list %}
@@ -85,7 +85,10 @@
{% endfor %}
{% if current_user.has_permissions('manage_templates') %}
{{ templates_and_folders_form.templates_and_folders(param_extensions={ "items": checkboxes_data }) }}
{{ templates_and_folders_form.templates_and_folders(param_extensions={
"items": checkboxes_data,
"formGroup": False
}) }}
{% endif %}
</nav>
{% endif %}