From d0556131250fdda246a19341c2ce1cb4b04a759b Mon Sep 17 00:00:00 2001
From: Gabriele <pmzqla.git@gmail.com>
Date: Mon, 8 Dec 2014 21:00:00 +0100
Subject: [PATCH] WebUI: Make column width less variable in transferlist

Each column has a fixed width that allows to read its content.
The column for the name of the torrents has a variable width with an
upper and a lower constraint.

If the width of the page is not sufficient to fit the table, a scrollbar
will appear.
---
 src/webui/www/public/css/dynamicTable.css |  8 ++++++++
 src/webui/www/public/transferlist.html    | 23 +++++++++++------------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/webui/www/public/css/dynamicTable.css b/src/webui/www/public/css/dynamicTable.css
index bbe4eb89a..153a6a57e 100644
--- a/src/webui/www/public/css/dynamicTable.css
+++ b/src/webui/www/public/css/dynamicTable.css
@@ -64,3 +64,11 @@
 #transferList img.statusIcon {
   margin-bottom: -4px;
 }
+
+#transferList th,
+#transferList td {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	max-width: 300px;
+}
\ No newline at end of file
diff --git a/src/webui/www/public/transferlist.html b/src/webui/www/public/transferlist.html
index 1891a11f4..9e8bc01a1 100644
--- a/src/webui/www/public/transferlist.html
+++ b/src/webui/www/public/transferlist.html
@@ -1,18 +1,17 @@
             <table class="torrentTable" cellpadding="0" cellspacing="0">
                     <thead>
                             <tr>
-                                    <th style="width: 0"></th>
-                                    <th onClick="setSortedColumn('name');" style="cursor: pointer;">_(Name)</th>
-                                    <th id='prioHeader' onClick="setSortedColumn('priority');" style="cursor: pointer;">#</th>
-                                    <th onClick="setSortedColumn('size');" style="cursor: pointer;">_(Size)</th>
-                                    <th style="width: 90px;cursor: pointer;" onClick="setSortedColumn('progress');">_(Done)</th>
-                                    <th onClick="setSortedColumn('num_seeds');" style="cursor: pointer;">_(Seeds)</th>
-                                    <th onClick="setSortedColumn('num_leechs');" style="cursor: pointer;">_(Peers)</th>
-                                    <th onClick="setSortedColumn('dlspeed');" style="cursor: pointer;">_(Down Speed)</th>
-                                    <th onClick="setSortedColumn('upspeed');" style="cursor: pointer;">_(Up Speed)</th>
-                                    <th onClick="setSortedColumn('eta');" style="cursor: pointer;">_(ETA)</th>
-                                    <th onClick="setSortedColumn('ratio');" style="cursor: pointer;">_(Ratio)</th>
-                                    
+                                    <th style="width: 16px"></th>
+                                    <th onClick="setSortedColumn('name');" style="min-width: 200px; cursor: pointer">_(Name)</th>
+                                    <th id='prioHeader' onClick="setSortedColumn('priority');" style="width: 90px; cursor: pointer">#</th>
+                                    <th onClick="setSortedColumn('size');" style="width: 100px; cursor: pointer">_(Size)</th>
+                                    <th onClick="setSortedColumn('progress');" style="width: 80px; cursor: pointer">_(Done)</th>
+                                    <th onClick="setSortedColumn('num_seeds');" style="width: 100px; cursor: pointer">_(Seeds)</th>
+                                    <th onClick="setSortedColumn('num_leechs');" style="width: 100px; cursor: pointer">_(Peers)</th>
+                                    <th onClick="setSortedColumn('dlspeed');" style="width: 100px; cursor: pointer">_(Down Speed)</th>
+                                    <th onClick="setSortedColumn('upspeed');" style="width: 100px; cursor: pointer">_(Up Speed)</th>
+                                    <th onClick="setSortedColumn('eta');" style="width: 100px; cursor: pointer">_(ETA)</th>
+                                    <th onClick="setSortedColumn('ratio');" style="width: 100px; cursor: pointer">_(Ratio)</th>
                             </tr>
                     </thead>
                     <tbody id="myTable"></tbody>