darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-22 08:58:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make list of areas on dashboard use full width

Browse Source 
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.
This commit is contained in:
Chris Hill-Scott
2020-10-27 15:16:27 +00:00
parent 340d66246a
commit cc04a924d0
6 changed files with 66 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/stylesheets/components/area-list.scss
View File

@@ -70,6 +70,10 @@
font-weight: bold;
}
&--smaller {
@include bold-16;
}
}
.govuk-button {

4
app/assets/stylesheets/views/dashboard.scss
View File

@@ -94,6 +94,10 @@
max-width: 580px;
}
&-status {
text-align: right;
}
}
/* The focus state for sibling links overlaps the hint so the hint's text colour needs to adapt */

2
app/templates/views/broadcast/dashboard.html
View File

@@ -16,7 +16,7 @@
</nav>
{% endif %}
<h1 class="heading-medium govuk-!-margin-bottom-2">Current alerts</h1>
<h1 class="heading-medium">Current alerts</h1>
{{ ajax_block(
partials,

82
app/templates/views/broadcast/partials/dashboard-table.html
View File

@@ -1,44 +1,48 @@
{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
<div class='{% if broadcasts %}dashboard-table{% endif%} ajax-block-container'>
{% 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">
<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>
<span class="file-list-hint-large govuk-!-margin-bottom-1">
{{ item.content }}
</span>
<ul class="area-list">
{% for area in item.areas %}
<li class="area-list-item area-list-item--unremoveable">{{ area.name }}</li>
{% endfor %}
</ul>
</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>
{% endcall %}
{% call field(align='right') %}
{% if item.status == 'pending-approval' %}
<p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
Waiting for approval
</p>
{% elif item.status == 'broadcasting' %}
<p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 live-broadcast">
Live since {{ item.starts_at|format_datetime_relative }}
</p>
{% else %}
<p class="govuk-body govuk-!-margin-top-6 govuk-!-margin-bottom-0 govuk-hint">
Broadcast {{ item.starts_at|format_datetime_relative }}
</p>
{% endif %}
{% endcall %}
{% endcall %}
<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>

2
app/templates/views/broadcast/previous-broadcasts.html
View File

@@ -8,7 +8,7 @@
{% block maincolumn_content %}
<h1 class="heading-medium govuk-!-margin-bottom-2">Previous alerts</h1>
<h1 class="heading-medium">Previous alerts</h1>
{% include('views/broadcast/partials/dashboard-table.html') %}

24
tests/app/main/views/test_broadcast.py
View File

@@ -281,7 +281,7 @@ def test_empty_broadcast_dashboard(
'Current alerts'
)
assert [
normalize_spaces(row.text) for row in page.select('tbody tr .table-empty-message')
normalize_spaces(row.text) for row in page.select('.table-empty-message')
] == [
'You do not have any current alerts',
]
@@ -300,15 +300,16 @@ def test_broadcast_dashboard(
service_id=SERVICE_ONE_ID,
)
assert len(page.select('table')) == len(page.select('h1')) == 1
assert len(page.select('.ajax-block-container')) == len(page.select('h1')) == 1
assert [
normalize_spaces(row.text) for row in page.select('table')[0].select('tbody tr')
normalize_spaces(row.text)
for row in page.select('.ajax-block-container')[0].select('.file-list')
] == [
'Half an hour ago This is a test England Scotland Waiting for approval',
'Hour and a half ago This is a test England Scotland Waiting for approval',
'Example template This is a test England Scotland Live since today at 2:20am',
'Example template This is a test England Scotland Live since today at 1:20am',
'Half an hour ago This is a test Waiting for approval England Scotland',
'Hour and a half ago This is a test Waiting for approval England Scotland',
'Example template This is a test Live since today at 2:20am England Scotland',
'Example template This is a test Live since today at 1:20am England Scotland',
]
@@ -351,12 +352,13 @@ def test_previous_broadcasts_page(
assert normalize_spaces(page.select_one('main h1').text) == (
'Previous alerts'
)
assert len(page.select('table')) == 1
assert len(page.select('.ajax-block-container')) == 1
assert [
normalize_spaces(row.text) for row in page.select('table')[0].select('tbody tr')
normalize_spaces(row.text)
for row in page.select('.ajax-block-container')[0].select('.file-list')
] == [
'Example template This is a test England Scotland Broadcast yesterday at 2:20pm',
'Example template This is a test England Scotland Broadcast yesterday at 2:20am',
'Example template This is a test Broadcast yesterday at 2:20pm England Scotland',
'Example template This is a test Broadcast yesterday at 2:20am England Scotland',
]