diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss index c4dc7bff4..d783f7d5b 100644 --- a/app/assets/stylesheets/components/message.scss +++ b/app/assets/stylesheets/components/message.scss @@ -24,13 +24,13 @@ } } -$message-text-left-spacing: 22px; +$govuk-checkboxes-size: 40px; +$govuk-checkboxes-label-padding-left-right: govuk-spacing(3); $message-type-bottom-spacing: govuk-spacing(4); .message { &-name { - @include bold-24; margin: 0; a { @@ -78,6 +78,10 @@ $message-type-bottom-spacing: govuk-spacing(4); &-item { + &-with-checkbox { + padding-left: $govuk-checkboxes-size + $govuk-checkboxes-label-padding-left-right; + } + &-hidden-by-default { display: none; } @@ -105,14 +109,12 @@ $message-type-bottom-spacing: govuk-spacing(4); } - &-hint, &-label { - padding-left: $message-text-left-spacing; - } - - &-label { - padding-top: 0px; - padding-bottom: 0px; + position: absolute; + left: 0; + width: $govuk-checkboxes-size + $govuk-checkboxes-label-padding-left-right; + height: 100%; + padding: 0; } // Fix for GOVUK Frontend selector with high precendence @@ -121,6 +123,15 @@ $message-type-bottom-spacing: govuk-spacing(4); margin-bottom: $message-type-bottom-spacing; } + &-hint { + padding-left: 0; + } + + } + + &-folder, + &-template { + @include govuk-font($size: 24, $weight: bold, $line-height: 1.25); } &-folder { diff --git a/app/templates/forms/fields/checkboxes/template.njk b/app/templates/forms/fields/checkboxes/template.njk index 2ac9cf68b..ddd83e88c 100644 --- a/app/templates/forms/fields/checkboxes/template.njk +++ b/app/templates/forms/fields/checkboxes/template.njk @@ -78,6 +78,7 @@ {% set itemDescribedBy = describedBy if not hasFieldset else "" %} {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %} <{{ groupItemElement }} class="govuk-checkboxes__item {%- if item.classes %} {{ item.classes }}{% endif %}"> + {%- if item.before %}{{ item.before }}{% endif -%} {% endif %} + {%- if item.after %}{{ item.after }}{% endif -%} {% if not params.asList and item.conditional %}
diff --git a/app/templates/views/templates/_template_list.html b/app/templates/views/templates/_template_list.html index 2121a011e..0c7f4125c 100644 --- a/app/templates/views/templates/_template_list.html +++ b/app/templates/views/templates/_template_list.html @@ -25,7 +25,7 @@ {% for item in template_list %} - {% set item_label_content %} + {% set item_link_content %} {% for ancestor in item.ancestors %} {{- format_item_name(ancestor.name) -}} @@ -42,26 +42,34 @@ {% endif %} {% endset %} + {% set label_content %} + {{ format_item_name(item.name) }} + {% endset %} + + {% set item_meta %} + + {{ item.hint }} + + {% 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": item_label_content, + "html": label_content, "label": { - "classes": "template-list-item-label govuk-!-font-size-24 govuk-!-font-weight-bold" + "classes": "template-list-item-label", }, "id": "templates-or-folder-" ~ item.id, - "hint": { - "text": item.hint, - "classes": "template-list-item-hint" - }, - "classes": "template-list-item {}".format( - "template-list-item-hidden-by-default" if item.ancestors else "template-list-item-without-ancestors") + "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') %}

- {{ item_label_content }} + {{ item_link_content }}

{{ item.hint }}