updated css table widths

This commit is contained in:
Beverly Nguyen
2024-02-12 16:33:41 -08:00
parent ef5ed8ecab
commit dd902468f2
2 changed files with 35 additions and 34 deletions

View File

@@ -378,28 +378,29 @@ td.table-empty-message {
} }
.job-table { .job-table {
.usa-table { width: 100%;
thead th.file-name { border-collapse: collapse;
width: 25%; td.file-name {
} width: 25%;
thead th.template { overflow-wrap: anywhere;
width: 20%; }
} td.template {
thead th.time-sent { width: 20%;
width: 30%; }
} td.time-sent {
thead th.sender { width: 20%;
width: 15%; }
} td.sender {
thead th.\#-of-recipients { width: 15%;
width: 5%; }
} td.count-of-recipients {
thead th.report { width: 5%;
width: 5%; }
} td.report {
th { width: 5%;
padding: 0.5rem 0.5rem; }
} th {
padding: 0.5rem 0.5rem;
} }
} }

View File

@@ -33,22 +33,22 @@
<table class="usa-table usa-table--borderless job-table"> <table class="usa-table usa-table--borderless job-table">
<thead class="table-field-headings"> <thead class="table-field-headings">
<tr> <tr>
<th scope="col" class="table-field-heading-first file-name"> <th scope="col" class="table-field-heading-first">
<span>File name</span> <span>File name</span>
</th> </th>
<th scope="col" class="table-field-heading template"> <th scope="col" class="table-field-heading">
<span>Template</span> <span>Template</span>
</th> </th>
<th scope="col" class="table-field-heading time-sent"> <th scope="col" class="table-field-heading">
<span>Time sent</span> <span>Time sent</span>
</th> </th>
<th scope="col" class="table-field-heading sender"> <th scope="col" class="table-field-heading">
<span>Sender</span> <span>Sender</span>
</th> </th>
<th scope="col" class="table-field-heading #-of-recipients"> <th scope="col" class="table-field-heading">
<span># of Recipients</span> <span># of Recipients</span>
</th> </th>
<th scope="col" class="table-field-heading report"> <th scope="col" class="table-field-heading">
<span>Report</span> <span>Report</span>
</th> </th>
</tr> </tr>
@@ -59,24 +59,24 @@
{% if job.job_id and job.notifications %} {% if job.job_id and job.notifications %}
{% set notification = job.notifications[0] %} {% set notification = job.notifications[0] %}
<tr class="table-row" id="{{ job.job_id }}"> <tr class="table-row" id="{{ job.job_id }}">
<td class="table-field"> <td class="table-field file-name">
{{ notification.job.original_file_name if notification.job.original_file_name else 'Manually entered number'}} {{ notification.job.original_file_name if notification.job.original_file_name else 'Manually entered number'}}
<br> <br>
<a class="usa-link file-list-filename" href="{{ job.view_job_link }}">View Batch</a> <a class="usa-link file-list-filename" href="{{ job.view_job_link }}">View Batch</a>
</td> </td>
<td class="table-field"> <td class="table-field template">
{{ notification.template.name }} {{ notification.template.name }}
</td> </td>
<td class="table-field"> <td class="table-field time-sent">
{{ job.created_at | format_datetime_short_america }} {{ job.created_at | format_datetime_short_america }}
</td> </td>
<td class="table-field"> <td class="table-field sender">
{{ notification.created_by.name }} {{ notification.created_by.name }}
</td> </td>
<td class="table-field"> <td class="table-field count-of-recipients">
{{ job.notification_count}} {{ job.notification_count}}
</td> </td>
<td class="table-field"> <td class="table-field report">
{% if notification and job.time_left != "Data no longer available" %} {% if notification and job.time_left != "Data no longer available" %}
<a class="usa-link file-list-filename" href="{{ job.download_link }}">Download</a> <a class="usa-link file-list-filename" href="{{ job.download_link }}">Download</a>
<span class="usa-hint">{{ job.time_left }}</span> <span class="usa-hint">{{ job.time_left }}</span>