From a792e8614a428eed659c052d6ecc19b8eecd5bb1 Mon Sep 17 00:00:00 2001
From: Remy <remyvarma@gmail.com>
Date: Fri, 5 Aug 2011 00:22:30 -0700
Subject: [PATCH] Index page styling concept#1

---
 data/css/data_table.css            |   7 +++---
 data/css/style.css                 |  39 ++++++++++++++++++++++-------
 data/images/sort_asc.png           | Bin 263 -> 0 bytes
 data/images/sort_asc_disabled.png  | Bin 252 -> 0 bytes
 data/images/sort_both.png          | Bin 282 -> 0 bytes
 data/images/sort_desc.png          | Bin 260 -> 0 bytes
 data/images/sort_desc_disabled.png | Bin 251 -> 0 bytes
 data/interfaces/default/index.html |  34 ++++++++++++++++++++-----
 data/js/script.js                  |   3 +++
 9 files changed, 64 insertions(+), 19 deletions(-)
 delete mode 100644 data/images/sort_asc.png
 delete mode 100644 data/images/sort_asc_disabled.png
 delete mode 100644 data/images/sort_both.png
 delete mode 100644 data/images/sort_desc.png
 delete mode 100644 data/images/sort_desc_disabled.png

diff --git a/data/css/data_table.css b/data/css/data_table.css
index cff31eee..a1c74dce 100644
--- a/data/css/data_table.css
+++ b/data/css/data_table.css
@@ -4,7 +4,7 @@
 	-moz-border-radius: 20px;
 	width: 88%;
 	margin: 20px auto 0 auto;
-	padding: 30px;
+	padding: 25px;
 	background-color: white;
 	position: relative;
 	min-height: 302px;
@@ -38,7 +38,7 @@
 	width: 50%;
 	float: right;
 	text-align: right;
