add html5 <progress>
This commit is contained in:
parent
f5bee0f9c1
commit
74c0d2cae7
2 changed files with 28 additions and 28 deletions
|
@ -61,23 +61,29 @@
|
|||
<table class="progressTable">
|
||||
<tr class="is-done">
|
||||
<td><span class="js-count">42</span>/<span class="js-max">42</span>
|
||||
<td>Users
|
||||
<td class="progressTable-progressCell"><div class="horizontal">
|
||||
<div class="progress flex"><div class="bar" style="width: 100%"></div></div><div class="checkmark icon"></div>
|
||||
<td><span>Users</span>
|
||||
<td class="progressTable-progressCell">
|
||||
<div class="horizontal center">
|
||||
<div class="flex"><progress max="42" value="42"></progress></div>
|
||||
<div class="checkmark icon"></div>
|
||||
</div>
|
||||
</tr>
|
||||
<tr class="is-done">
|
||||
<td><span class="js-count">29999</span>/<span class="js-max">29999</span>
|
||||
<td>Tickets
|
||||
<td class="progressTable-progressCell"><div class="horizontal">
|
||||
<div class="progress flex"><div class="bar" style="width: 100%"></div></div><div class="checkmark icon"></div>
|
||||
<td><span class="js-count">134318</span>/<span class="js-max">134318</span>
|
||||
<td><span>Tickets</span>
|
||||
<td class="progressTable-progressCell">
|
||||
<div class="horizontal center">
|
||||
<div class="flex"><progress max="134318" value="134318"></progress></div>
|
||||
<div class="checkmark icon"></div>
|
||||
</div>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<td>Configuration
|
||||
<td class="progressTable-progressCell"><div class="horizontal">
|
||||
<div class="progress flex"><div class="bar" style="width: 33%"></div></div><div class="checkmark icon"></div>
|
||||
<td><span>Configuration</span>
|
||||
<td class="progressTable-progressCell">
|
||||
<div class="horizontal center">
|
||||
<div class="flex"><progress value="0.3"></progress></div><!-- if there is no max, the value is between 0..1 -->
|
||||
<div class="checkmark icon"></div>
|
||||
</div>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
|
@ -3847,12 +3847,14 @@ footer {
|
|||
}
|
||||
|
||||
.progressTable {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.progressTable td {
|
||||
padding: 8px 5px;
|
||||
padding: 8px;
|
||||
overflow: auto;
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.progressTable tr:not(:last-child) {
|
||||
|
@ -3863,21 +3865,13 @@ footer {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
.progressTable-progressCell {
|
||||
width: 120px;
|
||||
.progressTable progress {
|
||||
width: 100%;
|
||||
min-width: 60px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 10px;
|
||||
margin: 3px 0 0;
|
||||
}
|
||||
|
||||
.progress .bar {
|
||||
background: #389ed9;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.progressTable .progress + .checkmark {
|
||||
.progressTable .checkmark {
|
||||
margin-left: 10px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue