mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-08 08:28:15 -04:00
05075b5af5
Adding left margin to the button meant that when it wrapped onto a new line it didn’t align flush with the left edge of its containing column. Instead we can: - move the link outside the list (which is better semantically anyway) - then add the margin to the last item of the list (which is now the last selected area, not the link)
112 lines
3.3 KiB
HTML
112 lines
3.3 KiB
HTML
{% from "components/button/macro.njk" import govukButton %}
|
|
{% from "components/page-header.html" import page_header %}
|
|
{% from "components/page-footer.html" import sticky_page_footer %}
|
|
|
|
{% extends "withnav_template.html" %}
|
|
|
|
{% block service_page_title %}
|
|
Choose where to broadcast to
|
|
{% endblock %}
|
|
|
|
{% block extra_stylesheets %}
|
|
<link rel="stylesheet" href="{{ asset_url('stylesheets/leaflet.css') }}" />
|
|
<style>
|
|
#map {
|
|
z-index: 50;
|
|
margin-bottom: 30px;
|
|
border: 1px solid #b1b4b6;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block extra_javascripts %}
|
|
<script src="{{ asset_url('javascripts/leaflet.js') }}"></script>
|
|
<script>
|
|
var mapElement = document.getElementById('map');
|
|
mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
|
|
var mymap = L.map(
|
|
'map',
|
|
{
|
|
scrollWheelZoom: false
|
|
}
|
|
)
|
|
var polygons = []
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(mymap);
|
|
|
|
{% for polygon in broadcast_message.simple_polygons %}
|
|
polygons.push(
|
|
L.polygon({{polygon}}, {
|
|
color: '#2B8CC4', // $light-blue
|
|
opacity: 0.4,
|
|
fillColor: '#2B8CC4', // $light-blue
|
|
fillOpacity: 0.3,
|
|
weight: 1
|
|
})
|
|
);
|
|
{% endfor %}
|
|
|
|
{% for polygon in broadcast_message.polygons %}
|
|
polygons.push(
|
|
L.polygon({{polygon}}, {
|
|
color: '#0b0b0c', // $black
|
|
fillOpacity: 0,
|
|
weight: 2
|
|
})
|
|
);
|
|
{% endfor %}
|
|
|
|
var polygonGroup = L.featureGroup(polygons).addTo(mymap);
|
|
mymap.fitBounds(
|
|
polygonGroup.getBounds(),
|
|
{padding: [5, 5]}
|
|
);
|
|
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block maincolumn_content %}
|
|
|
|
{{ page_header(
|
|
"Choose where to broadcast to",
|
|
back_link=url_for('.view_template', service_id=current_service.id, template_id=broadcast_message.template_id)
|
|
) }}
|
|
|
|
{% 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" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">remove</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 %}
|
|
<div id="map"></div>
|
|
<form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" method="get">
|
|
{{ sticky_page_footer('Continue to preview') }}
|
|
</form>
|
|
{% endif %}
|
|
|
|
{% endblock %}
|