mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-05-30 19:10:42 -04:00
79314de817
At the moment branding is an undocumented feature. We get a bunch of support tickets from teams asking its possible. This commit: - lets people know it’s possible, and what the options are - is the first step towards making this process as self-service as possible In some cases we will be able to infer a user’s organisation from there email address, and Google image search their logo. So the experience for them is that they press a button and government just sorts it out for you (also known as "the dream"). In other cases we will have to get back to people asking for a copy of their logo, or to find out about their service, but this is what we have to do at the moment anyway.
131 lines
3.9 KiB
HTML
131 lines
3.9 KiB
HTML
{% macro radios(
|
|
field,
|
|
hint=None,
|
|
disable=[],
|
|
option_hints={},
|
|
hide_legend=False
|
|
) %}
|
|
<div class="form-group {% if field.errors %} form-group-error{% endif %}">
|
|
<fieldset>
|
|
<legend class="form-label">
|
|
{% if hide_legend %}<span class="visually-hidden">{% endif %}
|
|
{{ field.label.text|safe }}
|
|
{% if hide_legend %}</span>{% endif %}
|
|
{% if field.errors %}
|
|
<span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
|
|
{{ field.errors[0] }}
|
|
</span>
|
|
{% endif %}
|
|
</legend>
|
|
{% for option in field %}
|
|
{{ radio(option, disable, option_hints) }}
|
|
{% endfor %}
|
|
</fieldset>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro radio(option, disable=[], option_hints={}) %}
|
|
<div class="multiple-choice">
|
|
<input
|
|
id="{{ option.id }}" name="{{ option.name }}" type="radio" value="{{ option.data }}"
|
|
{% if option.data in disable %}
|
|
disabled
|
|
{% endif %}
|
|
{% if option.checked %}
|
|
checked
|
|
{% endif %}
|
|
>
|
|
<label class="block-label" for="{{ option.id }}">
|
|
{{ option.label.text }}
|
|
{% if option_hints[option.data] %}
|
|
<div class="block-label-hint">
|
|
{{ option_hints[option.data] }}
|
|
</div>
|
|
{% endif %}
|
|
</label>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro radio_select(
|
|
field,
|
|
hint=None,
|
|
wrapping_class='form-group'
|
|
) %}
|
|
<div class="{{ wrapping_class }} {% if field.errors %} form-group-error{% endif %}">
|
|
<fieldset>
|
|
<legend class="form-label">
|
|
{{ field.label.text }}
|
|
{% if field.errors %}
|
|
<span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
|
|
{{ field.errors[0] }}
|
|
</span>
|
|
{% endif %}
|
|
</legend>
|
|
<div class="radio-select" data-module="radio-select" data-categories="{{ field.categories|join(',') }}">
|
|
<div class="radio-select-column">
|
|
{% for option in field %}
|
|
<div class="multiple-choice">
|
|
{{ option }}
|
|
<label for="{{ option.id }}">
|
|
{{ option.label.text }}
|
|
</label>
|
|
</div>
|
|
{% if loop.first %}
|
|
</div>
|
|
<div class="radio-select-column">
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro branding_radios(
|
|
field,
|
|
hint=None,
|
|
branding_dict={},
|
|
show_header=True
|
|
) %}
|
|
<div class="form-group {% if field.errors %} form-group-error{% endif %}">
|
|
<fieldset>
|
|
<legend class="form-label">
|
|
{% if show_header %}
|
|
{{ field.label.text }}
|
|
{% endif %}
|
|
{% if field.errors %}
|
|
<span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
|
|
{{ field.errors[0] }}
|
|
</span>
|
|
{% endif %}
|
|
</legend>
|
|
{% for value, option, checked in field.iter_choices() %}
|
|
<div class="multiple-choice branding-radio">
|
|
<input
|
|
type="radio"
|
|
name="{{ field.name }}"
|
|
id="{{ field.name }}-{{ loop.index }}"
|
|
value="{{ value }}"
|
|
{% if checked %}checked="checked"{% endif %}
|
|
/>
|
|
<label class="block-label" for="{{ field.name }}-{{ loop.index }}">
|
|
{% if branding_dict.get(value, {}).get('colour') %}
|
|
<span style="background: {{ branding_dict[value].colour }}; display: inline-block; width: 3px; height: 27px;"></span>
|
|
{% endif %}
|
|
{% if branding_dict.get(value, {}).get('logo') %}
|
|
<img
|
|
src="{{ branding_dict[value].logo }}"
|
|
height="27"
|
|
/>
|
|
{% endif %}
|
|
{{option}}
|
|
</label>
|
|
</div>
|
|
{% endfor %}
|
|
</fieldset>
|
|
</div>
|
|
{% endmacro %}
|