Enhance the ‘how to do placeholders’ hint

This commit makes the ‘how to do placeholders’ box part of the tour,
with the same blue background.

It also adds some Javascript enhancement so that:
- it responds to the contents of the message template
- has a ‘show me’ link which inserts ‘Dear ((name))’ into the template
  contents textbox

We’ve found that this has helped people understnad what placeholders
are, and how to do them.
This commit is contained in:
Chris Hill-Scott
2016-03-30 11:39:16 +01:00
parent 5d873bdc45
commit eaa72074db
7 changed files with 84 additions and 33 deletions

View File

@@ -20,23 +20,20 @@
</div>
<div class="column-two-thirds">
{{ textbox(form.template_content, highlight_tags=True, width='1-1') }}
{{ page_footer(
'Save',
delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None,
delete_link_text='Delete this template'
) }}
</div>
<div class="column-one-third">
<label for='template_content' class='edit-template-placeholder-hint'>
<p>
Add personalisation with double brackets, eg Dear ((name))
</p>
<p>
Youll fill in the real data when you send a message.
</p>
<label for='template_content' class='placeholder-hint'>
<div class="banner-mode" id="placeholder-hint" aria-live="polite">
<p>Add fields using ((double brackets))</p>
</div>
</label>
</div>
</div>
{{ page_footer(
'Save',
delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None,
delete_link_text='Delete this template'
) }}
</form>

View File

@@ -19,23 +19,20 @@
</div>
<div class="column-two-thirds">
{{ textbox(form.template_content, highlight_tags=True, width='1-1') }}
{{ page_footer(
'Save',
delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None,
delete_link_text='Delete this template'
) }}
</div>
<div class="column-one-third">
<label for='template_content' class='edit-template-placeholder-hint'>
<p>
Add personalisation with double brackets, eg Dear ((name))
</p>
<p>
You'll have to add the real data when you send a message.
</p>
<label for='template_content' class='placeholder-hint'>
<div class="banner-mode" id="placeholder-hint" aria-live="polite">
<p>Add fields using ((double brackets))</p>
</div>
</label>
</div>
</div>
{{ page_footer(
'Save',
delete_link=url_for('.delete_service_template', service_id=service_id, template_id=template_id) if template_id or None,
delete_link_text='Delete this template'
) }}
</form>