Skip to content

Use CSS grid on performance page #5900

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
tombye wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Use CSS grid on performance page #5900

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 29 additions & 93 deletions app/assets/stylesheets/views/performance.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,34 @@
// Styles specific to the performance page

$gutter-with-14px-text: 1.696em;
$gutter-with-16px-text: 1.484em;
$gutter-with-19px-text: 1.25em;
.totals__wrapper {
display: grid;
grid-template-columns: 1fr min-content min-content min-content
}

.totals--messages,
.dashboard-table--4-column,
.dashboard-table--4-column > .table,
.dashboard-table--4-column > .table > thead,
.dashboard-table--4-column > .table > thead > tr {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}

table dashboard-table--2-column > table > thead > tr,
table dashboard-table--2-column > table > tbody > tr,
.totals--2-column {
display: grid;
grid-template-columns: 1fr 1fr;
}

.table-show-more-link {
grid-column: 1 / -1;
}

.dashboard-table .table-field-heading-first {
width: auto;
}

.totals__all,
.totals__set-type {
Expand All @@ -26,93 +52,3 @@ $gutter-with-19px-text: 1.25em;
display: block;
width: 100%;
}

// Dashboard tables apply padding to the right of all table headers and cells except the last
//
// We reverse this, so the first table header and cell have no padding that could be considered as
// part of their width
.performance .dashboard-table .table-field-headings-visible th,
.performance .table-font-xsmall td {
padding-right: 0;
}

// Set gutters for table headers on
.performance .dashboard-table .table-field-headings-visible th {
padding-left: $gutter-with-16px-text;
}

// Set gutters for table cells to match table headers
.performance .table-font-xsmall td {
padding-left: $gutter-with-14px-text;
}

// Cancel padding for gutters on first table headers and cells
.performance .dashboard-table .table-field-headings-visible th:first-of-type,
.performance .table-font-xsmall td:first-of-type {
padding-left: 0;
}

.performance .dashboard-table--4-column .table-field-headings-visible th:first-of-type,
.performance .dashboard-table--4-column .table-font-xsmall td:first-of-type {
width: 40%; // 40% is the lowest width the first column works at with the smaller text
}

.performance .dashboard-table--2-column .table-field-headings-visible th:first-of-type,
.performance .dashboard-table--2-column .table-font-xsmall td:first-of-type {
width: 52.5%;
}

// Totals use block-level elements so will fill the width and stack by default
// Make them display as a table on larger screens, to match the data table below
@include govuk-media-query($from: tablet) {
.totals {
display: table;
width: 100%;
}

.totals > .totals__all,
.totals > .totals__set-type {
display: table-cell;
}

.totals__all {
padding-bottom: 0;
padding-left: 0; // Remove padding-left now applied to all totals
}

.totals > .totals__set-type {
width: auto; // reset width, set to 100% by default
}

// Give totals and table headers the same gutters
.totals__set-type,
.performance .dashboard-table .table-field-headings-visible th {
padding-left: $gutter-with-19px-text;
}

// Give table cells the same gutters
.performance .table-font-xsmall td {
padding-left: $gutter-with-16px-text;
}
}

// Handle other screen sizes from tablet up, making totals match tables as much as possible
.totals--4-column > .totals__all,
.performance .dashboard-table--4-column .table-field-headings-visible th:first-of-type,
.performance .dashboard-table--4-column .table-font-xsmall td:first-of-type {
// 640-730px has the larger text but less space so needs a smaller first-column width
@include govuk-media-query($from: tablet, $until: 730px) {
width: 35%;
}

// 900px upwards works with the default of 52.5%
@include govuk-media-query($from: 900px) {
width: 52.5%;
}
}

.totals--2-column > .totals__all,
.performance .dashboard-table--2-column .table-field-headings-visible th:first-of-type,
.performance .dashboard-table--2-column .table-font-xsmall td:first-of-type {
width: 52.5%;
}
112 changes: 57 additions & 55 deletions app/templates/views/guidance/features/performance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,63 +23,65 @@ <h2 class="govuk-heading-m" id='messages-sent-since-may-2016'>
Messages sent since May 2016
</h2>

<div class="totals totals--4-column">
<p class="totals__all">
<span class="product-page-big-number">{{ total_notifications|format_billions }}</span>
total
</p>
<p class="totals__set-type">
{{ big_number(
email_notifications|format_billions,
label=email_notifications|message_count_noun('email'),
smallest=True,
) }}
</p>
<p class="totals__set-type">
{{ big_number(
sms_notifications|format_billions,
label=sms_notifications|message_count_noun('sms'),
smallest=True,
) }}
</p>
<p class="totals__set-type">
{{ big_number(
letter_notifications|format_billions,
label=letter_notifications|message_count_noun('letter'),
smallest=True,
) }}
</p>
</div>
<div class="totals__wrapper">
<div class="totals totals--4-column totals--messages">
<p class="totals__all">
<span class="product-page-big-number">{{ total_notifications|format_billions }}</span>
total
</p>
<p class="totals__set-type">
{{ big_number(
email_notifications|format_billions,
label=email_notifications|message_count_noun('email'),
smallest=True,
) }}
</p>
<p class="totals__set-type">
{{ big_number(
sms_notifications|format_billions,
label=sms_notifications|message_count_noun('sms'),
smallest=True,
) }}
</p>
<p class="totals__set-type">
{{ big_number(
letter_notifications|format_billions,
label=letter_notifications|message_count_noun('letter'),
smallest=True,
) }}
</p>
</div>

<div class="dashboard-table dashboard-table--4-column">
{% call(item, row_number) list_table(
notifications_by_type|reverse,
caption='Messages sent since May 2016',
caption_visible=False,
field_headings=[
'Date',
99|message_count_noun('email')|capitalize,
99|message_count_noun('sms')|capitalize,
99|message_count_noun('letter')|capitalize,
],
empty_message='No data to show'
) %}
{% call field() %}
{{ item.date | format_date_normal }}
{% endcall %}
{% call field() %}
{{ item.emails|format_thousands }}
<div class="dashboard-table dashboard-table--4-column">
{% call(item, row_number) list_table(
notifications_by_type|reverse,
caption='Messages sent since May 2016',
caption_visible=False,
field_headings=[
'Date',
99|message_count_noun('email')|capitalize,
99|message_count_noun('sms')|capitalize,
99|message_count_noun('letter')|capitalize,
],
empty_message='No data to show'
) %}
{% call field() %}
{{ item.date | format_date_normal }}
{% endcall %}
{% call field() %}
{{ item.emails|format_thousands }}
{% endcall %}
{% call field() %}
{{ item.sms|format_thousands }}
{% endcall %}
{% call field() %}
{{ item.letters|format_thousands }}
{% endcall %}
{% endcall %}
{% call field() %}
{{ item.sms|format_thousands }}
{% endcall %}
{% call field() %}
{{ item.letters|format_thousands }}
{% endcall %}
{% endcall %}
<p class="table-show-more-link">
Only showing the last {{ notifications_by_type|length }} days
</p>
<p class="table-show-more-link">
Only showing the last {{ notifications_by_type|length }} days
</p>
</div>
</div>

<h2 class="govuk-heading-m" id='messages-sent-within-10-seconds'>
Expand Down
Loading