From ad33d549e922bfa1bce6b2a5f511893f09b19cdb Mon Sep 17 00:00:00 2001
From: hamza zia <ziahamza2007@gmail.com>
Date: Fri, 18 Jan 2013 16:41:22 +0500
Subject: [PATCH] improved ui for download controls

---
 css/download.css | 21 ++++++++++++-----
 index.html       | 59 +++++++++++++++++++++++++-----------------------
 2 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/css/download.css b/css/download.css
index 03d43a8..d651947 100644
--- a/css/download.css
+++ b/css/download.css
@@ -10,6 +10,8 @@
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
 }
 .stats {
+  margin-top: 0px;
+  margin-bottom: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
@@ -18,19 +20,26 @@
   padding: 5px;
 }
 
+.download-progress {
+  margin: 0px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
 .download-controls {
-  width: 60px;
+  width: 65px;
+  padding: 5px;
 }
 .download-controls .btn-group {
-  height: 70px;
+  height: 36px;
   width: 100%;
   float: right;
 }
 .download-controls .btn-group .btn:nth-child(1) {
-  width: 70%;
+  width: 60%;
 }
 .download-controls .btn-group .btn:nth-child(2) {
-  width: 30%;
+  width: 40%;
 }
 
 .download-controls .btn-group .btn {
@@ -38,11 +47,11 @@
 }
 .download-controls .btn-group .btn i {
   height: 100%;
-  font-size: 28px;
+  font-size: 18px;
   color: gray;
 }
 .download-overview {
-  padding: 10px;
+  padding: 5px;
   cursor: pointer;
 }
 .download-detail {
diff --git a/index.html b/index.html
index 657b664..a88870a 100755
--- a/index.html
+++ b/index.html
@@ -106,6 +106,36 @@
 						<li class="label label-important">Size: <span class="download-size">{{size}}</span></li>
 						{{/booleans.is_error}}
 					</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}}
 					<div class="progress progress-striped active" style="width: 100%; margin: 0; padding: 0;">
 						<div class="bar" style="width: {{percentage}}%;"></div>
@@ -133,38 +163,11 @@
 					{{/booleans.is_complete}}
 
 				</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 data-toggle="collapse" data-target="[data-gid={{gid}}] .download-detail .collapse" class="download-detail">
 				<td colspan="2">
 					<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">
 							<li class="label">Status: <span class="download-status">{{status}}</span></li>
 							<li class="label">GID: <span class="download-gid">{{gid}}</span></li>