From b03af4299401159d308b63b85d81e7b3a1801039 Mon Sep 17 00:00:00 2001
From: Sam Minnee <sam@silverstripe.com>
Date: Thu, 4 Feb 2010 01:14:00 +0000
Subject: [PATCH] ENHANCEMENT: Improved TableListField header styling. (from
 r96028)

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/branches/2.4@98104 467b73ca-7a2a-4603-9d3b-597d59a354a9
---
 css/TableListField.css       | 10 +++++-----
 javascript/TableListField.js |  6 +++---
 templates/TableListField.ss  | 13 ++++++-------
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/css/TableListField.css b/css/TableListField.css
index c5c9f9ff7..61e3968cb 100644
--- a/css/TableListField.css
+++ b/css/TableListField.css
@@ -37,15 +37,17 @@ table.CMSList thead th {
 	background-repeat: repeat-x;
 	background-position: left bottom;
 	background-color: #ebeadb;
-	height: 24px;
 	border-right: 1px solid #aca899;
 	border-left: 1px solid #ffffff;
+	white-space: nowrap;
+	padding: 3px;
+	font-size: 12px;
+	text-align: left;
 }
 
 table.TableField thead th span, 
 .TableListField table.data thead th span {
-	display: block;
-	float: left;
+	font-size: 12px;
 }
 
 table.TableField thead th a, 
@@ -57,8 +59,6 @@ table.CMSList thead th a {
 table.TableField thead th span.sortLink, 
 .TableListField table.data thead th span.sortLink, 
 table.CMSList thead th span.sortLink {
-	width: 16px;
-	height: 16px;
 	overflow: hidden;
 }
 
diff --git a/javascript/TableListField.js b/javascript/TableListField.js
index 24fdfff1e..b53a69c09 100755
--- a/javascript/TableListField.js
+++ b/javascript/TableListField.js
@@ -17,15 +17,15 @@ TableListField.prototype = {
 		rules['#'+this.id+' th'] = {
 			initialize: function() {
 				var sortLinks = $$('span.sortLinkHidden a', this);
-				if(sortLinks) Element.hide(sortLinks[0]);
+				if(sortLinks) sortLinks[0].style.visibility = 'hidden';
 			},	
 			onmouseover: function(e) {
 				var sortLinks = $$('span.sortLinkHidden a', this);
-				if(sortLinks) Element.show(sortLinks[0]);
+				if(sortLinks) sortLinks[0].style.visibility = 'visible';
 			},
 			onmouseout: function(e) {
 				var sortLinks = $$('span.sortLinkHidden a', this);
-				if(sortLinks) Element.hide(sortLinks[0]);
+				if(sortLinks) sortLinks[0].style.visibility = 'hidden';
 			}
 		};
 		
diff --git a/templates/TableListField.ss b/templates/TableListField.ss
index 6ef2b87ae..99187443b 100755
--- a/templates/TableListField.ss
+++ b/templates/TableListField.ss
@@ -18,17 +18,16 @@
 						<a href="$SortLink">$Title</a>
 					</span>
 					<span class="sortLink <% if SortBy %><% else %>sortLinkHidden<% end_if %>">
-						<a href="$SortLink"">
-							<% if SortDirection = desc %>
-							<img src="cms/images/bullet_arrow_down.png" alt="<% _t('SORTDESC', 'Sort in descending order') %>" />
-							<% else %>
-							<img src="cms/images/bullet_arrow_up.png" alt="<% _t('SORTASC', 'Sort in ascending order') %>" />
-							<% end_if %>
+					<% if SortDirection = desc %>
+						<a href="$SortLink"><img src="cms/images/bullet_arrow_down.png" alt="<% _t('SORTDESC', 'Sort in descending order') %>" /></a>
+					<% else %>
+						<a href="$SortLink"><img src="cms/images/bullet_arrow_up.png" alt="<% _t('SORTASC', 'Sort in ascending order') %>" /></a>
+					<% end_if %>
 						</a>
 						&nbsp;
 					</span>
 				<% else %>
-					$Title
+					<span>$Title</span>
 				<% end_if %>
 				</th>
 			<% end_control %>