Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add html5 <progress>

Browse source
This commit is contained in:
Felix Niklas 2014-10-07 14:36:09 +02:00
parent f5bee0f9c1
commit 74c0d2cae7
2 changed files with 28 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco
View file

@ -61,23 +61,29 @@
<table class="progressTable"> <table class="progressTable">
<tr class="is-done"> <tr class="is-done">
<td><span class="js-count">42</span>/<span class="js-max">42</span> <td><span class="js-count">42</span>/<span class="js-max">42</span>
<td>Users <td><span>Users</span>
<td class="progressTable-progressCell"><div class="horizontal"> <td class="progressTable-progressCell">
<div class="progress flex"><div class="bar" style="width: 100%"></div></div><div class="checkmark icon"></div> <div class="horizontal center">
<div class="flex"><progress max="42" value="42"></progress></div>
<div class="checkmark icon"></div>
</div> </div>
</tr> </tr>
<tr class="is-done"> <tr class="is-done">
<td><span class="js-count">29999</span>/<span class="js-max">29999</span> <td><span class="js-count">134318</span>/<span class="js-max">134318</span>
<td>Tickets <td><span>Tickets</span>
<td class="progressTable-progressCell"><div class="horizontal"> <td class="progressTable-progressCell">
<div class="progress flex"><div class="bar" style="width: 100%"></div></div><div class="checkmark icon"></div> <div class="horizontal center">
<div class="flex"><progress max="134318" value="134318"></progress></div>
<div class="checkmark icon"></div>
</div> </div>
</tr> </tr>
<tr> <tr>
<td> <td>
<td>Configuration <td><span>Configuration</span>
<td class="progressTable-progressCell"><div class="horizontal"> <td class="progressTable-progressCell">
<div class="progress flex"><div class="bar" style="width: 33%"></div></div><div class="checkmark icon"></div> <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> </div>
</tr> </tr>
</table> </table>

24
app/assets/stylesheets/zzz.css.erb
View file

@ -3847,12 +3847,14 @@ footer {
} }
.progressTable { .progressTable {
max-width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
} }
.progressTable td { .progressTable td {
padding: 8px 5px; padding: 8px;
overflow: auto;
width: 33%;
} }
.progressTable tr:not(:last-child) { .progressTable tr:not(:last-child) {
@ -3863,21 +3865,13 @@ footer {
text-align: right; text-align: right;
} }
.progressTable-progressCell { .progressTable progress {
width: 120px; width: 100%;
min-width: 60px;
display: block;
} }
.progress { .progressTable .checkmark {
height: 10px;
margin: 3px 0 0;
}
.progress .bar {
background: #389ed9;
height: 100%;
}
.progressTable .progress + .checkmark {
margin-left: 10px; margin-left: 10px;
opacity: 0; opacity: 0;
} }