mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-30 11:19:44 -04:00
cc04a924d0
When the list of areas is restricted to half the width of the page it starts to look pretty higgledy-piggledy when you have lots of areas or areas with very long names. To do this I’ve ripped out the table markup in favour of headings, paragraphs and lists. Probably pros and cons for each, but it was really hard to do the layout with the content in a table.
49 lines
1.8 KiB
HTML
49 lines
1.8 KiB
HTML
{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
|
|
|
|
<div class='ajax-block-container'>
|
|
{% for item in broadcasts|sort|reverse|list %}
|
|
<div class="keyline-block">
|
|
<div class="file-list govuk-!-margin-bottom-2">
|
|
<h2>
|
|
<a class="file-list-filename-large govuk-link govuk-link--no-visited-state" href="{{ url_for(view_broadcast_endpoint, service_id=current_service.id, broadcast_message_id=item.id) }}">{{ item.template_name }}</a>
|
|
</h2>
|
|
<div class="govuk-grid-row">
|
|
<div class="govuk-grid-column-one-half">
|
|
<span class="file-list-hint-large govuk-!-margin-bottom-2">
|
|
{{ item.content }}
|
|
</span>
|
|
</div>
|
|
<div class="govuk-grid-column-one-half file-list-status">
|
|
{% if item.status == 'pending-approval' %}
|
|
<p class="govuk-body govuk-!-margin-bottom-0 govuk-hint">
|
|
Waiting for approval
|
|
</p>
|
|
{% elif item.status == 'broadcasting' %}
|
|
<p class="govuk-body govuk-!-margin-bottom-0 live-broadcast">
|
|
Live since {{ item.starts_at|format_datetime_relative }}
|
|
</p>
|
|
{% else %}
|
|
<p class="govuk-body govuk-!-margin-bottom-0 govuk-hint">
|
|
Broadcast {{ item.starts_at|format_datetime_relative }}
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<ul class="area-list">
|
|
{% for area in item.areas %}
|
|
<li class="area-list-item area-list-item--unremoveable area-list-item--smaller">{{ area.name }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% if loop.last %}
|
|
<div class="keyline-block">
|
|
</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<p class="table-empty-message keyline-block govuk-!-padding-top-4">
|
|
{{ empty_message }}
|
|
</p>
|
|
{% endfor %}
|
|
</div>
|