From 399dcafeded83d78c73881a10c605941b1e30c83 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Tue, 21 Apr 2020 18:14:02 +1000
Subject: [PATCH] Use the existing bootstrap CSS for progress bars

---
 InvenTree/InvenTree/static/css/inventree.css  | 33 +++++++------------
 .../static/script/inventree/inventree.js      |  8 ++---
 2 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css
index a1968c317e..cd4b63f299 100644
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@@ -31,37 +31,26 @@
 
 /* Progress bars */
 
-.progress-bar {
-    height: 25px;
-    background: #eee;
-    border-radius: 5px;
-    border: 1px solid #ddd;
-    width: 100%;
+.progress {
     position: relative;
+    width: 100%;
 }
 
-.progress-bar-value {
-    color: #000;
-    position: absolute;
-    top: 0px;
+.progress-bar {
+    opacity: 50%;
+}
+
+.progress-value {
     width: 100%;
+    color: #333;
+    position: absolute;
+    text-align: center;
+    top: 0px;
     left: 0px;
     font-weight: bold;
     font-size: 110%;
 }
 
-.progress-bar-inner {
-    height: 23px;
-    width: 20%;
-    text-align: center;
-    vertical-align: middle;
-    background: #3a3;
-    opacity: 40%;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-}
-
 .qr-code {
     max-width: 400px;
     max-height: 400px;
diff --git a/InvenTree/InvenTree/static/script/inventree/inventree.js b/InvenTree/InvenTree/static/script/inventree/inventree.js
index 1e060cd6d3..ce812afc4f 100644
--- a/InvenTree/InvenTree/static/script/inventree/inventree.js
+++ b/InvenTree/InvenTree/static/script/inventree/inventree.js
@@ -98,10 +98,10 @@ function makeProgressBar(value, maximum, opts) {
     }
 
     return `
-        <div class='progress-bar'>
-            <div class='progress-bar progress-bar-inner' style='width: ${percent}%;'></div>
-            <div class='progress-bar-value'>${value} / ${maximum}</div>
-        </div>
+    <div class='progress'>
+        <div class='progress-bar' role='progressbar' aria-valuenow='${percent}' aria-valuemin='0' aria-valuemax='100' style='width:${percent}%'></div>
+        <div class='progress-value'>${value} / ${maximum}</div>
+    </div>
     `;
 }