mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-05 10:53:28 -05:00
819 - Make template help more prominent
This commit is contained in:
Jonathan Bobel
@@ -1,4 +1,4 @@
|
||||
<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-inset-text {%- if params.classes %} {{ params.classes }}{% endif %}"
|
||||
<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="bg-base-lightest padding-y-1 padding-x-2 {%- if params.classes %} {{ params.classes }}{% endif %}"
|
||||
{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
||||
{{ params.html | safe if params.html else params.text }}
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
<h2 class="font-body-lg">Message length</h2>
|
||||
<p class="usa-body">
|
||||
If your message is long then it will
|
||||
cost more.
|
||||
</p>
|
||||
<p class="usa-body">
|
||||
See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a> for details.
|
||||
</p>
|
||||
<h3 class="usa-accordion__heading">
|
||||
<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="message-length">
|
||||
Message length
|
||||
</button>
|
||||
</h3>
|
||||
<div id="message-length" class="usa-accordion__content usa-prose">
|
||||
<p class="usa-body">
|
||||
If your message is long then it will
|
||||
cost more.
|
||||
</p>
|
||||
<p class="usa-body">
|
||||
See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a> for details.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
|
||||
|
||||
<h2 class="font-body-lg">Links and URLs</h2>
|
||||
<p class="bottom-gutter-1-3">
|
||||
Always use full URLs, starting with https://. For example:
|
||||
{{ usaInsetText({
|
||||
"text": "Apply now at https://www.usa.gov/example",
|
||||
"classes": "usa-body"})
|
||||
}}
|
||||
<h3 class="usa-accordion__heading">
|
||||
<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="links-and-urls">
|
||||
Links and URLs
|
||||
</button>
|
||||
</h3>
|
||||
<div id="links-and-urls" class="usa-accordion__content usa-prose">
|
||||
<p>
|
||||
Always use full URLs, starting with https://. For example:
|
||||
{{ usaInsetText({
|
||||
"text": "Apply now at https://www.usa.gov/example",
|
||||
"classes": "usa-body"})
|
||||
}}
|
||||
</div>
|
||||
@@ -1,21 +1,25 @@
|
||||
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
|
||||
|
||||
<h2 class="font-body-lg">
|
||||
Optional content
|
||||
</h2>
|
||||
<p class="usa-body">
|
||||
Use double brackets and ‘??’ to define optional content.
|
||||
</p>
|
||||
<p class="bottom-gutter-1-3">
|
||||
For example if you only want to show something to people who are under
|
||||
18:
|
||||
</p>
|
||||
{{ usaInsetText({
|
||||
<h3 class="usa-accordion__heading">
|
||||
<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a2">
|
||||
Optional content
|
||||
</button>
|
||||
</h3>
|
||||
<div id="m-a2" class="usa-accordion__content usa-prose">
|
||||
<p class="usa-body">
|
||||
Use double brackets and ‘??’ to define optional content.
|
||||
</p>
|
||||
<p class="bottom-gutter-1-3">
|
||||
For example if you only want to show something to people who are under
|
||||
18:
|
||||
</p>
|
||||
{{ usaInsetText({
|
||||
"text": "((under18??Please get your application signed by a parent or
|
||||
guardian.))",
|
||||
"classes": "usa-body"})
|
||||
}}
|
||||
<p class="usa-body">
|
||||
For each person you send this message to, specify ‘yes’ or ‘no’ to
|
||||
show or hide this content.
|
||||
</p>
|
||||
}}
|
||||
<p class="usa-body">
|
||||
For each person you send this message to, specify ‘yes’ or ‘no’ to
|
||||
show or hide this content.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
|
||||
|
||||
<h2 class="font-body-lg">
|
||||
Personalization
|
||||
</h2>
|
||||
<p class="bottom-gutter-1-3">
|
||||
Use double brackets to personalize your message:
|
||||
</p>
|
||||
{{ usaInsetText({
|
||||
"text": "Hello ((first name)), your reference is ((ref number))",
|
||||
"classes": ""})
|
||||
}}
|
||||
@@ -0,0 +1,17 @@
|
||||
{% from "components/components/inset-text/macro.njk" import usaInsetText %}
|
||||
|
||||
<h3 class="usa-accordion__heading">
|
||||
<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="personalization">
|
||||
Personalization
|
||||
</button>
|
||||
</h3>
|
||||
<div id="personalization" class="usa-accordion__content usa-prose">
|
||||
<p class="bottom-gutter-1-3">
|
||||
Use double brackets to personalize your message:
|
||||
</p>
|
||||
{{ usaInsetText({
|
||||
"text": "Hello ((first name)), your reference is ((ref number))",
|
||||
"classes": ""})
|
||||
}}
|
||||
</div>
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
</div>
|
||||
<div class="grid-col-12">
|
||||
{% include "partials/templates/guidance-formatting.html" %}
|
||||
{% include "partials/templates/guidance-personalisation.html" %}
|
||||
{% include "partials/templates/guidance-personalization.html" %}
|
||||
{% include "partials/templates/guidance-optional-content.html" %}
|
||||
{% include "partials/templates/guidance-links.html" %}
|
||||
{% include "partials/templates/guidance-send-a-document.html" %}
|
||||
|
||||
@@ -20,11 +20,9 @@
|
||||
|
||||
{{ page_header('{} text message template'.format(heading_action)) }}
|
||||
|
||||
{{ usaAlert({
|
||||
"type": "info",
|
||||
"text": "Don't worry, saving the template will not send",
|
||||
"classes": "margin-top-2 usa-button--secondary"
|
||||
}) }}
|
||||
<a class="usa-link display-inline-flex margin-top-05" href="#help">
|
||||
How to customize your message
|
||||
</a>
|
||||
|
||||
{% if current_service.prefix_sms %}
|
||||
{% set content_hint = 'Your service name will be added to the start of your message. You can turn this off in Settings.' %}
|
||||
@@ -32,7 +30,7 @@
|
||||
|
||||
{% call form_wrapper() %}
|
||||
<div class="grid-row">
|
||||
<div class="grid-col-8">
|
||||
<div class="tablet:grid-col-8 mobile-lg:grid-col-12">
|
||||
{{ form.name(param_extensions={
|
||||
"extra_form_group_classes": "margin-bottom-2",
|
||||
"hint": {"text": "Your recipients will not see this"}
|
||||
@@ -50,22 +48,36 @@
|
||||
{{ form.process_type }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="grid-col-12">
|
||||
<div class="template-content-count">
|
||||
<div data-module="update-status" data-target="template_content" data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='sms') }}" aria-live="polite">
|
||||
|
||||
<div class="grid-row">
|
||||
<div class="grid-col-12">
|
||||
<div class="template-content-count">
|
||||
<div data-module="update-status" data-target="template_content"
|
||||
data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='sms') }}"
|
||||
aria-live="polite">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ page_footer('Save') }}
|
||||
<p class="usa-hint">
|
||||
After saving, you'll have the option to send 🚀
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid-col-12">
|
||||
{% 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" %}
|
||||
<div class="grid-row width-full">
|
||||
<div class="tablet:grid-col-2 mobile-lg:grid-col-12">
|
||||
{{ page_footer('Save') }}
|
||||
</div>
|
||||
<div class="tablet:grid-col-10 mobile-lg:grid-col-12">
|
||||
<p class="usa-hint margin-top-5 tablet:margin-left-neg-2">
|
||||
After saving, you'll have the option to send.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tablet:grid-col-9 mobile-lg:grid-col-12">
|
||||
<h2 id="help" class="font-body-xl margin-top-2">How to customize your message</h2>
|
||||
<div class="usa-accordion usa-accordion--bordered usa-accordion--multiselectable" data-allow-multiple>
|
||||
{% include "partials/templates/guidance-personalization.html" %}
|
||||
{% include "partials/templates/guidance-optional-content.html" %}
|
||||
{% include "partials/templates/guidance-links.html" %}
|
||||
{% include "partials/templates/guidance-character-count.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
Reference in New Issue
Block a user