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

improved ui for download controls

Browse Source
This commit is contained in:
hamza zia 2013-01-18 16:41:22 +05:00
parent bd8a1ad87f
commit ad33d549e9
2 changed files with 46 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css/download.css
View File

@ -10,6 +10,8 @@
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
} }
.stats { .stats {
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
text-align: center; text-align: center;
@ -18,19 +20,26 @@
padding: 5px; padding: 5px;
} }
.download-progress {
margin: 0px;
padding-left: 5px;
padding-right: 5px;
}
.download-controls { .download-controls {
width: 60px; width: 65px;
padding: 5px;
} }
.download-controls .btn-group { .download-controls .btn-group {
height: 70px; height: 36px;
width: 100%; width: 100%;
float: right; float: right;
} }
.download-controls .btn-group .btn:nth-child(1) { .download-controls .btn-group .btn:nth-child(1) {
width: 70%; width: 60%;
} }
.download-controls .btn-group .btn:nth-child(2) { .download-controls .btn-group .btn:nth-child(2) {
width: 30%; width: 40%;
} }
.download-controls .btn-group .btn { .download-controls .btn-group .btn {
@ -38,11 +47,11 @@
} }
.download-controls .btn-group .btn i { .download-controls .btn-group .btn i {
height: 100%; height: 100%;
font-size: 28px; font-size: 18px;
color: gray; color: gray;
} }
.download-overview { .download-overview {
padding: 10px; padding: 5px;
cursor: pointer; cursor: pointer;
} }
.download-detail { .download-detail {

59
index.html
View File

@ -106,6 +106,36 @@
<li class="label label-important">Size: <span class="download-size">{{size}}</span></li> <li class="label label-important">Size: <span class="download-size">{{size}}</span></li>
{{/booleans.is_error}} {{/booleans.is_error}}
</ul> </ul>
</td>
<td class="download-controls">
<div class="btn-group">
{{#booleans.can_pause}}
<button class="btn download_pause"><i class="icon-pause"></i></button>
{{/booleans.can_pause}}
{{#booleans.can_play}}
<button class="btn download_play"><i class="icon-play"></i></button>
{{/booleans.can_play}}
{{#booleans.can_restart}}
<button class="btn download_restart"><i class="icon-repeat"></i></button>
{{/booleans.can_restart}}
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
{{#booleans.has_settings}}
<li><a href="#" class="download_settings"><i class="icon-cog"></i> Settings</a></li>
{{#bittorrent}}
<li><a href="#" class="torrent_info"><i class="icon-list-alt"></i> Peers</a></li>
{{/bittorrent}}
{{/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="#" class="download_remove"><i class="icon-remove"></i> Remove</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td colspan="2" class="download-progress">
{{#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>
@ -133,38 +163,11 @@
{{/booleans.is_complete}} {{/booleans.is_complete}}
</td> </td>
<td class="download-controls">
<div class="btn-group">
{{#booleans.can_pause}}
<button class="btn btn-mini download_pause"><i class="icon-pause"></i></button>
{{/booleans.can_pause}}
{{#booleans.can_play}}
<button class="btn btn-mini download_play"><i class="icon-play"></i></button>
{{/booleans.can_play}}
{{#booleans.can_restart}}
<button class="btn btn-mini download_restart"><i class="icon-repeat"></i></button>
{{/booleans.can_restart}}
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
{{#booleans.has_settings}}
<li><a href="#" class="download_settings"><i class="icon-cog"></i> Settings</a></li>
{{#bittorrent}}
<li><a href="#" class="torrent_info"><i class="icon-list-alt"></i> Peers</a></li>
{{/bittorrent}}
{{/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="#" class="download_remove"><i class="icon-remove"></i> Remove</a></li>
</ul>
</div>
</td>
</tr> </tr>
<tr data-toggle="collapse" data-target="[data-gid={{gid}}] .download-detail .collapse" class="download-detail"> <tr data-toggle="collapse" data-target="[data-gid={{gid}}] .download-detail .collapse" class="download-detail">
<td colspan="2"> <td colspan="2">
<div class="collapse more_info"> <div class="collapse more_info">
<canvas class="progress chunk-canvas" width="1400" style="width: 100%;"></canvas> <canvas class="progress chunk-canvas" width="1400" style="width: 100%; margin: 5px;"></canvas>
<ul class="stats"> <ul class="stats">
<li class="label">Status: <span class="download-status">{{status}}</span></li> <li class="label">Status: <span class="download-status">{{status}}</span></li>
<li class="label">GID: <span class="download-gid">{{gid}}</span></li> <li class="label">GID: <span class="download-gid">{{gid}}</span></li>