Index page styling concept#1

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;
 }
 
 

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 { background-color: white; }
-table#artist_table th#status { width: 10%; }
+
-table#artist_table th#latestalbum { width: 35%; }
+table#artist_table th#name { text-align: center; }
-table#artist_table th#have { width: 20%; }
+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; }

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="album">Latest Album</th>
-				<th id="latestalbum">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 id="name"><a href="artistPage?ArtistID=${artist['ArtistID']}">${artist['ArtistName']} </td>
-				<td>${artist['Status']}</td>
+				<td id="album"><a href="albumPage?AlbumID=${artist['AlbumID']}">${artist['LatestAlbum']}</td>
-				<td><a href="albumPage?AlbumID=${artist['AlbumID']}">${artist['LatestAlbum']}</a></td>
+				<td id="reldate">${releasedate}</td>
-				<td>${artist['HaveTracks']}/${artist['TotalTracks']}</td>
+				<td id="have"><div class="progress-container"><div style="width:${percent}%"><div class="havetracks">${havetracks}/${totaltracks}</div></div></div></td>
 			</tr>
 		%endfor
 		</tbody>

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",
+				
 			});
 	});