download ui improvements
This commit is contained in:
hamza zia
parent
59b5f2fdb5
commit
121d3eef2d
|
|
@ -41,12 +41,6 @@
|
|||
width: 100%;
|
||||
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 {
|
||||
height: 100%;
|
||||
|
|
@ -57,8 +51,8 @@
|
|||
color: gray;
|
||||
}
|
||||
.download-overview {
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.download-detail {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
84
index.html
84
index.html
|
|
@ -80,62 +80,78 @@
|
|||
<tr>
|
||||
<td data-toggle="collapse" data-target="[data-gid={{gid}}] .download-detail .collapse" class="download-overview">
|
||||
<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 class="download-controls">
|
||||
<td class="download-controls" rowspan="2">
|
||||
<div class="btn-group">
|
||||
{{#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_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_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}}
|
||||
<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">
|
||||
<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>
|
||||
<li><a href="#" class="download_settings visible-phone"><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>
|
||||
<li class="visible-phone"><a href="#" class="download_remove"><i class="icon-remove"></i> Remove</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</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}}
|
||||
<div class="progress progress-striped active" style="width: 100%; margin: 0; padding: 0;">
|
||||
<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">ETA: <span class="download-eta">{{eta}}</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 Length: <span class="download-uploadLength">{{uploadLength}}</span></li>
|
||||
{{/bittorrent}}
|
||||
<li class="label">Connections: <span class="download-connections">{{connections}}</span></li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user