cleaning up css and add better visual for pagination

This commit is contained in:
Beverly Nguyen
2025-08-05 22:46:49 -07:00
parent cb84fba9f6
commit 95421c6d1e
4 changed files with 19 additions and 47 deletions

View File

@@ -490,46 +490,12 @@ td.table-empty-message {
}
.job-table {
width: 100%;
border-collapse: collapse;
td.file-name {
width: 25%;
overflow-wrap: anywhere;
}
td.jobid {
width: 5%;
}
td.template {
width: 25%;
}
td.time-sent {
width: 15%;
}
td.sender {
width: 20%;
overflow-wrap: break-word;
}
td.count-of-recipients {
width: 5%;
}
td.report {
width: 2%;
text-align: center;
}
td.delivered {
width: 2%;
text-align: center;
}
td.failed {
width: 2%;
text-align: center;
}
td.report img {
padding-top: 5px;
}
th {
padding: 0.5rem 1rem;
}
td {
padding: 0.5rem 1rem;
}
}
@media (max-width: 768px) {

View File

@@ -56,6 +56,7 @@ def all_jobs_activity(service_id):
next_page=next_page,
prev_page=prev_page,
pagination=pagination,
total_jobs=jobs.get("total", 0),
**download_availability,
download_link_one_day=url_for(
".download_notifications_csv",

View File

@@ -51,6 +51,11 @@
{% endif %}
</ul>
</nav>
{% if pagination and total_jobs %}
<p class="text-center font-body-sm ">
Page {{ pagination.current }} of {{ pagination.last }} ({{ total_jobs }} total jobs)
</p>
{% endif %}
{% endif %}
{% endset %}
{% block maincolumn_content %}
@@ -90,28 +95,28 @@
{% if all_jobs_dict %}
{% for job in all_jobs_dict %}
<tr class="table-row">
<td class="table-field jobid" role="rowheader">
<td class="table-field jobid width-10" role="rowheader">
<a class="usa-link" href="{{ job.view_job_link }}">
{{ job.job_id[:8] if job.job_id else 'Manually entered number' }}
</a>
</td>
<td class="table-field template">{{ job.template_name }}</td>
<td data-sort-value="{{ job.activity_time | convert_time_unixtimestamp }}" class="table-field time-sent">
<td class="table-field template width-35 text-wrap">{{ job.template_name }}</td>
<td data-sort-value="{{ job.activity_time | convert_time_unixtimestamp }}" class="table-field time-sent width-15">
{{ job.activity_time|format_datetime_table }}
</td>
<td class="table-field sender">{{ job.created_by.name }}</td>
<td class="table-field report">
<td class="table-field sender width-20 text-wrap">{{ job.created_by.name }}</td>
<td class="text-center table-field report width-5">
{% if job.can_download %}
<a href="{{ job.download_link }}">
<img src="{{ url_for('static', filename='img/material-icons/file_download.svg') }}" alt="">
<img src="{{ url_for('static', filename='img/material-icons/file_download.svg') }}" alt="" class="padding-top-05">
<span class="usa-sr-only">Download report link</span>
</a>
{% else %}
<span>N/A</span>
{% endif %}
</td>
<td class="table-field delivered">{{ job.delivered_count if job.delivered_count is not none else '0' }}</td>
<td class="table-field failed">{{ job.failed_count if job.failed_count is not none else '0' }}</td>
<td class="text-center table-field delivered width-7">{{ job.delivered_count if job.delivered_count is not none else '0' }}</td>
<td class="text-center table-field failed width-8">{{ job.failed_count if job.failed_count is not none else '0' }}</td>
</tr>
{% endfor %}
{% else %}

View File

@@ -22,14 +22,14 @@
<div id="tableActivity" class="table-overflow-x-auto">
<h2 id="table-heading" class="margin-top-4 margin-bottom-1">Service activity</h2>
<table class="usa-table job-table" id="activity-table">
<table class="usa-table usa-table--compact job-table" id="activity-table">
<caption class="usa-sr-only">Table showing the sent jobs for {{current_service.name}}</caption>
<thead class="table-field-headings">
<tr>
<th scope="col" class="table-field-heading-first" id="jobId">Job ID#</th>
<th data-sortable scope="col" class="table-field-heading" scope="col">Template</th>
<th data-sortable scope="col" class="table-field-heading">Job status</th>
<th data-sortable scope="col" class="table-field-heading width-30">Job status</th>
<th data-sortable scope="col" role="columnheader" class="table-field-heading sender-column">Sender
</th>
<th data-sortable scope="col" class="table-field-heading"># of Recipients</th>