Use the existing bootstrap CSS for progress bars

This commit is contained in:
Oliver Walters 2020-04-21 18:14:02 +10:00
parent 2c6e8da90e
commit 399dcafede
2 changed files with 15 additions and 26 deletions

View File

@ -31,37 +31,26 @@
/* Progress bars */ /* Progress bars */
.progress-bar { .progress {
height: 25px;
background: #eee;
border-radius: 5px;
border: 1px solid #ddd;
width: 100%;
position: relative; position: relative;
width: 100%;
} }
.progress-bar-value { .progress-bar {
color: #000; opacity: 50%;
position: absolute; }
top: 0px;
.progress-value {
width: 100%; width: 100%;
color: #333;
position: absolute;
text-align: center;
top: 0px;
left: 0px; left: 0px;
font-weight: bold; font-weight: bold;
font-size: 110%; 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 { .qr-code {
max-width: 400px; max-width: 400px;
max-height: 400px; max-height: 400px;

View File

@ -98,10 +98,10 @@ function makeProgressBar(value, maximum, opts) {
} }
return ` return `
<div class='progress-bar'> <div class='progress'>
<div class='progress-bar progress-bar-inner' style='width: ${percent}%;'></div> <div class='progress-bar' role='progressbar' aria-valuenow='${percent}' aria-valuemin='0' aria-valuemax='100' style='width:${percent}%'></div>
<div class='progress-bar-value'>${value} / ${maximum}</div> <div class='progress-value'>${value} / ${maximum}</div>
</div> </div>
`; `;
} }