From 121d3eef2d0342568cd9cfb346efdf62c46588b0 Mon Sep 17 00:00:00 2001
From: hamza zia <ziahamza2007@gmail.com>
Date: Fri, 18 Jan 2013 20:10:03 +0500
Subject: [PATCH] download ui improvements

---
 css/download.css |  8 +----
 index.html       | 84 +++++++++++++++++++++++++++++-------------------
 2 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/css/download.css b/css/download.css
index 9e5c4b5..4a63634 100644
--- a/css/download.css
+++ b/css/download.css
@@ -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;
diff --git a/index.html b/index.html
index 2b4e3f0..e294d24 100755
--- a/index.html
+++ b/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>