Merge pull request #675 from alphagov/fix-table-display

Fix table display
This commit is contained in:
Chris Hill-Scott
2016-06-13 11:39:08 +01:00
committed by GitHub
5 changed files with 101 additions and 80 deletions

View File

@@ -26,6 +26,16 @@
}
.big-number-smallest {
@extend %big-number;
.big-number-number {
@include bold-24();
}
}
.big-number-with-status {
@extend %big-number;

View File

@@ -1,7 +1,6 @@
.table {
margin-bottom: $gutter;
width: 100%;
table-layout: fixed;
}
.table-heading {
@@ -9,24 +8,32 @@
margin: 40px 0 $gutter-half 0;
}
.table-field-headings {
th {
padding: 0 0 5px 0;
.dashboard-table {
.table {
table-layout: fixed;
}
}
.table-row {
th {
display: table-cell;
width: 52.5%;
font-weight: normal;
.hint {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.table-field-headings {
th {
padding: 0 0 5px 0;
}
}
.table-row {
th {
display: table-cell;
width: 52.5%;
font-weight: normal;
.hint {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
%table-field,
@@ -105,7 +112,7 @@
.table-field-heading {
&-first {
.dashboard-table &-first {
width: 52.5%;
}

View File

@@ -1,11 +1,11 @@
{% macro big_number(number, label, label_link=None, currency='', smaller=False) %}
<div class="big-number{% if smaller %}-smaller{% endif %}">
{% macro big_number(number, label, label_link=None, currency='', smaller=False, smallest=False) %}
<div class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
<div class="big-number-number">
{% if number is number %}
{% if currency %}
{{ "{}{:,.2f}".format(currency, number) }}
{% else %}
{{ "{}{:,}".format(currency, number) }}
{{ "{:,}".format(number) }}
{% endif %}
{% else %}
{{ number }}

View File

@@ -1,35 +1,37 @@
{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
{% from "components/big-number.html" import big_number %}
{% call(item, row_number) list_table(
jobs,
caption="Recent batch jobs",
caption_visible=False,
empty_message='You havent sent any batch messages yet',
field_headings=[
'File',
'Sending',
'Delivered',
'Failed'
],
field_headings_visible=True
) %}
{% call row_heading() %}
<div class="file-list">
<a class="file-list-filename" href="{{ url_for('.view_job', service_id=current_service.id, job_id=item.id) }}">{{ item.original_file_name }}</a>
<span class="file-list-hint">Uploaded {{ item.created_at|format_datetime_short }}</span>
</div
<div class='dashboard-table'>
{% call(item, row_number) list_table(
jobs,
caption="Recent batch jobs",
caption_visible=False,
empty_message='You havent sent any batch messages yet',
field_headings=[
'File',
'Sending',
'Delivered',
'Failed'
],
field_headings_visible=True
) %}
{% call row_heading() %}
<div class="file-list">
<a class="file-list-filename" href="{{ url_for('.view_job', service_id=current_service.id, job_id=item.id) }}">{{ item.original_file_name }}</a>
<span class="file-list-hint">Uploaded {{ item.created_at|format_datetime_short }}</span>
</div
{% endcall %}
{% call field() %}
{{ big_number(
item.get('notifications_sent', 0) - item.get('notifications_delivered', 0) - item.get('notifications_failed', 0),
smallest=True
) }}
{% endcall %}
{% call field() %}
{{ big_number(item.get('notifications_delivered', 0), smallest=True) }}
{% endcall %}
{% call field(status='error' if 0 else '') %}
{{ big_number(item.get('notifications_failed', 0), smallest=True) }}
{% endcall %}
{% endcall %}
{% call field() %}
{{ big_number(
item.get('notifications_sent', 0) - item.get('notifications_delivered', 0) - item.get('notifications_failed', 0),
smaller=True
) }}
{% endcall %}
{% call field() %}
{{ big_number(item.get('notifications_delivered', 0), smaller=True) }}
{% endcall %}
{% call field(status='error' if 0 else '') %}
{{ big_number(item.get('notifications_failed', 0), smaller=True) }}
{% endcall %}
{% endcall %}
</div>

View File

@@ -41,38 +41,40 @@
</p>
{% endif %}
{% call(item, row_number) list_table(
notifications,
caption="Recent activity",
caption_visible=False,
empty_message='No messages found',
field_headings=['Recipient', 'Started', 'Status'],
field_headings_visible=False
) %}
<div class='dashboard-table'>
{% call(item, row_number) list_table(
notifications,
caption="Recent activity",
caption_visible=False,
empty_message='No messages found',
field_headings=['Recipient', 'Started', 'Status'],
field_headings_visible=False
) %}
{% call row_heading() %}
<p>
{{ item.to }}
</p>
<p class="hint">
{% if item.job %}
From <a href="{{ url_for(".view_job", service_id=current_service.id, job_id=item.job.id) }}">{{ item.job.original_file_name }}</a>
{% else %}
<a href="{{ url_for('.view_template_version', service_id=current_service.id, template_id=item.template.id, version=item.template_version) }}">{{ item.template.name }}</a>
from an API call
{% endif %}
</p>
{% endcall %}
{{ date_field(
(item.updated_at or item.created_at)|format_datetime_short
) }}
{% call field(status=item.status|format_notification_status_as_field_status, align='right') %}
{{ item.status|format_notification_status(item.template.template_type) }}
{% endcall %}
{% call row_heading() %}
<p>
{{ item.to }}
</p>
<p class="hint">
{% if item.job %}
From <a href="{{ url_for(".view_job", service_id=current_service.id, job_id=item.job.id) }}">{{ item.job.original_file_name }}</a>
{% else %}
<a href="{{ url_for('.view_template_version', service_id=current_service.id, template_id=item.template.id, version=item.template_version) }}">{{ item.template.name }}</a>
from an API call
{% endif %}
</p>
{% endcall %}
{{ date_field(
(item.updated_at or item.created_at)|format_datetime_short
) }}
{% call field(status=item.status|format_notification_status_as_field_status, align='right') %}
{{ item.status|format_notification_status(item.template.template_type) }}
{% endcall %}
{% endcall %}
</div>
{{ previous_next_navigation(prev_page, next_page) }}