Skip to content

Commit

Permalink
feat: make views smaller for laptop screens (#136)
Browse files Browse the repository at this point in the history
  • Loading branch information
@helen-m-lin
helen-m-lin authored Aug 24, 2024
1 parent 6666fe3 commit 45e30d3
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 33 deletions.
12 changes: 6 additions & 6 deletions src/aind_data_transfer_service/templates/job_status.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
}
.content {
width: 100%;
height: calc(100vh - 250px);
height: calc(100vh - 200px);
iframe {
border: none;
width: 100%;
Expand All @@ -39,9 +39,9 @@
</nav>
<div class="content">
<!-- display total entries from child iframe -->
<h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
<h4 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h4>
<!-- filters for job status results-->
<div class="card mb-4" style="width:400px">
<div class="card mb-4 small" style="width:400px">
<div class="card-header py-1" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-filters" aria-expanded="false" aria-controls="collapse-filters">
<i class="bi bi-filter"></i><span class="ms-2">Filter by</span>
<i class="bi bi-chevron-expand float-end"></i>
Expand Down Expand Up @@ -91,7 +91,7 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
</div>
<!-- toolbar to change jobs per page and navigate pages -->
<div id="jobs-toolbar" class="btn-toolbar justify-content-between mb-2" role="toolbar">
<div class="input-group">
<div class="input-group input-group-sm">
<select class="form-select" onchange="updateJobStatusTableLimit(this.value);this.blur();">
{% for l in [10, 25, 50, 100] %}
{% if l==default_limit %}<option value="{{ l }}" selected>{{ l }}</option>
Expand All @@ -101,11 +101,11 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
</select>
<span class="input-group-text">jobs per page</span>
</div>
<div class="btn-group" role="group">
<div class="btn-group btn-group-sm" role="group">
<!-- display current jobs range e.g, "1 to 10 of 100" -->
<span id="jobs-iframe-showing" class="btn" style="cursor:default;"></span>
</div>
<div class="btn-group pagination" role="group">
<div class="btn-group pagination pagination-sm" role="group">
<button id="jobs-page-btn-first" type="button" class="btn page-link"
onclick="updateJobStatusTablePage(PaginateTo.FIRST);this.blur();">&laquo; First</button>
<button id="jobs-page-btn-prev" type="button" class="btn page-link"
Expand Down
28 changes: 10 additions & 18 deletions src/aind_data_transfer_service/templates/job_status_table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
<style>
.modal-body {
height: calc(100vh - 250px);
height: calc(100vh - 100px);
}
</style>
</head>

<body>
<!-- job status table -->
<table class="table table-bordered table-striped table-hover table-sm">
<table class="table table-bordered table-striped table-hover table-sm" style="font-size: small">
<tr>
<th>Asset Name</th>
<th>Job ID</th>
Expand All @@ -41,7 +41,7 @@
<td class="datetime_to_be_adjusted">{{job_status.end_time}}</td>
<td>{{job_status.comment}}</td>
<td>
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#tasks-modal" data-job-id="{{ job_status.job_id }}" data-job-name="{{ job_status.name}}" data-job-state="{{ job_status.job_state }}">
<button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#tasks-modal" data-job-id="{{ job_status.job_id }}" data-job-name="{{ job_status.name}}" data-job-state="{{ job_status.job_state }}">
<i class="bi bi-box-arrow-up-right" title="View tasks and logs"></i>
</button>
</td>
Expand All @@ -52,25 +52,17 @@
<div class="modal fade" id="tasks-modal" tabindex="-1" aria-labelledby="tasks-modal-label" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title container fs-5" id="tasks-modal-label">
<div class="row">
<div class="col-2">Asset Name:</div>
<div id="modal-title-job-name" class="col-md-auto fw-bold"></div>
</div>
<div class="row">
<div class="col-2">Job ID:</div>
<div class="col-md-auto fw-bold"><span id="modal-title-job-id" class="me-2"></span><span id="modal-title-job-state" class="badge"></span></div>
</div>
<div class="modal-header p-2">
<div class="modal-title fw-bold" id="tasks-modal-label" style="font-size: small">
<span id="modal-title-job-name" class="me-2"></span>
<span id="modal-title-job-id" class="me-2"></span>
<span id="modal-title-job-state" class="badge"></span>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="modal-body p-2">
<iframe id="tasks-iframe" class="w-100 h-100" src=""></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -131,7 +123,7 @@ <h4 class="alert-heading">{{ message }}</h4>
}
function updateJobTasksModal(jobId, jobName, jobState) {
// Update the modal header with the job id and name
document.getElementById('modal-title-job-id').textContent = jobId;
document.getElementById('modal-title-job-id').textContent = `(${jobId})`;
document.getElementById('modal-title-job-name').textContent = jobName;
var modalTitleJobState = document.getElementById('modal-title-job-state');
modalTitleJobState.textContent = jobState;
Expand Down
13 changes: 5 additions & 8 deletions src/aind_data_transfer_service/templates/job_tasks_table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<body>
<!-- tasks table -->
<table class="table table-bordered table-striped table-hover table-sm">
<table class="table table-bordered table-striped table-hover table-sm" style="font-size: small">
<tr>
<th>Task ID</th>
<th>Try Number</th>
Expand All @@ -37,7 +37,7 @@
<td>{{job_task.duration}}</td>
<td>
{% if job_task.try_number > 0 %}
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#logs-modal"
<button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#logs-modal"
data-job-id="{{ job_task.job_id }}"
data-task-id="{{ job_task.task_id }}"
data-task-state="{{ job_task.task_state }}"
Expand All @@ -53,18 +53,15 @@
<div class="modal fade" id="logs-modal" tabindex="-1" aria-labelledby="logs-modal-label" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title fs-5 fw-bold" id="logs-modal-label">
<div class="modal-header p-2">
<div class="modal-title fw-bold" id="logs-modal-label" style="font-size: small">
<span id="modal-title-task" class="me-2"></span><span id="modal-title-task-state" class="badge"></span>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="modal-body p-2">
<iframe id="logs-iframe" class="w-100 h-100" src=""></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Close logs</button>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/aind_data_transfer_service/templates/task_logs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
{% if status_code == 200 %}
<!-- display task logs -->
<div>
<pre class="bg-light p-3 border rounded">{{logs}}</pre>
<pre class="bg-light p-1 border rounded" style="font-size: x-small">{{logs}}</pre>
</div>
{% else %}
<!-- display errors to user -->
Expand Down

0 comments on commit 45e30d3

Please sign in to comment.