Improve UI for job-status page.

1 files changed, 11 insertions, 7 deletions

diff --git a/uploader/templates/phenotypes/job-status.html b/uploader/templates/phenotypes/job-status.html
index 5f13876..6f43d22 100644
--- a/uploader/templates/phenotypes/job-status.html
+++ b/uploader/templates/phenotypes/job-status.html
@@ -31,10 +31,10 @@
 
 {%if job%}
 <h4 class="subheading">Progress</h4>
-<div class="row">
+<div class="row" style="overflow:scroll;">
   <p><strong>Process Status:</strong> {{job.status}}</p>
   {%if metadata%}
-  <table class="table">
+  <table class="table table-responsive">
     <thead>
       <tr>
         <th>File</th>
@@ -56,6 +56,9 @@
     </tbody>
   </table>
   {%endif%}
+</div>
+
+<div class="row">
   {%if  job.status in ("completed:success", "success")%}
   <p>
     {%if errors | length == 0%}
@@ -64,24 +67,24 @@
        title="Continue to process data">Continue</a>
     {%else%}
     <span class="text-muted"
-       disabled="disabled"
-       style="border: solid 2px;border-radius: 5px;padding: 0.3em;">
+          disabled="disabled"
+          style="border: solid 2px;border-radius: 5px;padding: 0.3em;">
       Cannot continue due to errors. Please fix the errors first.
-    </a>
+    </span>
     {%endif%}
   </p>
   {%endif%}
 </div>
 
 <h4 class="subheading">Errors</h4>
-<div class="row" style="max-height: 20em; overflow: auto;">
+<div class="row" style="max-height: 20em; overflow: scroll;">
   {%if errors | length == 0 %}
   <p class="text-info">
     <span class="glyphicon glyphicon-info-sign"></span>
     No errors found so far
   </p>
   {%else%}
-  <table class="table">
+  <table class="table table-responsive">
     <thead style="position: sticky; top: 0; background: white;">
       <tr>
         <th>File</th>
@@ -89,6 +92,7 @@
         <th>Column</th>
         <th>Value</th>
         <th>Message</th>
+      </tr>
     </thead>
 
     <tbody style="font-size: 0.9em;">