darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-11 17:38:50 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1777 from GSA/1490-responsive-tables

Browse Source 
1490 responsive tables
This commit is contained in:
Steven Reilly
2024-07-29 14:58:58 -04:00
committed by GitHub
parent 78564acea7 765920ef0a
commit 044175bac6
23 changed files with 159 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/sass/uswds/_uswds-theme-custom-styles.scss
View File

@@ -327,6 +327,16 @@ td.table-empty-message {
bottom: 0;
}
@media (max-width: units('desktop-lg')) {
.table-overflow-x-auto {
overflow-x: auto;
table {
min-width: 768px;
}
}
}
// Dashboard
.dashboard {
@@ -376,9 +386,6 @@ td.table-empty-message {
background-image: url(../img/material-icons/description.svg);
}
}
.table-wrapper {
overflow-x: scroll;
}
}
.dashboard-table {

2
app/templates/partials/jobs/notifications.html
View File

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

4
app/templates/partials/notifications/notifications.html
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 table-overflow-x-auto">
{% call(item, row_number) list_table(
[notification],

2
app/templates/views/activity/notifications.html
View File

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

4
app/templates/views/api/callbacks.html
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="table-overflow-x-auto">
<div class="bottom-gutter-3-2 dashboard-table body-copy-table table-overflow-x-auto">
{% call mapping_table(
caption='General',
field_headings=['Label', 'Value', 'Action'],

2
app/templates/views/check/preview.html
View File

@@ -41,7 +41,7 @@
</li>
</ul>
</div>
<div class="usa-table-container--scrollable" tabindex="0">
<div class="usa-table-container--scrollable table-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.

2
app/templates/views/dashboard/_jobs.html
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="table-overflow-x-auto">
<div class='dashboard-table ajax-block-container'>
{% call(item, row_number) list_table(
jobs,

2
app/templates/views/dashboard/all-template-statistics.html
View File

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

2
app/templates/views/dashboard/dashboard.html
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="table-overflow-x-auto">
<table class="usa-table usa-table--borderless job-table">
<thead class="table-field-headings">
<tr>

2
app/templates/views/dashboard/template-statistics.html
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 table-overflow-x-auto'>
{% call(item, row_number) list_table(
template_statistics,
caption="Messages sent by template",

100
app/templates/views/guidance/index.html
View File

@@ -162,55 +162,57 @@
location, the flag to receive the content needs to be captured in its own column with a Yes or No (Y/N) flag.</p>
<h3>Example</h3>
<table class="usa-table">
<caption class="usa-sr-only">
Example
</caption>
<thead>
<tr>
<th scope="col">Phone number</th>
<th scope="col">First name</th>
<th scope="col">Last name</th>
<th scope="col">Spanish</th>
<th scope="col">English</th>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>123-456-7890</td>
<td>Lulu</td>
<td>Praether</td>
<td>N</td>
<td>Y</td>
<td>November 2, 2023</td>
<td>3:25</td>
<td>123 Ford Rd.</td>
</tr>
<tr>
<td>234-567-8901</td>
<td>Sela</td>
<td>Appel</td>
<td>Y</td>
<td>N</td>
<td>November 2, 2023</td>
<td>4:00</td>
<td>123 Ford Rd.</td>
</tr>
<tr>
<td>123-456-7890</td>
<td>Dexter</td>
<td>Moseley</td>
<td>N</td>
<td>Y</td>
<td>November 2, 2023</td>
<td>2:00</td>
<td>123 Ford Rd.</td>
</tr>
</tbody>
</table>
<div class="table-overflow-x-auto">
<table class="usa-table">
<caption class="usa-sr-only">
Example
</caption>
<thead>
<tr>
<th scope="col">Phone number</th>
<th scope="col">First name</th>
<th scope="col">Last name</th>
<th scope="col">Spanish</th>
<th scope="col">English</th>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope="col">Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>123-456-7890</td>
<td>Lulu</td>
<td>Praether</td>
<td>N</td>
<td>Y</td>
<td>November 2, 2023</td>
<td>3:25</td>
<td>123 Ford Rd.</td>
</tr>
<tr>
<td>234-567-8901</td>
<td>Sela</td>
<td>Appel</td>
<td>Y</td>
<td>N</td>
<td>November 2, 2023</td>
<td>4:00</td>
<td>123 Ford Rd.</td>
</tr>
<tr>
<td>123-456-7890</td>
<td>Dexter</td>
<td>Moseley</td>
<td>N</td>
<td>Y</td>
<td>November 2, 2023</td>
<td>2:00</td>
<td>123 Ford Rd.</td>
</tr>
</tbody>
</table>
</div>
{# Preventing fraud #}
<h2 class="padding-top-1" id="prevent-fraud">Preventing fraud</h2>

58
app/templates/views/inbound-sms-admin.html
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="table-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 %}

2
app/templates/views/message-status.html
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 table-overflow-x-auto">
{% call mapping_table(
caption='Message statuses – text messages',
field_headings=['Status', 'Description'],

54
app/templates/views/performance.html
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 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="table-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="table-overflow-x-auto">
<div class="dashboard-table">
{% call(item, row_number) list_table(
organizations_using_notify,

4
app/templates/views/platform-admin/_base_template.html
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 %}

30
app/templates/views/platform-admin/complaints.html
View File

@@ -13,26 +13,26 @@
Email complaints
</h1>
<div class="table-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 %}

2
app/templates/views/platform-admin/services.html
View File

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

6
app/templates/views/pricing/index.html
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="table-overflow-x-auto">
{% call mapping_table(
caption='Text message pricing',
field_headings=['Message length', 'Charge'],
@@ -86,7 +86,7 @@ recipient’s 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="table-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="table-overflow-x-auto">
{% call mapping_table(
caption='Pricing for text messages containing accented characters that affect the charges',
field_headings=['Message length', 'Charge'],

2
app/templates/views/service-settings.html
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 table-overflow-x-auto">
{% call mapping_table(
caption='General',

2
app/templates/views/signedout.html
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

4
app/templates/views/usage.html
View File

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

4
app/templates/withnav_template.html
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 %}