Commit 96ca817d authored by sajolida's avatar sajolida
Browse files

CSS for the progress bar

- Indent
- Limit width
- Use our usual green
- Make it easier to debug in the future
parent a4bf61a1
......@@ -192,11 +192,14 @@ document.addEventListener("DOMContentLoaded", function() {
function showVerifyingDownload(filename) {
hide(document.getElementById("verify-download-wrapper"));
document.getElementById("filename").textContent = filename;
if (filename) {
document.getElementById("filename").textContent = filename;
}
show(document.getElementById("verifying-download"));
}
function showVerificationProgress(percentage) {
showVerifyingDownload();
document.getElementById("progress-bar").style.width = percentage + "%";
document.getElementById("progress-bar").setAttribute("aria-valuenow", percentage.toString());
}
......@@ -284,9 +287,10 @@ document.addEventListener("DOMContentLoaded", function() {
}
}
// To debug the display of the different results:
// To debug the display of the different states:
// showVerificationResult("successful");
// showVerificationResult("failed");
// showVerificationResult("failed-again");
// showVerificationProgress('50');
});
......@@ -56,7 +56,7 @@
Verify download…
<input id="verify-download" type="file"/>
</label>
<div id="verifying-download">
<div id="verifying-download" class="indent block">
<p>Verifying <span id="filename">$FILENAME</span>&hellip;</p>
<div class="progress">
<div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
......
......@@ -163,6 +163,16 @@ span.step-number {
border-size: 2px;
}
/* Progress bar */
.progress {
max-width: 100%;
}
.progress-bar {
background: #53b351;
}
/* Verification results */
#extension-installed, #verification-successful {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment