From e35b0adafa6a0a7b95865931dcf7d92e93e07ec6 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 23 Apr 2026 16:21:44 +0100 Subject: [PATCH] Temp commit --- app/assets/stylesheets/views/performance.scss | 122 +++++------------- .../views/guidance/features/performance.html | 112 ++++++++-------- 2 files changed, 86 insertions(+), 148 deletions(-) diff --git a/app/assets/stylesheets/views/performance.scss b/app/assets/stylesheets/views/performance.scss index 811b3b210b..ae75b7f74d 100644 --- a/app/assets/stylesheets/views/performance.scss +++ b/app/assets/stylesheets/views/performance.scss @@ -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 { @@ -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%; -} diff --git a/app/templates/views/guidance/features/performance.html b/app/templates/views/guidance/features/performance.html index 6a856fb0a3..004689a80d 100644 --- a/app/templates/views/guidance/features/performance.html +++ b/app/templates/views/guidance/features/performance.html @@ -23,63 +23,65 @@

Messages sent since May 2016

-
-

- {{ total_notifications|format_billions }} - total -

-

- {{ big_number( - email_notifications|format_billions, - label=email_notifications|message_count_noun('email'), - smallest=True, - ) }} -

-

- {{ big_number( - sms_notifications|format_billions, - label=sms_notifications|message_count_noun('sms'), - smallest=True, - ) }} -

-

- {{ big_number( - letter_notifications|format_billions, - label=letter_notifications|message_count_noun('letter'), - smallest=True, - ) }} -

-
+
+
+

+ {{ total_notifications|format_billions }} + total +

+

+ {{ big_number( + email_notifications|format_billions, + label=email_notifications|message_count_noun('email'), + smallest=True, + ) }} +

+

+ {{ big_number( + sms_notifications|format_billions, + label=sms_notifications|message_count_noun('sms'), + smallest=True, + ) }} +

+

+ {{ big_number( + letter_notifications|format_billions, + label=letter_notifications|message_count_noun('letter'), + smallest=True, + ) }} +

+
-
- {% 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 }} +
+ {% 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 %} -

- Only showing the last {{ notifications_by_type|length }} days -

+

+ Only showing the last {{ notifications_by_type|length }} days +

+