Update html templates to use bootstrap for styling

1 files changed, 19 insertions, 10 deletions

diff --git a/qc_app/templates/job_progress.html b/qc_app/templates/job_progress.html
index 1b08814..1af0763 100644
--- a/qc_app/templates/job_progress.html
+++ b/qc_app/templates/job_progress.html
@@ -10,21 +10,30 @@
 {%block contents%}
 <h1 class="heading">{{job_name}}</h2>
 
-<label for="job_status">status:</label>
-<span>{{job_status}}: {{message}}</span><br />
-
-<label for="job_{{job_id}}">parsing: </label>
-<progress id="job_{{job_id}}" value="{{progress/100}}">{{progress}}</progress>
-<span>{{"%.2f" | format(progress)}}%</span>
-
-<div>
+<div class="row">
   <form action="{{url_for('parse.abort')}}" method="POST">
+    <legend class="heading">Status</legend>
+    <div class="form-group">
+      <label for="job_status" class="form-label">status:</label>
+      <span class="form-text">{{job_status}}: {{message}}</span><br />
+    </div>
+
+    <div class="form-group">
+      <label for="job_{{job_id}}" class="form-label">parsing: </label>
+      <progress id="job_{{job_id}}"
+                value="{{progress/100}}"
+                class="form-control">
+        {{progress}}</progress>
+      <span class="form-text text-muted">{{"%.2f" | format(progress)}}%</span>
+    </div>
+
     <input type="hidden" name="job_id" value="{{job_id}}" />
-    <input type="submit" value="Abort" class="btn btn-danger" />
+
+    <button type="submit" class="btn btn-danger">Abort</button>
   </form>
 </div>
 
-<div>
+<div class="row">
   {{errors_display(errors, "No errors found so far", "We have found the following errors so far", False)}}
 </div>