Files
notifications-admin/app/templates/views/templates/_template_list.html
T
Chris Hill-Scott 9e8df33832 Restore correct spacing on templates page
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.
2020-09-25 13:02:19 +01:00

95 lines
4.0 KiB
HTML

{% from "components/message-count-label.html" import folder_contents_count, message_count_label %}
{% macro format_item_name(name, separators=True) -%}
{%- if name is string -%}
{{- name -}}
{%- else -%}
{%- for part in name -%}
{{- format_item_name(part, separators) -}}
{%- if not loop.last -%}
{%- if separators %}
<span class="message-name-separator"></span>{%- else %} {% endif -%}
{% endif -%}
{%- endfor -%}
{% endif %}
{%- endmacro %}
{% if template_list.template_folder_id and not template_list.templates_to_show %}
<p class="template-list-empty">
{% if template_list.folder_is_empty %}
This folder is empty
{% else %}
There are no {{ message_count_label(1, template_type, suffix='') }} templates in this folder
{% 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' }}">
{% set checkboxes_data = [] %}
{% for item in template_list %}
{% set item_link_content %}
{% for ancestor in item.ancestors %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
{{- format_item_name(ancestor.name) -}}
</a> <span class="message-name-separator"></span>
{% endfor %}
{% if item.is_folder %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
<span class="live-search-relevant">{{- format_item_name(item.name) -}}</span>
</a>
{% else %}
<a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-template">
<span class="live-search-relevant">{{- format_item_name(item.name) -}}</span>
</a>
{% endif %}
{% endset %}
{% set label_content %}
<span class="govuk-visually-hidden">
{%- for ancestor in item.ancestors %}{{ format_item_name(ancestor.name, separators=False) }} {% endfor -%}
{{ format_item_name(item.name, separators=False) -}}
</span>
{% endset %}
{% set item_meta %}
<span id="{{ item.id }}-item-hint" class="govuk-hint govuk-checkboxes__hint template-list-item-hint">
{{ item.hint }}
</span>
{% endset %}
{# create the item config now to include the label content -#}
{# TODO: "attributes": { "aria-describedby": item.id ~ "-hint" } needs to be added but govuk-frontend-jinja doesn't currently support this -#}
{% set checkbox_config = {
"html": label_content,
"label": {
"classes": "template-list-item-label",
},
"id": "templates-or-folder-" ~ item.id,
"classes": "template-list-item template-list-item-with-checkbox {}".format(
"template-list-item-hidden-by-default" if item.ancestors else "template-list-item-without-ancestors"),
"after": item_link_content ~ item_meta
} %}
{% set _ = checkboxes_data.append(checkbox_config) %}
{% if not current_user.has_permissions('manage_templates') %}
<div class="template-list-item {%- if item.ancestors %} template-list-item-hidden-by-default {%- else %} template-list-item-without-ancestors{%- endif %}">
<h2 class="message-name">
{{ item_link_content }}
</h2>
<p class="message-type govuk-!-margin-bottom-4">
{{ item.hint }}
</p>
</div>
{% endif %}
{% endfor %}
{% if current_user.has_permissions('manage_templates') %}
{{ templates_and_folders_form.templates_and_folders(param_extensions={
"items": checkboxes_data,
"formGroup": False
}) }}
{% endif %}
</nav>
{% endif %}