q3aql/webui-aria2
q3aql/webui-aria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

download ui improvements

Browse Source
This commit is contained in:
hamza zia 2013-01-18 20:10:03 +05:00
parent 59b5f2fdb5
commit 121d3eef2d
2 changed files with 52 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/download.css
View File

@ -41,12 +41,6 @@
width: 100%; width: 100%;
float: right; float: right;
} }
.download-controls .btn-group .btn:nth-child(1) {
width: 60%;
}
.download-controls .btn-group .btn:nth-child(2) {
width: 40%;
}
.download-controls .btn-group .btn { .download-controls .btn-group .btn {
height: 100%; height: 100%;
@ -57,8 +51,8 @@
color: gray; color: gray;
} }
.download-overview { .download-overview {
padding: 5px;
cursor: pointer; cursor: pointer;
padding-left: 5px;
} }
.download-detail { .download-detail {
cursor: pointer; cursor: pointer;

84
index.html
View File

@ -80,62 +80,78 @@
<tr> <tr>
<td data-toggle="collapse" data-target="[data-gid={{gid}}] .download-detail .collapse" class="download-overview"> <td data-toggle="collapse" data-target="[data-gid={{gid}}] .download-detail .collapse" class="download-overview">
<b class="download-name">{{name}}</b> <b class="download-name">{{name}}</b>
<ul class="stats hidden-phone pull-right">
{{#booleans.can_pause}}
<li class="label label-success">Time left: <span class="download-eta">{{eta}}</span></li>
<li class="label label-success">Download Speed: <span class="download-down_speed">{{down_speed}}</span></li>
<li class="label label-success">Progress: <span class="download-percentage">{{percentage}}</span>%</li>
{{/booleans.can_pause}}
{{#booleans.can_play}}
<li class="label label-info">Size: <span class="download-size">{{size}}</span></li>
<li class="label label-info">Downloaded: <span class="download-downloaded">{{downloaded}}</span></li>
<li class="label label-info">Path: <span class="download-dir">{{dir}}</span></li>
{{/booleans.can_play}}
{{#booleans.is_complete}}
<li class="label">Path: <span class="download-dir">{{dir}}</span></li>
<li class="label">Size: <span class="download-size">{{size}}</span></li>
{{/booleans.is_complete}}
{{#booleans.is_removed}}
<li class="label label-warning">Path: <span class="download-dir">{{dir}}</span></li>
<li class="label label-warning">Size: <span class="download-size">{{size}}</span></li>
{{/booleans.is_removed}}
{{#booleans.is_error}}
<li class="label label-important">Path: <span class="download-dir">{{dir}}</span></li>
<li class="label label-important">Size: <span class="download-size">{{size}}</span></li>
{{/booleans.is_error}}
</ul>
</td> </td>
<td class="download-controls"> <td class="download-controls" rowspan="2">
<div class="btn-group"> <div class="btn-group">
{{#booleans.can_pause}} {{#booleans.can_pause}}
<button class="btn download_pause"><i class="icon-pause"></i></button> <button class="btn download_pause"><i class="icon-pause"></i></button>
{{/booleans.can_pause}} {{/booleans.can_pause}}
{{#booleans.can_play}} {{#booleans.can_play}}
<button class="btn download_play"><i class="icon-play"></i></button> <button class="btn download_play"><i class="icon-play"></i></button>
{{/booleans.can_play}} {{/booleans.can_play}}
{{#booleans.can_restart}} {{#booleans.can_restart}}
<button class="btn download_restart"><i class="icon-repeat"></i></button> <button class="btn download_restart"><i class="icon-repeat"></i></button>
{{/booleans.can_restart}} {{/booleans.can_restart}}
<button class="btn download_remove hidden-phone"><i class="icon-stop"></i></button>
{{#booleans.has_settings}}
<button class="btn download_settings hidden-phone"><i class="icon-cog"></i></button>
{{/booleans.has_settings}}
<button class="btn dropdown-toggle" data-toggle="dropdown"> <button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
{{#booleans.has_settings}} {{#booleans.has_settings}}
<li><a href="#" class="download_settings"><i class="icon-cog"></i> Settings</a></li> <li><a href="#" class="download_settings visible-phone"><i class="icon-cog"></i> Settings</a></li>
{{#bittorrent}} {{#bittorrent}}
<li><a href="#" class="torrent_info"><i class="icon-list-alt"></i> Peers</a></li> <li><a href="#" class="torrent_info"><i class="icon-list-alt"></i> Peers</a></li>
{{/bittorrent}} {{/bittorrent}}
{{/booleans.has_settings}} {{/booleans.has_settings}}
<li><a href="#" data-toggle="collapse" data-target="[data-gid={{gid}}] .download-detail .collapse"><i class="icon-info-sign"></i> More Info</a></li> <li><a href="#" data-toggle="collapse" data-target="[data-gid={{gid}}] .download-detail .collapse"><i class="icon-info-sign"></i> More Info</a></li>
<li><a href="#" class="download_remove"><i class="icon-remove"></i> Remove</a></li> <li class="visible-phone"><a href="#" class="download_remove"><i class="icon-remove"></i> Remove</a></li>
</ul> </ul>
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td data-toggle="collapse" data-target="[data-gid={{gid}}] .download-detail .collapse" colspan="2" class="download-progress"> <td data-toggle="collapse" data-target="[data-gid={{gid}}] .download-detail .collapse" class="download-overview">
<ul class="stats pull-left">
{{#booleans.can_pause}}
<li class="label label-success hidden-phone hidden-tablet">Status: <span class="download-status">{{status}}</span></li>
<li class="label label-success">ETA: <span class="download-eta">{{eta}}</span></li>
<li class="label label-success hidden-phone">Size: <span class="download-size">{{size}}</span></li>
<li class="label label-success hidden-phone hidden-tablet">Progress: <span class="download-percentage">{{percentage}}</span>%</li>
<li class="label label-success hidden-phone">Downloaded: <span class="download-downloaded">{{downloaded}}</span></li>
<li class="label label-success">Speed: <span class="download-down_speed">{{down_speed}}</span></li>
{{#bittorrent}}
<li class="label">Upload Speed: <span class="download-upload_speed">{{upload_speed}}</span></li>
{{/bittorrent}}
{{/booleans.can_pause}}
{{#booleans.can_play}}
<li class="label label-info">Status: <span class="download-status">{{status}}</span></li>
<li class="label label-info">Size: <span class="download-size">{{size}}</span></li>
<li class="label label-info hidden-phone">Downloaded: <span class="download-downloaded">{{downloaded}}</span></li>
<li class="label label-info hidden-phone">Path: <span class="download-dir">{{dir}}</span></li>
{{/booleans.can_play}}
{{#booleans.is_complete}}
<li class="label">Status: <span class="download-status">{{status}}</span></li>
<li class="label hidden-phone">Path: <span class="download-dir">{{dir}}</span></li>
<li class="label">Size: <span class="download-size">{{size}}</span></li>
{{/booleans.is_complete}}
{{#booleans.is_removed}}
<li class="label label-warning">Status: <span class="download-status">{{status}}</span></li>
<li class="label label-warning hidden-phone">Path: <span class="download-dir">{{dir}}</span></li>
<li class="label label-warning">Size: <span class="download-size">{{size}}</span></li>
{{/booleans.is_removed}}
{{#booleans.is_error}}
<li class="label label-important">Status: <span class="download-status">{{status}}</span></li>
<li class="label label-important hidden-phone">Path: <span class="download-dir">{{dir}}</span></li>
<li class="label label-important">Size: <span class="download-size">{{size}}</span></li>
{{/booleans.is_error}}
</ul>
</td>
</tr>
<tr>
<td class="download-progress" colspan="2" data-toggle="collapse" data-target="[data-gid={{gid}}] .download-detail .collapse">
{{#booleans.can_pause}} {{#booleans.can_pause}}
<div class="progress progress-striped active" style="width: 100%; margin: 0; padding: 0;"> <div class="progress progress-striped active" style="width: 100%; margin: 0; padding: 0;">
<div class="bar" style="width: {{percentage}}%;"></div> <div class="bar" style="width: {{percentage}}%;"></div>
@ -178,8 +194,10 @@
<li class="label">Piece Length: <span class="download-pieceLength">{{pieceLength}}</span></li> <li class="label">Piece Length: <span class="download-pieceLength">{{pieceLength}}</span></li>
<li class="label">ETA: <span class="download-eta">{{eta}}</span></li> <li class="label">ETA: <span class="download-eta">{{eta}}</span></li>
<li class="label">Down Speed: <span class="download-down_speed">{{down_speed}}</span></li> <li class="label">Down Speed: <span class="download-down_speed">{{down_speed}}</span></li>
{{#bittorrent}}
<li class="label">Upload Speed: <span class="download-upload_speed">{{upload_speed}}</span></li> <li class="label">Upload Speed: <span class="download-upload_speed">{{upload_speed}}</span></li>
<li class="label">Upload Length: <span class="download-uploadLength">{{uploadLength}}</span></li> <li class="label">Upload Length: <span class="download-uploadLength">{{uploadLength}}</span></li>
{{/bittorrent}}
<li class="label">Connections: <span class="download-connections">{{connections}}</span></li> <li class="label">Connections: <span class="download-connections">{{connections}}</span></li>
</ul> </ul>