Make appearance of ‘empty’ table rows even

Our table rows take up 65px vertical space.

We also have things that look like rows that say:
- there are no rows
- there are more rows than can be shown on screen

This commit makes them appear the same height.
This commit is contained in:
Chris Hill-Scott
2019-12-31 13:36:18 +00:00
parent 3b7dc05dd6
commit 227fca6263
3 changed files with 12 additions and 11 deletions

View File

@@ -324,11 +324,12 @@
border-bottom: 1px solid $border-colour; border-bottom: 1px solid $border-colour;
} }
.table-empty-message { .table-empty-message,
@include core-16; td.table-empty-message {
@include core-19;
color: $secondary-text-colour; color: $secondary-text-colour;
border-bottom: 1px solid $border-colour; border-bottom: 1px solid $border-colour;
padding: 0.75em 0 0.5625em 0; padding: 20px 0 20px 0;
} }
.table-show-more-link { .table-show-more-link {
@@ -337,7 +338,7 @@
color: $secondary-text-colour; color: $secondary-text-colour;
margin-bottom: $gutter * 1.3333; margin-bottom: $gutter * 1.3333;
border-bottom: 1px solid $border-colour; border-bottom: 1px solid $border-colour;
padding: 10px 0 10px 0; padding: 35px 0 10px 0;
text-align: center; text-align: center;
.table + & { .table + & {

View File

@@ -1,4 +1,4 @@
{% from "components/table.html" import list_table, field %} {% from "components/table.html" import list_table, row_heading %}
{% from "components/message-count-label.html" import message_count_label %} {% from "components/message-count-label.html" import message_count_label %}
{% extends "withnav_template.html" %} {% extends "withnav_template.html" %}
@@ -10,7 +10,7 @@
<h1 class="heading-large"> <h1 class="heading-large">
Returned letters Returned letters
</h1> </h1>
<div class="body-copy-table" id='pill-selected-item'> <div class="dashboard-table">
{% call(item, row_number) list_table( {% call(item, row_number) list_table(
data, data,
caption="Returned letters report", caption="Returned letters report",
@@ -18,8 +18,8 @@
empty_message='If you have returned letter reports they will be listed here', empty_message='If you have returned letter reports they will be listed here',
field_headings=['Report'], field_headings=['Report'],
field_headings_visible=False field_headings_visible=False
) %} ) %}
{% call field() %} {% call row_heading() %}
<a class="govuk_link file-list-filename" <a class="govuk_link file-list-filename"
href="{{url_for('.returned_letters', service_id=current_service.id, reported_at=item.reported_at)}}">{{ item.reported_at | format_date_normal }}</a> href="{{url_for('.returned_letters', service_id=current_service.id, reported_at=item.reported_at)}}">{{ item.reported_at | format_date_normal }}</a>
<p class="file-list-hint"> <p class="file-list-hint">

View File

@@ -19,12 +19,12 @@ def test_returned_letter_summary(
assert page.h1.string.strip() == 'Returned letters' assert page.h1.string.strip() == 'Returned letters'
assert normalize_spaces( assert normalize_spaces(
page.select_one('.table-field-left-aligned').text page.select_one('.table-field').text
) == ( ) == (
'24 December 2019 ' '24 December 2019 '
'30 letters' '30 letters'
) )
assert page.select_one('.table-field-left-aligned a')['href'] == url_for( assert page.select_one('.table-field a')['href'] == url_for(
'.returned_letters', '.returned_letters',
service_id=SERVICE_ONE_ID, service_id=SERVICE_ONE_ID,
reported_at='2019-12-24', reported_at='2019-12-24',
@@ -45,7 +45,7 @@ def test_returned_letter_summary_with_one_letter(
assert page.h1.string.strip() == 'Returned letters' assert page.h1.string.strip() == 'Returned letters'
assert normalize_spaces( assert normalize_spaces(
page.select_one('.table-field-left-aligned').text page.select_one('.table-field').text
) == ( ) == (
'24 December 2019 ' '24 December 2019 '
'1 letter' '1 letter'