diff --git a/app/assets/stylesheets/_app.scss b/app/assets/stylesheets/_app.scss index a1c2b335cd..2aaec79615 100644 --- a/app/assets/stylesheets/_app.scss +++ b/app/assets/stylesheets/_app.scss @@ -208,3 +208,15 @@ details .arrow { .form--inline { display: inline-flex; } + +// paragraph style for no data text +// used on template statistics +.no-data { + @include govuk-font(16); + color: govuk-functional-colour(secondary-text); + margin-top: 10px; + margin-bottom: govuk-spacing(7); + border-top: 1px solid govuk-functional-colour(border); + border-bottom: 1px solid govuk-functional-colour(border); + padding: 0.75em 0 0.5625em 0; +} diff --git a/app/assets/stylesheets/components/spark-bar.scss b/app/assets/stylesheets/components/spark-bar.scss new file mode 100644 index 0000000000..88a5f61a87 --- /dev/null +++ b/app/assets/stylesheets/components/spark-bar.scss @@ -0,0 +1,26 @@ +@use 'govuk/helpers' as *; +@use 'govuk/settings' as *; + +.spark-bar { + @include govuk-font(16); + box-sizing: border-box; + display: block; + width: 100%; + margin-bottom: govuk-spacing(3); + color: govuk-functional-colour(text); + text-align: left; +} + +.spark-bar__bar { + @include govuk-font(27, $weight: bold, $tabular: true); + box-sizing: border-box; + display: inline-block; + overflow: visible; + background: mix(black, govuk-colour('black', $variant: "tint-95"), 7%); + color: govuk-functional-colour(text); + padding: 10px 6px 8px 0; + text-indent: 12px; + text-align: right; + margin: 2px 0 1px 0; + transition: width 0.6s ease-in-out; +} diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss index 7e953a292a..b7a1c6a6a7 100644 --- a/app/assets/stylesheets/components/table.scss +++ b/app/assets/stylesheets/components/table.scss @@ -425,16 +425,6 @@ a.table-show-more-link { color: govuk-functional-colour(link); } -.table-no-data { - @include govuk-font(16); - color: govuk-functional-colour(secondary-text); - margin-top: 10px; - margin-bottom: govuk-spacing(7); - border-top: 1px solid govuk-functional-colour(border); - border-bottom: 1px solid govuk-functional-colour(border); - padding: 0.75em 0 0.5625em 0; -} - .wide-left-hand-column { display: block; max-width: 560px; diff --git a/app/assets/stylesheets/govuk-frontend/extensions.scss b/app/assets/stylesheets/govuk-frontend/extensions.scss index 186c483df4..f0db80b5d1 100644 --- a/app/assets/stylesheets/govuk-frontend/extensions.scss +++ b/app/assets/stylesheets/govuk-frontend/extensions.scss @@ -110,6 +110,25 @@ $govuk-grid-widths: map.merge($govuk-grid-widths, $notify-grid-widths); } +// summary list with file name and metadata +// there will be 2 variants +// 24px filename and 19px metadata - template stats +// 19px filename and 16px metadata - other lists + +.notify-summary-list__filename { + @include govuk-typography-weight-bold; +} + +.notify-summary-list__filename--large { + @include govuk-font-size(24); +} + +.notify-summary-list__metadata { + @include govuk-media-query($from: tablet) { + margin-bottom: 0; + } +} + .notify-summary-list__key { @include govuk-media-query($from: tablet) { @@ -129,6 +148,14 @@ $govuk-grid-widths: map.merge($govuk-grid-widths, $notify-grid-widths); } +.notify-summary-list__key--50-100 { + + @include govuk-media-query($from: tablet) { + width: 50%; + } + +} + .govuk-summary-list__value--default { color: govuk-functional-colour(secondary-text); } diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index f4bdd62f2a..33ccb474d1 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -49,6 +49,7 @@ @use 'components/simple-search-form'; @use 'components/formatting-example'; @use 'components/sender-email-preview'; +@use 'components/spark-bar'; @use 'views/branding'; @use 'views/dashboard'; @use 'views/users'; diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss index 3fd6c11f4c..34610c9dce 100644 --- a/app/assets/stylesheets/views/dashboard.scss +++ b/app/assets/stylesheets/views/dashboard.scss @@ -18,33 +18,6 @@ padding-top: govuk-spacing(3); } -.spark-bar { - - @include govuk-font(16); - box-sizing: border-box; - display: block; - width: 100%; - margin-bottom: govuk-spacing(3); - height: govuk-spacing(3); - color: govuk-functional-colour(text); - text-align: left; - - &-bar { - @include govuk-font(27, $weight: bold, $tabular: true); - box-sizing: border-box; - display: inline-block; - overflow: visible; - background: mix(black, govuk-colour('black', $variant: "tint-95"), 7%); - color: govuk-functional-colour(text); - padding: 10px 6px 8px 0; - text-indent: 12px; - text-align: right; - margin: 2px 0 1px 0; - transition: width 0.6s ease-in-out; - } - -} - .file-list { // for file-lists with section-like content and a single item diff --git a/app/templates/components/spark-bar.html b/app/templates/components/spark-bar.html new file mode 100644 index 0000000000..aea8d3cd79 --- /dev/null +++ b/app/templates/components/spark-bar.html @@ -0,0 +1,11 @@ +{% macro spark_bar( + count, + max_count, + id=None +) %} + + + {{ '{:,.0f}'.format(count) }} + + +{% endmacro %} \ No newline at end of file diff --git a/app/templates/components/table.html b/app/templates/components/table.html index f22abfa549..3a69e8f70a 100644 --- a/app/templates/components/table.html +++ b/app/templates/components/table.html @@ -194,18 +194,3 @@ {% endcall %} {% endif %} {% endmacro %} - - -{% macro spark_bar_field( - count, - max_count, - id=None -) %} - {% call field(align='right') %} - - - {{ '{:,.0f}'.format(count) }} - - - {% endcall %} -{% endmacro %} diff --git a/app/templates/views/dashboard/all-template-statistics.html b/app/templates/views/dashboard/all-template-statistics.html index 360457d93a..91008318f3 100644 --- a/app/templates/views/dashboard/all-template-statistics.html +++ b/app/templates/views/dashboard/all-template-statistics.html @@ -1,6 +1,7 @@ {% from "components/page-header.html" import page_header %} {% from "components/pill.html" import pill %} -{% from "components/table.html" import list_table, row_heading, spark_bar_field %} +{% from "components/spark-bar.html" import spark_bar %} +{% from "govuk_frontend_jinja/components/summary-list/macro.html" import govukSummaryList %} {% extends "withnav_template.html" %} @@ -24,31 +25,36 @@ {% for month in months %}

{{ month.name }}

{% if not month.templates_used %} -

+

No messages sent

{% else %} -
- {% call(item, row_number) list_table( - month.templates_used, - caption=month.name, - caption_visible=False, - empty_message='', - field_headings=[ - 'Template', - 'Messages sent' - ], - field_headings_visible=False - ) %} - {% call row_heading() %} - {{ item.name }} - - {{ 1|message_count_label(item.type, suffix='template')|capitalize }} - - {% endcall %} - {{ spark_bar_field(item.requested_count, most_used_template_count) }} - {% endcall %} -
+ {% set templates_used_month_data = [] %} + {% for item in month.templates_used %} + {% set summary_key_html %} + + {{ item.name }} + +

+ {{ 1|message_count_label(item.type, suffix='template')|capitalize }} +

+ {% endset %} + {% do templates_used_month_data.append({ + "key": { + "classes": "notify-summary-list__key notify-summary-list__key--50-100", + "html": summary_key_html, + }, + "value": { + "html": spark_bar(item.requested_count, most_used_template_count), + } + }) %} + {% endfor %} + + {{ govukSummaryList({ + "classes": "notify-summary-list", + "rows": templates_used_month_data + }) }} {% endif %} {% endfor %} diff --git a/app/templates/views/dashboard/template-statistics-lazy.html b/app/templates/views/dashboard/template-statistics-lazy.html index 972a22ba59..766a795e43 100644 --- a/app/templates/views/dashboard/template-statistics-lazy.html +++ b/app/templates/views/dashboard/template-statistics-lazy.html @@ -1,46 +1,39 @@ -{% from "components/table.html" import list_table, row_heading, field %} {% from "components/show-more.html" import show_more %} +{% from "govuk_frontend_jinja/components/summary-list/macro.html" import govukSummaryList %}
-
- {% call(item, row_number) list_table( - [1], - caption="By template", - caption_visible=True, - empty_message='', - field_headings=[ - 'Template', - 'Messages sent' - ], - field_headings_visible=False - ) %} - - {% call row_heading() %} - - - -   - - - - -   - - {% endcall %} - - {% call field() %} - - -   - - - {% endcall %} - - {% endcall %} - {{ show_more( - url_for('main.template_usage', service_id=current_service.id), - 'See templates used by month', - with_border=False - ) }} -
+

By template

+ {% set summary_key_html %} + + +   + + + {% endset %} + {% set summary_value_html %} + + +   + + + {% endset %} + {{ govukSummaryList({ + "classes": "notify-summary-list", + "rows": [ + { + "key": { + "classes": "notify-summary-list__key notify-summary-list__key--50-100", + "html": summary_key_html, + }, + "value": { + "html": summary_value_html, + } + } + ] + }) }} + {{ show_more( + url_for('main.template_usage', service_id=current_service.id), + 'See templates used by month', + with_border=False + ) }}
diff --git a/app/templates/views/dashboard/template-statistics.html b/app/templates/views/dashboard/template-statistics.html index 09a3838a19..278bc7ad55 100644 --- a/app/templates/views/dashboard/template-statistics.html +++ b/app/templates/views/dashboard/template-statistics.html @@ -1,44 +1,50 @@ -{% from "components/table.html" import list_table, row_heading, spark_bar_field %} +{% from "components/spark-bar.html" import spark_bar %} {% from "components/show-more.html" import show_more %} +{% from "govuk_frontend_jinja/components/summary-list/macro.html" import govukSummaryList %}
{% if template_statistics|length > 1 %} -
- {% call(item, row_number) list_table( - template_statistics, - caption="By template", - caption_visible=True, - empty_message='', - field_headings=[ - 'Template', - 'Messages sent' - ], - field_headings_visible=False - ) %} - - {% call row_heading() %} +

By template

+ {% set template_stats = [] %} + {% for item in template_statistics %} + {% set summary_key_html %} {% if item.is_precompiled_letter %} - - Provided as PDF - - - Letter - + + Provided as PDF + +

+ Letter +

{% else %} - {{ item.template_name }} - - {{ 1|message_count_label(item.template_type, suffix='template')|capitalize }} - + + {{ item.template_name }} + +

+ {{ 1|message_count_label(item.template_type, suffix='template')|capitalize }} +

{% endif %} - {% endcall %} + {% endset %} + {% do template_stats.append({ + "key": { + "classes": "notify-summary-list__key notify-summary-list__key--50-100", + "html": summary_key_html, + }, + "value": { + "html": spark_bar(item.count, most_used_template_count, id=item.template_id), + } + }) %} + {% endfor %} + + {{ govukSummaryList({ + "classes": "notify-summary-list", + "rows": template_stats + }) }} - {{ spark_bar_field(item.count, most_used_template_count, id=item.template_id) }} - {% endcall %} {{ show_more( url_for('main.template_usage', service_id=current_service.id), 'See templates used by month', with_border=False ) }} -
{% endif %}
diff --git a/tests/app/main/views/test_dashboard.py b/tests/app/main/views/test_dashboard.py index c577c3d348..92243341bd 100644 --- a/tests/app/main/views/test_dashboard.py +++ b/tests/app/main/views/test_dashboard.py @@ -689,25 +689,25 @@ def test_should_show_recent_templates_on_dashboard( mock_template_stats.assert_called_once_with(SERVICE_ONE_ID, limit_days=7) - table_rows = partial_page.select_one("tbody").select("tr") + list_rows = partial_page.select_one(".notify-summary-list").select(".govuk-summary-list__row") - assert len(table_rows) == 4 + assert len(list_rows) == 4 - assert "Provided as PDF" in table_rows[0].select("th")[0].text - assert "Letter" in table_rows[0].select("th")[0].text - assert "400" in table_rows[0].select("td")[0].text + assert "Provided as PDF" in list_rows[0].select("dt")[0].text + assert "Letter" in list_rows[0].select("dt")[0].text + assert "400" in list_rows[0].select("dd")[0].text - assert "three" in table_rows[1].select("th")[0].text - assert "Letter template" in table_rows[1].select("th")[0].text - assert "300" in table_rows[1].select("td")[0].text + assert "three" in list_rows[1].select("dt")[0].text + assert "Letter template" in list_rows[1].select("dt")[0].text + assert "300" in list_rows[1].select("dd")[0].text - assert "two" in table_rows[2].select("th")[0].text - assert "Email template" in table_rows[2].select("th")[0].text - assert "200" in table_rows[2].select("td")[0].text + assert "two" in list_rows[2].select("dt")[0].text + assert "Email template" in list_rows[2].select("dt")[0].text + assert "200" in list_rows[2].select("dd")[0].text - assert "one" in table_rows[3].select("th")[0].text - assert "Text message template" in table_rows[3].select("th")[0].text - assert "100" in table_rows[3].select("td")[0].text + assert "one" in list_rows[3].select("dt")[0].text + assert "Text message template" in list_rows[3].select("dt")[0].text + assert "100" in list_rows[3].select("dd")[0].text @pytest.mark.parametrize( @@ -799,12 +799,12 @@ def test_should_show_monthly_breakdown_of_template_usage( mock_get_monthly_template_usage.assert_called_once_with(SERVICE_ONE_ID, 2016) - table_rows = page.select("tbody tr") + list_rows = page.select(".govuk-summary-list__row") - assert " ".join(table_rows[0].text.split()) == "My first template Text message template 2" + assert " ".join(list_rows[0].text.split()) == "My first template Text message template 2" - assert len(table_rows) == len(["April"]) - assert len(page.select(".table-no-data")) == len(["May", "June", "July"]) + assert len(list_rows) == len(["April"]) + assert len(page.select(".no-data")) == len(["May", "June", "July"]) def test_anyone_can_see_monthly_breakdown( @@ -1986,6 +1986,7 @@ def test_service_dashboard_skeleton( assert [(heading.name, normalize_spaces(heading.text)) for heading in page.select("main h1, main h2, main h3")] == [ ("h1", "Dashboard"), ("h2", "In the last 7 days"), + ("h3", "By template"), ("h2", "This year"), ] @@ -2012,7 +2013,7 @@ def test_service_dashboard_skeleton( "letters sent failed – Unknown %", ] - assert normalize_spaces(template_statistics.select_one("table caption").text) == "By template" + assert normalize_spaces(template_statistics.select_one("h3").text) == "By template" assert template_statistics.select(".spark-bar") assert [