darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-05-26 08:09:51 -04:00
Code Issues Packages Projects Releases Wiki Activity

Change to the table width on overflow to have less wrapping text

Browse Source
This commit is contained in:
Jonathan Bobel
2024-07-26 10:38:00 -04:00
parent d68df54bb9
commit 765920ef0a
19 changed files with 83 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
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 {

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

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

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

@@ -2,7 +2,7 @@
{% from "components/page-footer.html" import page_footer %}
<div class="ajax-block-container" aria-labelledby='pill-selected-item'>
<div class="dashboard-table overflow-x-auto">
<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="overflow-x-auto">
<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="overflow-x-auto">
<div class="bottom-gutter-3-2 dashboard-table body-copy-table overflow-x-auto">
<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 overflow-x-auto" 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="overflow-x-auto">
<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 overflow-x-auto'>
<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="overflow-x-auto">
<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 overflow-x-auto'>
<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>

2
app/templates/views/inbound-sms-admin.html
View File

@@ -23,7 +23,7 @@ Inbound SMS
<h1 class="font-body-2xl">
Inbound SMS
</h1>
<div class="overflow-x-auto">
<div class="table-overflow-x-auto">
<table class="usa-table usa-table--borderless inbound width-full">
<thead>
<tr>

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 overflow-x-auto">
<div class="margin-bottom-8 table-overflow-x-auto">
{% call mapping_table(
caption='Message statuses – text messages',
field_headings=['Status', 'Description'],

6
app/templates/views/performance.html
View File

@@ -44,7 +44,7 @@
</div>
</div>
<div class="dashboard-table overflow-x-auto">
<div class="dashboard-table table-overflow-x-auto">
{% call(item, row_number) list_table(
notifications_by_type|reverse,
caption='Messages sent since May 2023',
@@ -82,7 +82,7 @@
) }}
</div>
</div>
<div class="overflow-x-auto">
<div class="table-overflow-x-auto">
<div class="dashboard-table">
{% call(item, row_number) list_table(
processing_time | reverse,
@@ -122,7 +122,7 @@
<span class="usa-sr-only">using Notify.</span>
</div>
</div>
<div class="overflow-x-auto">
<div class="table-overflow-x-auto">
<div class="dashboard-table">
{% call(item, row_number) list_table(
organizations_using_notify,

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

@@ -13,7 +13,7 @@
Email complaints
</h1>
<div class="overflow-x-auto">
<div class="table-overflow-x-auto">
{% call(item, row_number) list_table(
complaints,
caption="Complaints",

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

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

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="overflow-x-auto">
<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="overflow-x-auto">
<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="overflow-x-auto">
<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 overflow-x-auto">
<div class="bottom-gutter-3-2 settings-table body-copy-table table-overflow-x-auto">
{% call mapping_table(
caption='General',

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

@@ -70,8 +70,7 @@
</div> #}
{% if months %}
<div class="overflow-x-auto">
<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>