mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-09 10:39:49 -04:00
b1ab167e1d
The size and position of the 'X' has deviated a bit from the design intentions of the original. The original shared the x-height of the area text and has positioned to be vertically and horizontally centered. These changes assume an x-height of 11px and use flexbox to center the new 'X' horizontally and vertically. This also tweaks the visual state when focused and then hovered so matches other buttons without breaking the design.
72 lines
2.8 KiB
HTML
72 lines
2.8 KiB
HTML
{% extends "withnav_template.html" %}
|
|
{% from "components/button/macro.njk" import govukButton %}
|
|
{% from "components/page-header.html" import page_header %}
|
|
{% from "components/page-footer.html" import page_footer %}
|
|
{% from "views/broadcast/macros/area-map.html" import map %}
|
|
{% from "components/back-link/macro.njk" import govukBackLink %}
|
|
|
|
{% block service_page_title %}
|
|
Choose where to send this alert
|
|
{% endblock %}
|
|
|
|
{% block extra_stylesheets %}
|
|
{% include "views/broadcast/partials/area-map-stylesheets.html" %}
|
|
{% endblock %}
|
|
|
|
{% block extra_javascripts %}
|
|
{% include "views/broadcast/partials/area-map-javascripts.html" %}
|
|
{% endblock %}
|
|
|
|
{% block backLink %}
|
|
{{ govukBackLink({ "href": back_link }) }}
|
|
{% endblock %}
|
|
|
|
{% block maincolumn_content %}
|
|
|
|
{{ page_header("Choose where to send this alert") }}
|
|
|
|
{% for area in broadcast_message.areas %}
|
|
{% if loop.first %}
|
|
<ul class="area-list">
|
|
{% endif %}
|
|
<li class="area-list-item">
|
|
{{ area.name }}
|
|
<a class="area-list-item-remove govuk-button" data-module="govuk-button" role="button" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">
|
|
<svg id="area-list-item-remove__icon" width="11" height="11" viewbox="0 0 10 10" aria-labelledby="area__{{ loop.index }}" role="img" xmlns="http://www.w3.org/2000/svg"> <g>
|
|
<title id="area__{{ loop.index }}">Remove {{ area.name }}</title>
|
|
<g transform="rotate(45),translate(1, -6)">
|
|
<line stroke-width="1.75" id="svg_1" y2="0" x2="6" y1="12" x1="6" stroke="currentColor" fill="none"/>
|
|
<line stroke-width="1.75" id="svg_3" y2="6" x2="0" y1="6" x1="12" stroke="currentColor" fill="none"/>
|
|
</g>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
{% if loop.last %}
|
|
</ul>
|
|
{{ govukButton({
|
|
"element": "a",
|
|
"text": "Add another area",
|
|
"href": url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
|
|
"classes": "govuk-button--secondary govuk-!-margin-bottom-5"
|
|
}) }}
|
|
{% endif %}
|
|
{% else %}
|
|
<p class="govuk-body">
|
|
{{ govukButton({
|
|
"element": "a",
|
|
"text": "Add broadcast areas",
|
|
"href": url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
|
|
"classes": "govuk-button--secondary"
|
|
}) }}
|
|
</p>
|
|
{% endfor %}
|
|
|
|
{% if broadcast_message.areas %}
|
|
{{ map(broadcast_message) }}
|
|
<form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" method="get" class="govuk-!-margin-top-1">
|
|
{{ page_footer('Preview this alert') }}
|
|
</form>
|
|
{% endif %}
|
|
|
|
{% endblock %}
|