mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-22 08:58:46 -04:00
fbc4abf85d
Text messages have a maximum length, which we tell the users. We
shouldn’t expect people to count the characters in the message
themselves.
This commit borrows [the word counter from the Digital Marketplace
frontend toolkit](9d17690de5/toolkit/javascripts/word-counter.js)
and adapts it to count characters instead.
Things I’m still not sure about with this:
- what should it say when the message goes over the length of one text
message
- what’s the interaction with placeholders, which will change the length
of the message
This commit also adds a line to the pricing page which explains that
service name counts towards the length of the message.
54 lines
1.6 KiB
HTML
54 lines
1.6 KiB
HTML
{% macro textbox(
|
|
field,
|
|
label=None,
|
|
hint=False,
|
|
highlight_tags=False,
|
|
autofocus=False,
|
|
help_link=None,
|
|
help_link_text=None,
|
|
width='2-3',
|
|
suffix=None,
|
|
safe_error_message=False,
|
|
rows=8,
|
|
character_count=False,
|
|
service_name=None
|
|
) %}
|
|
<div
|
|
class="form-group{% if field.errors %} error{% endif %}"
|
|
{% if autofocus %}data-module="autofocus"{% endif %}
|
|
{% if character_count %}data-module="character-count"{% endif %}
|
|
{% if service_name %}data-service-name="{{ service_name }}"{% endif %}
|
|
>
|
|
<label class="form-label" for="{{ field.name }}">
|
|
{% if label %}
|
|
{{ label }}
|
|
{% else %}
|
|
{{ field.label }}
|
|
{% endif %}
|
|
{% if hint %}
|
|
<span class="form-hint">
|
|
{{ hint }}
|
|
</span>
|
|
{% endif %}
|
|
{% if field.errors %}
|
|
<span class="error-message">
|
|
{% if not safe_error_message %}{{ field.errors[0] }}{% else %}{{ field.errors[0]|safe }}{% endif %}
|
|
</span>
|
|
{% endif %}
|
|
</label>
|
|
{{ field(**{
|
|
'class': 'form-control form-control-{} textbox-highlight-textbox'.format(width) if highlight_tags else 'form-control form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else ''),
|
|
'data-module': 'highlight-tags' if highlight_tags else '',
|
|
'rows': rows|string
|
|
}) }}
|
|
{% if suffix %}
|
|
<span>{{ suffix }}</span>
|
|
{% endif %}
|
|
{% if help_link and help_link_text %}
|
|
<p class="textbox-help-link">
|
|
<a href='{{ help_link }}'>{{ help_link_text }}</a>
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|