-	margin-bottom: 25px;
+	margin-bottom: 15px;
 }
 
 .dataTables_info {
@@ -87,7 +87,6 @@
  */
 table.display {
 	margin: 20px auto;
-	width: 95%;
 	clear: both;
 	
 	/* Note Firefox 3.5 and before have a bug with border-collapse
@@ -203,7 +202,7 @@ tr.odd {
 }
 
 tr.even {
-	background-color: #F5F5F5;
+	background-color: white;
 }
 
 
diff --git a/data/css/style.css b/data/css/style.css
index 3cee7e1e..7a4b8b96 100755
--- a/data/css/style.css
+++ b/data/css/style.css
@@ -86,6 +86,23 @@ a:hover { color: #036; }
     \\ ========================================== //
 */
 
+a:link {
+	color: #5E2612; 
+  	text-decoration: none; 
+  	}
+a:visited {
+  	color: #5E2612; 
+	text-decoration: none; 
+	}
+a:hover { /*this effect is not shown in NN4.xx*/
+  	color: #999999; 
+	text-decoration: underline;
+  	}
+a:active {/*colour in NN4.xx is red*/ 
+  	color: #5E2612; 
+  	text-decoration: underline; 
+	}
+
 container {  }
 
 body { background-color: #EBF4FB }
@@ -99,20 +116,24 @@ ul#nav li a:hover { background-color: #EE0000; }
 
 div#searchbar { margin: 24px auto auto 30px; float: left; }
 
-table#artist_table th#name { width: 30%; }
-table#artist_table th#status { width: 10%; }
-table#artist_table th#latestalbum { width: 35%; }
-table#artist_table th#have { width: 20%; }
+table#artist_table { background-color: white; }
+
+table#artist_table th#name { text-align: center; }
+table#artist_table th#album { text-align: center; }
+table#artist_table th#reldate { width: 125px; text-align: center; }
+table#artist_table th#center { text-align: center; }
+table#artist_table td#name { text-align: left; }
+table#artist_table td#album { text-align: center; }
+table#artist_table td#reldate { width: 125px; text-align: center; }
+
+div.progress-container { border: 1px solid #ccc; width: 100px; height: 14px; margin: 2px 5px 2px 0; padding: 1px; float: left; background: white; }
+div.progress-container > div { background-color: #ACE97C; height: 14px; }
+.havetracks { font-size: 13px; margin-left: 36px; }
 
 footer { margin: 20px auto 20px auto; }
 div#version { text-align: center; font-weight: bold; }
 div#donate { text-align: center; margin: 20px auto 20px auto; }
 
-
-
-
-
-
 .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
 .hidden { display: none; visibility: hidden; }
 .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
diff --git a/data/images/sort_asc.png b/data/images/sort_asc.png
deleted file mode 100644
index a56d0e21902ce620cd57f87fa58a6d3e804135cf..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 263
zcmeAS@N?(olHy`uVBq!ia0vp^!XV7S3?yCqj{O5tEa{HEjtmUzPnffIy#(?lOI#yL
zg7ec#$`gxH85~pclTsBta}(23gHjVyDhp4h+5i>l2Ka=y{`vF&<?H{u_y6mi^6%Qs
z|I63>J9*~+_wWBdfBFCW_y37A{>@tOZ^^2EJ(K_a|Nno&o$%d2jr=7+e!)O45@5J;
zXU0OHl&hzUV@SoVE9Xw~GAQscA1s)^?0*rXqM}DeLv7?|BU8z@Q<ntt9<njnJ|j`Y
znD@ZlWoHa-oW7$XVs$3z>COGupVzP9Hek5&L+Gnl%BD>~0~tJB{an^LB{Ts5b0m7=

diff --git a/data/images/sort_asc_disabled.png b/data/images/sort_asc_disabled.png
deleted file mode 100644
index b7e621ef1c68da839ce077cec6e201a55c1ba168..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 252
zcmeAS@N?(olHy`uVBq!ia0vp^!XV7S3?yCqj{O5tEa{HEjtmUzPnffIy#(?lOI#yL
zg7ec#$`gxH85~pclTsBta}(23gHjVyDhp4h+5i=)2l#}z{`>du$&)AV-@pIy<HzUE
zpI^Ot_51hlzkmNec<|ufy?c)zKfZJ4&j0`aCog>d9;k)4B*-rq$b|z2+ZRf0KnW*L
z7srr_TUXBQ7Ge<Kak=PnB>V6G?@}f$7k6Jhw{qGm$-QDzD`qrDaZ3s$b2XF;fBBPU
nqjNDy&Nw~puHFA+-v&m8`?>-yUFVHK{$ucT^>bP0l+XkKhw^g=

diff --git a/data/images/sort_both.png b/data/images/sort_both.png
deleted file mode 100644
index 839ac4bb5b0b414834c950de9deafff6dd94ed2d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 282
zcmeAS@N?(olHy`uVBq!ia0vp^!XV7S3?yCqj{O5tEa{HEjtmUzPnffIy#(?lOI#yL
zg7ec#$`gxH85~pclTsBta}(23gHjVyDhp4h+5i=)2l#}z{`>du$&)AV-@pIy<HzUE
zpI^Ot_51hlzkmNec<|ufy?c)zKfZJ4&j0`aCog>d9;k)4B*-rq$b|z2+ZRf0K#2rT
z7srr_TRjsz`4|*ASOSl%eg6Ob+(JtRwX|O@S}a^IES<M^Rar)~R7{gT(8t-3AepQp
zDW<l1NyH(qlCXQ0@AfT`xZ2rtb0gcPuhQK|E$f?fe^;k=XM|b({WbrT_5p@zx%{&^
T>QC<i+Qs1M>gTe~DWM4fR9b+X

diff --git a/data/images/sort_desc.png b/data/images/sort_desc.png
deleted file mode 100644
index 90b295159df995329b3a84340d32761f3d1dbade..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 260
zcmeAS@N?(olHy`uVBq!ia0vp^!XV7S3?yCqj{O5tEa{HEjtmUzPnffIy#(?lOI#yL
zg7ec#$`gxH85~pclTsBta}(23gHjVyDhp4h+5i>l2Ka=y{`vF&<?H{u_y6mi^6%Qs
z|I63>J9*~+_wWBdfBFCW_y37A{>@tOZ^^2EJ(K_a|Nno&o$%d2jr=7+e!)O45@5J;
zXU0OHl#{26V@SoVqz8vtc$~v}dc~O{CLEF2anNavMpdMP)0v(X&o(k0opIq!LdvtJ
wj~up7@0`wiSoe($&y07EkGxK6U|?nlJSz0{?wJWUfu=Edy85}Sb4q9e0C9MGu>b%7

diff --git a/data/images/sort_desc_disabled.png b/data/images/sort_desc_disabled.png
deleted file mode 100644
index 2409653dc94cd21a281a31c0e3819323b84704b7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 251
zcmeAS@N?(olHy`uVBq!ia0vp^!XV7S3?yCqj{O5tEa{HEjtmUzPnffIy#(?lOI#yL
zg7ec#$`gxH85~pclTsBta}(23gHjVyDhp4h+5i=)2l#}z{`>du$&)AV-@pIy<HzUE
zpI^Ot_51hlzkmNec<|ufy?c)zKfZJ4&j0`aCog>d9;k)4B*-rq$b|z2+ZRf0KnX`r
z7srr_TS*TNvhX;E^>j)zMNBv%VR68zN24n8K+>5N&kUJbBQCy4c=qgBiu3mAQ)hD?
n)_oJhGvi(If!Apb49pB3GXz|UGFKJ=4P)?h^>bP0l+XkK*57ji

diff --git a/data/interfaces/default/index.html b/data/interfaces/default/index.html
index 38c8ef3f..8204c1f4 100644
--- a/data/interfaces/default/index.html
+++ b/data/interfaces/default/index.html
@@ -1,3 +1,6 @@
+<%
+	from headphones import helpers
+%>
 <%inherit file="base.html"/>
 
 <%def name="body()">
@@ -5,18 +8,37 @@
 		<thead>
 			<tr>
 				<th id="name">Artist Name</th>
-				<th id="status">Status</th>
-				<th id="latestalbum">Latest Album</th>
+				<th id="album">Latest Album</th>
+				<th id="reldate">Release Date</th>
 				<th id="have">Have</th>
 			</tr>
 		</thead>
 		<tbody>
 		%for artist in artists:
+			<%
+				totaltracks = artist['TotalTracks']
+				havetracks = artist['HaveTracks']
+				if not havetracks:
+					havetracks = 0
+				try:
+					percent = (havetracks*100.0)/totaltracks
+					if percent > 100:
+						percent = 100
+				except (ZeroDivisionError, TypeError):
+					percent = 0
+					totaltracks = '?'
+				
+				if artist['ReleaseDate']:
+					releasedate = artist['ReleaseDate']
+				else:
+					releasedate = ''
+				
+			%>
 			<tr>
-				<td><a href="artistPage?ArtistID=${artist['ArtistID']}">${artist['ArtistName']}</a></td>
-				<td>${artist['Status']}</td>
-				<td><a href="albumPage?AlbumID=${artist['AlbumID']}">${artist['LatestAlbum']}</a></td>
-				<td>${artist['HaveTracks']}/${artist['TotalTracks']}</td>
+				<td id="name"><a href="artistPage?ArtistID=${artist['ArtistID']}">${artist['ArtistName']} </td>
+				<td id="album"><a href="albumPage?AlbumID=${artist['AlbumID']}">${artist['LatestAlbum']}</td>
+				<td id="reldate">${releasedate}</td>
+				<td id="have"><div class="progress-container"><div style="width:${percent}%"><div class="havetracks">${havetracks}/${totaltracks}</div></div></div></td>
 			</tr>
 		%endfor
 		</tbody>
diff --git a/data/js/script.js b/data/js/script.js
index dbcf1638..3c2b3364 100755
--- a/data/js/script.js
+++ b/data/js/script.js
@@ -2,8 +2,11 @@ $(document).ready(function()
 	{
 		$('#artist_table').dataTable(
 			{
+				"aoColumnDefs": [
+					{ "bSOtrable": false, "aTargets": [ 1 ] } ],
 				"bStateSave": true,
 				"iDisplayLength": 50,
 				"sPaginationType": "full_numbers",
+				
 			});
 	});
\ No newline at end of file