Sweeping changes to switch to bootstrap and make the UI overall a bit more user friendly

2 files changed, 10 insertions, 85 deletions

diff --git a/cmd/web/static/main.js b/cmd/web/static/main.js
index 55edf0c..b793be4 100644
--- a/cmd/web/static/main.js
+++ b/cmd/web/static/main.js
@@ -22,7 +22,8 @@ function formatDuration(dur) {
 }
 
 function setStatus(stat) {
-    var elem = document.getElementById("installBar");
+  var barContainer = document.getElementById("installBarContainer");
+  var elem = document.getElementById("installBar");
 	var msg = document.getElementById("message");
 
 	// console.log(stat)
@@ -42,7 +43,9 @@ function setStatus(stat) {
 
 		elem.style.width = percent + "%";
 		elem.innerHTML = percent + "%";
-		elem.style.display = "";
+		barContainer.style.display = "";
+
+    elem.ariaValueNow = percent;
 
 		// in seconds
 		var eta = Math.round(((stat.Size - trans)/1024/1024) / rate);
@@ -56,8 +59,11 @@ function setStatus(stat) {
 	if(!stat.Running && stat.Transferred >= 50 && stat.Error == null) {
 		elem.style.width = 100 + "%";
 		elem.innerHTML = 100 + "%";
+    elem.ariaValueNow = 100;
+
 		msg.innerHTML = "Completed install for: " + stat.Url;
-		elem.style.display = "";
+
+		barContainer.style.display = "";
 		msg.style.display = "";
 	}
 
@@ -65,7 +71,7 @@ function setStatus(stat) {
 		msg.innerHTML = "Errors encountered while installing from: \n\n" 
 						+ stat.Url + "\n\n" +
 						JSON.stringify(stat.Error, undefined, 2);
-		elem.style.display = "hidden";
+		barContainer.style.display = "hidden";
 		msg.style.display = "";
 	}
 }
diff --git a/cmd/web/static/style.css b/cmd/web/static/style.css
deleted file mode 100644
index ba648e3..0000000
--- a/cmd/web/static/style.css
+++ /dev/null
@@ -1,81 +0,0 @@
-nav {
-  border-bottom: 3px solid #000;
-  padding-bottom: 10px;
-}
-a {
-  text-decoration: none;
-  color: #268bd2;
-}
-a:visited {
-  color: #d22653;
-}
-a:hover {
-  text-decoration: underline;
-}
-pre code {
-  line-height: 1.1;
-  overflow: auto;
-}
-
-code {
-  color: #9672d5;
-  font-size: .8em;
-  font-family: "Roboto Mono", "Monaco", "Lucida Console", "DejaVu Sans Mono",
-"monospace";
-}
-
-pre code {
-  color: #000;
-  background-color: #FFFFEA;
-  display: block;
-  padding: 10px;
-  border: 1px solid;
-}
-
-blockquote {
-  border-left: 4px solid #aaa;
-  padding-left: 1em;
-}
-
-body {
-  margin: 40px auto;
-  max-width: 80%;
-  line-height: 1.6;
-  font-size: 1em;
-  color: #444;
-  padding: 0 10px;
-  /* Added because some browsers don't default to white */
-  background-color: #fff;
-}
-
-img {
-  width: 100%;
-  height: auto;
-}
-
-h1,h2,h3 {
-  line-height: 1.2
-}
-
-@media screen and (min-width: 1200px) {
-  body {
-    max-width: 960px;
-  }
-}
-
-
-#status {
-  width: 100%;
-  background-color: #ddd;
-}
-
-.installBar {
-  width: 0%;
-  height: 30px;
-  /* background-color: #4CAF50; */
-  background-color: #268bd2;
-  text-align: center;
-  line-height: 30px;
-  color: white;
-}
-