Updates to table wrappers across the application

Grid update to dashboard
Small style updates
This commit is contained in:
Jonathan Bobel
2024-07-25 15:36:31 -04:00
parent 3ca1b4b32a
commit dfcd71a6d3
22 changed files with 98 additions and 99 deletions

View File

@@ -376,9 +376,6 @@ td.table-empty-message {
background-image: url(../img/material-icons/description.svg);
}
}
.table-wrapper {
overflow-x: scroll;
}
}
.dashboard-table {

View File

@@ -22,7 +22,7 @@
{% else %}
{% if notifications %}
<div class="dashboard-table bottom-gutter-3-2">
<div class="dashboard-table overflow-x-auto">
{% endif %}
{% if job.still_processing %}
<p class="bottom-gutter hint">

View File

@@ -1,8 +1,8 @@
{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, notification_status_field %}
{% from "components/page-footer.html" import page_footer %}
<div class="ajax-block-container table-wrapper" aria-labelledby='pill-selected-item'>
<div class="dashboard-table bottom-gutter-3-2">
<div class="ajax-block-container" aria-labelledby='pill-selected-item'>
<div class="dashboard-table overflow-x-auto">
{% call(item, row_number) list_table(
[notification],

View File

@@ -5,7 +5,7 @@
<div class="ajax-block-container" id='pill-selected-item'>
{% if notifications %}
<div class="table-wrapper">
<div class="overflow-x-auto">
<div class='dashboard-table'>
{% endif %}
{% call(item, row_number) list_table(

View File

@@ -14,8 +14,8 @@
{% block maincolumn_content %}
{{ page_header('Callbacks') }}
<div class="table-wrapper">
<div class="bottom-gutter-3-2 dashboard-table body-copy-table">
<div class="overflow-x-auto">
<div class="bottom-gutter-3-2 dashboard-table body-copy-table overflow-x-auto">
{% call mapping_table(
caption='General',
field_headings=['Label', 'Value', 'Action'],

View File

@@ -41,7 +41,7 @@
</li>
</ul>
</div>
<div class="usa-table-container--scrollable" tabindex="0">
<div class="usa-table-container--scrollable overflow-x-auto" tabindex="0">
<table class="usa-table usa-table--borderless width-full">
<caption class="font-body-lg table-heading">
Note: Only the first 5 rows are displayed here.

View File

@@ -1,6 +1,6 @@
{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
<div class="table-wrapper">
<div class="overflow-x-auto">
<div class='dashboard-table ajax-block-container'>
{% call(item, row_number) list_table(
jobs,

View File

@@ -28,7 +28,7 @@
No messages sent
</p>
{% else %}
<div class='template-statistics-table'>
<div class='template-statistics-table overflow-x-auto'>
{% call(item, row_number) list_table(
month.templates_used,
caption=month.name,

View File

@@ -30,7 +30,7 @@
{{ ajax_block(partials, updates_url, 'template-statistics') }}
<h2 class="margin-top-4 margin-bottom-1">Recent Batches</h2>
<div class="table-wrapper">
<div class="overflow-x-auto">
<table class="usa-table usa-table--borderless job-table">
<thead class="table-field-headings">
<tr>

View File

@@ -2,7 +2,7 @@
<div class="ajax-block-container">
{% if template_statistics|length > 1 %}
<div class='template-statistics-table'>
<div class='template-statistics-table overflow-x-auto'>
{% call(item, row_number) list_table(
template_statistics,
caption="Messages sent by template",

View File

@@ -23,36 +23,34 @@ Inbound SMS
<h1 class="font-body-2xl">
Inbound SMS
</h1>
<table class="usa-table usa-table--borderless inbound">
<thread>
<tr>
<th>{{table_headings.field_headings[0]}}</th>
<th>{{table_headings.field_headings[1]}}</th>
<th>{{table_headings.field_headings[2]}}</th>
</tr>
</thread>
<tbody>
{% for value in inbound_num_list.data: %}
<div class="overflow-x-auto">
<table class="usa-table usa-table--borderless inbound width-full">
<thead>
<tr>
<td>{{value.number}}</td>
<td>
{% if value.active %}
Active
{% elif not value.service.name %}
Not used
{% else %}
Inactive
{% endif %}
</td>
<td>
<a href="{{ url_for('main.service_dashboard', service_id=value.service.id) }}" class="usa-link bold">{{ value.service.name }}</a>
</td>
<th>{{table_headings.field_headings[0]}}</th>
<th>{{table_headings.field_headings[1]}}</th>
<th>{{table_headings.field_headings[2]}}</th>
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for value in inbound_num_list.data: %}
<tr>
<td>{{value.number}}</td>
<td>
{% if value.active %}
Active
{% elif not value.service.name %}
Not used
{% else %}
Inactive
{% endif %}
</td>
<td>
<a href="{{ url_for('main.service_dashboard', service_id=value.service.id) }}" class="usa-link bold">{{ value.service.name }}</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}

View File

@@ -49,7 +49,7 @@
<p>Notify cannot tell you if your users open an email or click on the links in an email. We do not track open rates and click-throughs because there are privacy issues. Tracking emails without asking permission from users could breach General Data Protection Regulations (GDPR).</p> -->
<h2 id="text-message-statuses" class="heading-medium">Text messages</h2>
<div class="margin-bottom-8">
<div class="margin-bottom-8 overflow-x-auto">
{% call mapping_table(
caption='Message statuses text messages',
field_headings=['Status', 'Description'],

View File

@@ -44,33 +44,31 @@
</div>
</div>
<div class="table-wrapper">
<div class="dashboard-table">
{% call(item, row_number) list_table(
notifications_by_type|reverse,
caption='Messages sent since May 2023',
caption_visible=False,
field_headings=[
'Date',
99|message_count_noun('email')|capitalize,
99|message_count_noun('sms')|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 %}
<div class="dashboard-table overflow-x-auto">
{% call(item, row_number) list_table(
notifications_by_type|reverse,
caption='Messages sent since May 2023',
caption_visible=False,
field_headings=[
'Date',
99|message_count_noun('email')|capitalize,
99|message_count_noun('sms')|capitalize,
],
empty_message='No data to show'
) %}
{% call field() %}
{{ item.date | format_date_normal }}
{% endcall %}
<p class="table-show-more-link">
Only showing the last {{ notifications_by_type|length }} days
</p>
</div>
{% call field() %}
{{ item.emails|format_thousands }}
{% endcall %}
{% call field() %}
{{ item.sms|format_thousands }}
{% endcall %}
{% endcall %}
<p class="table-show-more-link">
Only showing the last {{ notifications_by_type|length }} days
</p>
</div>
<h2 class="govuk-heading-m">
@@ -84,7 +82,7 @@
) }}
</div>
</div>
<div class="table-wrapper">
<div class="overflow-x-auto">
<div class="dashboard-table">
{% call(item, row_number) list_table(
processing_time | reverse,
@@ -124,7 +122,7 @@
<span class="usa-sr-only">using Notify.</span>
</div>
</div>
<div class="table-wrapper">
<div class="overflow-x-auto">
<div class="dashboard-table">
{% call(item, row_number) list_table(
organizations_using_notify,

View File

@@ -16,7 +16,7 @@
</ol>
</nav>
<div class="grid-row margin-bottom-10">
<div class="tablet:grid-col-3 margin-top-4">
<div class="tablet:grid-col-2 margin-top-4">
<nav class="navigation">
<ul class="usa-sidenav">
@@ -41,7 +41,7 @@
</ul>
</nav>
</div>
<div class="grid-col-9 tablet:grid-col-9 padding-left-4 sub-content">
<div class="grid-col-10 tablet:grid-col-10 padding-left-4 sub-content">
{% block backLink %}{% endblock %}
<main id="main-content" role="main">
{% block content %}

View File

@@ -13,26 +13,26 @@
Email complaints
</h1>
<div class="overflow-x-auto">
{% call(item, row_number) list_table(
complaints,
caption="Complaints",
caption_visible=False,
empty_message='No complaints',
field_headings=['Notification Id', 'Service', 'Complaint type', 'Complaint Date'],
field_headings_visible=True
) %}
{% call(item, row_number) list_table(
complaints,
caption="Complaints",
caption_visible=False,
empty_message='No complaints',
field_headings=['Notification Id', 'Service', 'Complaint type', 'Complaint Date'],
field_headings_visible=True
) %}
{{ link_field(item.notification_id, url_for('main.view_notification', service_id=item.service_id, notification_id=item.notification_id)) }}
{{ link_field(item.notification_id, url_for('main.view_notification', service_id=item.service_id, notification_id=item.notification_id)) }}
{{ link_field(item.service_name, url_for('main.service_dashboard', service_id=item.service_id)) }}
{{ link_field(item.service_name, url_for('main.service_dashboard', service_id=item.service_id)) }}
{{ text_field(item.complaint_type) }}
{{ text_field(item.complaint_type) }}
{{ text_field(item.complaint_date|format_datetime_table if item.complaint_date else None) }}
{% endcall %}
{{ text_field(item.complaint_date|format_datetime_table if item.complaint_date else None) }}
{% endcall %}
</div>
{{ previous_next_navigation(prev_page, next_page) }}
{% endblock %}

View File

@@ -7,6 +7,7 @@
{% from "components/components/details/macro.njk" import usaDetails %}
{% macro services_table(services, caption) %}
<div class="overflow-x-auto">
{% call(item, row_number) mapping_table(
caption=caption,
caption_visible=False,
@@ -48,6 +49,7 @@
{% endfor %}
{% endcall %}
</div>
{% endmacro %}

View File

@@ -35,7 +35,7 @@ part.</p>
<h4>Calculation of message parts without special characters</h4>
<div class="bottom-gutter-3-2">
<div class="overflow-x-auto">
{% call mapping_table(
caption='Text message pricing',
field_headings=['Message length', 'Charge'],
@@ -86,7 +86,7 @@ recipients preferred language, but we are aware that, rarely, a phone carrier
to be calculated as detailed below.<p>
<h4>Calculation of message parts with special characters or non-romanized scripts</h4>
{% set accentedChars %}
<div class="bottom-gutter-3-2">
<div class="overflow-x-auto">
{% call mapping_table(
caption='Accented characters that affect text message charges',
field_headings=['Character', 'Description'],
@@ -151,7 +151,7 @@ to be calculated as detailed below.<p>
"html": accentedChars
}) }}
<div class="bottom-gutter-3-2">
<div class="overflow-x-auto">
{% call mapping_table(
caption='Pricing for text messages containing accented characters that affect the charges',
field_headings=['Message length', 'Charge'],

View File

@@ -16,7 +16,7 @@
<h1 class="font-body-lg">Settings</h1>
<div class="bottom-gutter-3-2 settings-table body-copy-table">
<div class="bottom-gutter-3-2 settings-table body-copy-table overflow-x-auto">
{% call mapping_table(
caption='General',

View File

@@ -20,7 +20,7 @@ Notify.gov
<div class="desktop:grid-col-7 tablet:grid-col-12">
<h1 class="font-serif-2xl usa-hero__heading">Reach people where they are with government-powered text messages</h1>
<p class="font-sans-lg">Notify.gov is a text message service that helps federal, state, local, tribal and territorial governments more effectively communicate with the people they serve.</p>
<div class="usa-button-group margin-bottom-5">
<div class="usa-button-group margin-bottom-5 flex-align-center">
<a class="usa-button usa-button login-button login-button--primary margin-right-2" href="{{ initial_signin_url }}">Sign in with <img src="{{ asset_url('images/logo-login.svg') }}" alt="Login.gov logo">
</a>
if you are an existing pilot partner

View File

@@ -70,7 +70,7 @@
</div> #}
{% if months %}
<div class="table-wrapper">
<div class="overflow-x-auto">
<div class="dashboard-table usage-table body-copy-table margin-top-4">
{% call(item, row_index) list_table(
months,

View File

@@ -30,7 +30,7 @@
{% block orgNavBreadcrumb %}{% include "/new/components/org_nav_breadcrumb.html" %}{% endblock %}
{% endif %}
<div class="grid-row margin-top-5">
<div class="tablet:grid-col-3">
<div class="tablet:grid-col-2">
{% block sideNavigation %}
{% if current_org.name %}
{% include "/new/components/org_nav.html" %}
@@ -44,7 +44,7 @@
#}
{% endblock %}
</div>
<div class="tablet:grid-col-9 tablet:padding-left-4">
<div class="tablet:grid-col-10 tablet:padding-left-4">
{% block beforeContent %}
{% block backLink %}{% endblock %}
{% endblock %}

6
poetry.lock generated
View File

@@ -1344,9 +1344,13 @@ files = [
{file = "lxml-5.2.2-cp36-cp36m-win_amd64.whl", hash = "sha256:edcfa83e03370032a489430215c1e7783128808fd3e2e0a3225deee278585196"},
{file = "lxml-5.2.2-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:28bf95177400066596cdbcfc933312493799382879da504633d16cf60bba735b"},
{file = "lxml-5.2.2-cp37-cp37m-manylinux_2_12_i686.manylinux2010_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:3a745cc98d504d5bd2c19b10c79c61c7c3df9222629f1b6210c0368177589fb8"},
{file = "lxml-5.2.2-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:1b590b39ef90c6b22ec0be925b211298e810b4856909c8ca60d27ffbca6c12e6"},
{file = "lxml-5.2.2-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:b336b0416828022bfd5a2e3083e7f5ba54b96242159f83c7e3eebaec752f1716"},
{file = "lxml-5.2.2-cp37-cp37m-manylinux_2_28_aarch64.whl", hash = "sha256:c2faf60c583af0d135e853c86ac2735ce178f0e338a3c7f9ae8f622fd2eb788c"},
{file = "lxml-5.2.2-cp37-cp37m-manylinux_2_28_x86_64.whl", hash = "sha256:4bc6cb140a7a0ad1f7bc37e018d0ed690b7b6520ade518285dc3171f7a117905"},
{file = "lxml-5.2.2-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:7ff762670cada8e05b32bf1e4dc50b140790909caa8303cfddc4d702b71ea184"},
{file = "lxml-5.2.2-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:57f0a0bbc9868e10ebe874e9f129d2917750adf008fe7b9c1598c0fbbfdde6a6"},
{file = "lxml-5.2.2-cp37-cp37m-musllinux_1_2_aarch64.whl", hash = "sha256:a6d2092797b388342c1bc932077ad232f914351932353e2e8706851c870bca1f"},
{file = "lxml-5.2.2-cp37-cp37m-musllinux_1_2_x86_64.whl", hash = "sha256:60499fe961b21264e17a471ec296dcbf4365fbea611bf9e303ab69db7159ce61"},
{file = "lxml-5.2.2-cp37-cp37m-win32.whl", hash = "sha256:d9b342c76003c6b9336a80efcc766748a333573abf9350f4094ee46b006ec18f"},
{file = "lxml-5.2.2-cp37-cp37m-win_amd64.whl", hash = "sha256:b16db2770517b8799c79aa80f4053cd6f8b716f21f8aca962725a9565ce3ee40"},
@@ -1681,7 +1685,6 @@ files = [
{file = "msgpack-1.0.8-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:5fbb160554e319f7b22ecf530a80a3ff496d38e8e07ae763b9e82fadfe96f273"},
{file = "msgpack-1.0.8-cp39-cp39-win32.whl", hash = "sha256:f9af38a89b6a5c04b7d18c492c8ccf2aee7048aff1ce8437c4683bb5a1df893d"},
{file = "msgpack-1.0.8-cp39-cp39-win_amd64.whl", hash = "sha256:ed59dd52075f8fc91da6053b12e8c89e37aa043f8986efd89e61fae69dc1b011"},
{file = "msgpack-1.0.8-py3-none-any.whl", hash = "sha256:24f727df1e20b9876fa6e95f840a2a2651e34c0ad147676356f4bf5fbb0206ca"},
{file = "msgpack-1.0.8.tar.gz", hash = "sha256:95c02b0e27e706e48d0e5426d1710ca78e0f0628d6e89d5b5a5b91a5f12274f3"},
]
@@ -2528,6 +2531,7 @@ files = [
{file = "PyYAML-6.0.1-cp311-cp311-win_amd64.whl", hash = "sha256:bf07ee2fef7014951eeb99f56f39c9bb4af143d8aa3c21b1677805985307da34"},
{file = "PyYAML-6.0.1-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:855fb52b0dc35af121542a76b9a84f8d1cd886ea97c84703eaa6d88e37a2ad28"},
{file = "PyYAML-6.0.1-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:40df9b996c2b73138957fe23a16a4f0ba614f4c0efce1e9406a184b6d07fa3a9"},
{file = "PyYAML-6.0.1-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:a08c6f0fe150303c1c6b71ebcd7213c2858041a7e01975da3a99aed1e7a378ef"},
{file = "PyYAML-6.0.1-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:6c22bec3fbe2524cde73d7ada88f6566758a8f7227bfbf93a408a9d86bcc12a0"},
{file = "PyYAML-6.0.1-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:8d4e9c88387b0f5c7d5f281e55304de64cf7f9c0021a3525bd3b1c542da3b0e4"},
{file = "PyYAML-6.0.1-cp312-cp312-win32.whl", hash = "sha256:d483d2cdf104e7c9fa60c544d92981f12ad66a457afae824d146093b8c294c54"},