darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-05 16:18:26 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
91e74929eb76f83c2052a708ddb8ce03d2e7fdaa
notifications-admin/app/templates/views/broadcast/partials/dashboard-table.html

45 lines
1.7 KiB
HTML
Raw Normal View History

Make the broadcast dashboard update via AJAX Same technique as we use for other pages that update via AJAX. I’ve split the page up into separate chunks because the DiffDOM library we use finds it easier to work out what’s changed when there are fewer elements/a shallower tree.
2020-07-14 13:39:29 +01:00
{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
Fix keyline width on empty dashboard tables The styling of the empty message seems to conflict with the hard-coded widths added by the `dashboard-table` class. So we should only add the `dashboard-table` class when there is content we need to control the width of.
2020-07-14 15:22:48 +01:00
<div class='{% if broadcasts %}dashboard-table{% endif%} ajax-block-container'>
Make the broadcast dashboard update via AJAX Same technique as we use for other pages that update via AJAX. I’ve split the page up into separate chunks because the DiffDOM library we use finds it easier to work out what’s changed when there are fewer elements/a shallower tree.
2020-07-14 13:39:29 +01:00
{% call(item, row_number) list_table(
broadcasts|sort|reverse|list,
caption="Live broadcasts",
caption_visible=False,
empty_message=empty_message,
field_headings=[
'Template name',
'Status'
],
field_headings_visible=False
) %}
{% call row_heading() %}
<div class="file-list">
<a class="file-list-filename-large govuk-link govuk-link--no-visited-state" href="{{ url_for('.view_broadcast_message', service_id=current_service.id, broadcast_message_id=item.id) }}">{{ item.template_name }}</a>
Style areas on dashboard the same as alert preview Our style for areas is pale blue background with black keylines or bold black text. This commit makes the display of area names on the dashboard consistent with that visual style. This also means that we’re not truncating the list of areas, which is appropriate because no one area is more important than any of the others.
2020-10-14 10:43:04 +01:00
<span class="file-list-hint-large govuk-!-margin-bottom-1">
Show the content of the alert on the dashboard The content is as important as which areas you’ve sent the broadcast to.
2020-10-13 15:43:25 +01:00
{{ item.content }}
</span>
Style areas on dashboard the same as alert preview Our style for areas is pale blue background with black keylines or bold black text. This commit makes the display of area names on the dashboard consistent with that visual style. This also means that we’re not truncating the list of areas, which is appropriate because no one area is more important than any of the others.
2020-10-14 10:43:04 +01:00
<ul class="area-list">
{% for area in item.areas %}
<li class="area-list-item area-list-item--unremoveable">{{ area.name }}</li>
{% endfor %}
</ul>
Make the broadcast dashboard update via AJAX Same technique as we use for other pages that update via AJAX. I’ve split the page up into separate chunks because the DiffDOM library we use finds it easier to work out what’s changed when there are fewer elements/a shallower tree.
2020-07-14 13:39:29 +01:00
</div>
{% endcall %}
{% call field(align='right') %}
Show pending broadcasts on dashboard When we have an approval flow, `pending-approval` will be the state a broadcast is in between being a draft and broadcasting. This means it is the earliest stage at which a broadcast can appear on the dashboard, so this commit adds a new section at the top of the dashboard to display these broadcasts (since the dashboard is in a reverse chronological order). Rather than displaying the scheduled time, the extra information shown is the person who drafted the broadcast, since I reckon you’ll be coming to this page because they’ve asked you to approve their broadcast.
2020-07-17 08:07:40 +01:00
{% if item.status == 'pending-approval' %}
Make the status text of pending broadcasts grey Only live broadcasts have their status in black text. This is to emphasise them. Lost this in a merge conflict somewhere.
2020-07-17 08:37:19 +01:00
<p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
Show pending broadcasts on dashboard When we have an approval flow, `pending-approval` will be the state a broadcast is in between being a draft and broadcasting. This means it is the earliest stage at which a broadcast can appear on the dashboard, so this commit adds a new section at the top of the dashboard to display these broadcasts (since the dashboard is in a reverse chronological order). Rather than displaying the scheduled time, the extra information shown is the person who drafted the broadcast, since I reckon you’ll be coming to this page because they’ve asked you to approve their broadcast.
2020-07-17 08:07:40 +01:00
Prepared by {{ item.created_by.name }}
</p>
{% elif item.status == 'broadcasting' %}
Add a ‘live broadcast’ indicator We have a reckon that live broadcasts don’t feel prominent, consequential or active enough on the dashboard. This commit adds an animated component, similar to an ‘on air’ indicator in a broadcast studio, or a ‘recording’ indicator on a video camera. This is one option for addressing our reckon. We shouldn’t merge this until we have a better understanding of the problem from another round of user research.
2020-07-21 09:05:24 +01:00
<p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 live-broadcast">
Make the broadcast dashboard update via AJAX Same technique as we use for other pages that update via AJAX. I’ve split the page up into separate chunks because the DiffDOM library we use finds it easier to work out what’s changed when there are fewer elements/a shallower tree.
2020-07-14 13:39:29 +01:00
Live until {{ item.finishes_at|format_datetime_relative }}
</p>
{% else %}
<p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
Move end time to bottom of page End time is less important than the status of the broadcast, or when it was started (eg when it was received by most people in the area).
2020-10-14 14:05:14 +01:00
Broadcast {{ item.starts_at|format_datetime_relative }}
Make the broadcast dashboard update via AJAX Same technique as we use for other pages that update via AJAX. I’ve split the page up into separate chunks because the DiffDOM library we use finds it easier to work out what’s changed when there are fewer elements/a shallower tree.
2020-07-14 13:39:29 +01:00
</p>
{% endif %}
{% endcall %}
{% endcall %}
</div>
Reference in New Issue Copy Permalink