mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-11 10:28:41 -04:00
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.
95 lines
4.0 KiB
HTML
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 %}
|