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

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

@ -61,24 +61,30 @@
<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>
</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>
</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>
</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>
</div>

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

@ -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;
}