mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-17 04:59:37 -04:00
Use inset-text component for template formatting partials
This adds spacing classes from the design system where necessary to keep the spacing looking the same. It also replaces the `<aside>` elements with a `<div>` on the edit template pages. The accessibility audit noted that these were inside a `<main>` element, so screen readers may not be able to navigate the elements correctly.
This commit is contained in:
Katie Smith
@@ -1,31 +1,36 @@
|
||||
{% from "components/inset-text/macro.njk" import govukInsetText %}
|
||||
|
||||
<h2 class="heading-medium">Formatting</h2>
|
||||
<p class="govuk-body">
|
||||
To put a heading in your template, use a hash:
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
# This is a heading
|
||||
</p>
|
||||
<div>
|
||||
{{ govukInsetText({
|
||||
"text": "# This is a heading",
|
||||
"classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
|
||||
}}
|
||||
</div>
|
||||
<p class="govuk-body">
|
||||
To make bullet points, use asterisks:
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
* point 1<br/>
|
||||
* point 2<br/>
|
||||
* point 3<br/>
|
||||
</p>
|
||||
<div>
|
||||
{{ govukInsetText({
|
||||
"html": "* point 1<br/>
|
||||
* point 2<br/>
|
||||
* point 3<br/>",
|
||||
"classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
|
||||
}}
|
||||
</div>
|
||||
<p class="govuk-body">
|
||||
To insert a page break, use three asterisks:
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
Content on page 1<br/>
|
||||
<br/>
|
||||
***<br/>
|
||||
<br/>
|
||||
Content on page 2<br/>
|
||||
</p>
|
||||
<div>
|
||||
{{ govukInsetText({
|
||||
"html": "Content on page 1<br/>
|
||||
<br/>
|
||||
***<br/>
|
||||
<br/>
|
||||
Content on page 2<br/>",
|
||||
"classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
|
||||
}}
|
||||
</div>
|
||||
|
||||
@@ -1,41 +1,37 @@
|
||||
{% from "components/inset-text/macro.njk" import govukInsetText %}
|
||||
|
||||
<h2 class="heading-medium">Formatting</h2>
|
||||
<p class="bottom-gutter-1-3">
|
||||
To put a title in your template, use a hash:
|
||||
</p>
|
||||
<div class="panel panel-border-wide bottom-gutter">
|
||||
<p class="govuk-body">
|
||||
# This is a title
|
||||
</p>
|
||||
<div class="bottom-gutter">
|
||||
{{ govukInsetText({"text": "# This is a title", "classes": "govuk-!-margin-top-0"})}}
|
||||
</div>
|
||||
<p class="bottom-gutter-1-3">
|
||||
To make bullet points, use asterisks:
|
||||
</p>
|
||||
<div class="panel panel-border-wide bottom-gutter">
|
||||
<p class="govuk-body">
|
||||
* point 1<br/>
|
||||
* point 2<br/>
|
||||
* point 3<br/>
|
||||
</p>
|
||||
<div class="bottom-gutter">
|
||||
{{ govukInsetText({
|
||||
"html": "* point 1<br/>
|
||||
* point 2<br/>
|
||||
* point 3<br/>",
|
||||
"classes": "govuk-!-margin-top-0"})
|
||||
}}
|
||||
</div>
|
||||
<p class="bottom-gutter-1-3">
|
||||
To add inset text, use a caret:
|
||||
</p>
|
||||
<div class="panel panel-border-wide bottom-gutter">
|
||||
<p class="govuk-body">
|
||||
^ You must tell us if your circumstances change
|
||||
</p>
|
||||
<div class="bottom-gutter">
|
||||
{{ govukInsetText({"text": "^ You must tell us if your circumstances change", "classes": "govuk-!-margin-top-0"})}}
|
||||
</div>
|
||||
<p class="bottom-gutter-1-3">
|
||||
To add a horizontal line, use three dashes:
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
First paragraph
|
||||
</p>
|
||||
<p style="letter-spacing: 1px;">
|
||||
---
|
||||
</p>
|
||||
<p class="govuk-body">
|
||||
Second paragraph
|
||||
</p>
|
||||
<div>
|
||||
{{ govukInsetText({
|
||||
"html": '<p class="govuk-body">First paragraph</p>
|
||||
<p class="govuk-body" style="letter-spacing: 1px;">---</p>
|
||||
<p class="govuk-body">Second paragraph</p>',
|
||||
"classes": "govuk-!-margin-top-0"})
|
||||
}}
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
{% from "components/inset-text/macro.njk" import govukInsetText %}
|
||||
|
||||
<h2 class="heading-medium">Links and URLs</h2>
|
||||
<p class="bottom-gutter-1-3">
|
||||
Always use full URLs, starting with https://
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
Apply now at https://www.gov.uk/example
|
||||
</p>
|
||||
<div>
|
||||
{{ govukInsetText({
|
||||
"text": "Apply now at https://www.gov.uk/example",
|
||||
"classes": "govuk-!-margin-top-0"})
|
||||
}}
|
||||
</div>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
{% from "components/inset-text/macro.njk" import govukInsetText %}
|
||||
|
||||
<h2 class="heading-medium">
|
||||
Optional content
|
||||
</h2>
|
||||
@@ -8,11 +10,12 @@
|
||||
For example if you only want to show something to people who are under
|
||||
18:
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
((under18??Please get your application signed by a parent or
|
||||
guardian.))
|
||||
</p>
|
||||
<div>
|
||||
{{ govukInsetText({
|
||||
"text": "((under18??Please get your application signed by a parent or
|
||||
guardian.))",
|
||||
"classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
|
||||
}}
|
||||
</div>
|
||||
<p class="govuk-body">
|
||||
For each person you send this message to, specify ‘yes’ or ‘no’ to
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
{% from "components/inset-text/macro.njk" import govukInsetText %}
|
||||
|
||||
<h2 class="heading-medium">
|
||||
Personalisation
|
||||
</h2>
|
||||
<p class="bottom-gutter-1-3">
|
||||
Use double brackets to personalise your message:
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
Hello ((first name)), your reference is ((ref number))
|
||||
</p>
|
||||
<div>
|
||||
{{ govukInsetText({
|
||||
"text": "Hello ((first name)), your reference is ((ref number))",
|
||||
"classes": "govuk-!-margin-top-0"})
|
||||
}}
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
{% from "components/inset-text/macro.njk" import govukInsetText %}
|
||||
|
||||
<h2 class="heading-medium">
|
||||
Send a document by email
|
||||
</h2>
|
||||
<p class="govuk-body">
|
||||
Use double brackets to add a placeholder field to your template. This will contain a secure link to download the document.
|
||||
</p>
|
||||
<div class="panel panel-border-wide">
|
||||
<p class="govuk-body">
|
||||
Download your document at: ((link_to_file))
|
||||
</p>
|
||||
<div>
|
||||
{{ govukInsetText({
|
||||
"text": "Download your document at: ((link_to_file))",
|
||||
"classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
|
||||
}}
|
||||
</div>
|
||||
Next, use the API to upload your document. Follow the instructions to send a document by email in the <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.documentation') }}">API documentation</a>.
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
'Save'
|
||||
) }}
|
||||
</div>
|
||||
<aside class="govuk-grid-column-full">
|
||||
<div class="govuk-grid-column-full">
|
||||
{% include "partials/templates/guidance-formatting.html" %}
|
||||
{% include "partials/templates/guidance-personalisation.html" %}
|
||||
{% include "partials/templates/guidance-optional-content.html" %}
|
||||
@@ -39,7 +39,7 @@
|
||||
{% if current_service.has_permission('upload_document') %}
|
||||
{% include "partials/templates/guidance-send-a-document.html" %}
|
||||
{% endif %}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
|
||||
@@ -28,11 +28,11 @@
|
||||
'Save'
|
||||
) }}
|
||||
</div>
|
||||
<aside class="govuk-grid-column-three-quarters">
|
||||
<div class="govuk-grid-column-three-quarters">
|
||||
{% include "partials/templates/guidance-formatting-letters.html" %}
|
||||
{% include "partials/templates/guidance-personalisation.html" %}
|
||||
{% include "partials/templates/guidance-optional-content.html" %}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
|
||||
@@ -41,12 +41,12 @@
|
||||
</div>
|
||||
{{ page_footer('Save') }}
|
||||
</div>
|
||||
<aside class="govuk-grid-column-full">
|
||||
<div class="govuk-grid-column-full">
|
||||
{% include "partials/templates/guidance-personalisation.html" %}
|
||||
{% include "partials/templates/guidance-optional-content.html" %}
|
||||
{% include "partials/templates/guidance-links.html" %}
|
||||
{% include "partials/templates/guidance-character-count.html" %}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
|
||||
@@ -19,9 +19,9 @@
|
||||
{{ form.postage }}
|
||||
{{ page_footer('Save') }}
|
||||
</div>
|
||||
<aside class="govuk-grid-column-three-quarters">
|
||||
<div class="govuk-grid-column-three-quarters">
|
||||
{% include "partials/templates/guidance-postage.html" %}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user