From 01e9595d7e85880aec350bd5facd0526d41aa4f2 Mon Sep 17 00:00:00 2001
From: Remy <remyvarma@gmail.com>
Date: Thu, 4 Aug 2011 17:25:13 -0700
Subject: [PATCH] Artist table basic styling

---
 data/css/data_table.css            | 273 +++--------------------------
 data/css/style.css                 |  18 +-
 data/interfaces/default/base.html  |  31 +---
 data/interfaces/default/index.html |   8 +-
 headphones/webserve.py             |   2 +-
 5 files changed, 37 insertions(+), 295 deletions(-)
 mode change 100644 => 100755 data/interfaces/default/base.html

diff --git a/data/css/data_table.css b/data/css/data_table.css
index b230bea8..1ee83731 100644
--- a/data/css/data_table.css
+++ b/data/css/data_table.css
@@ -1,36 +1,9 @@
-/*
- *  File:         data_table.css
- *  CVS:          $Id$
- *  Description:  CSS descriptions for DataTables demo pages
- *  Author:       Allan Jardine
- *  Created:      Tue May 12 06:47:22 BST 2009
- *  Modified:     $Date$ by $Author$
- *  Language:     CSS
- *  Project:      DataTables
- *
- *  Copyright 2009 Allan Jardine. All Rights Reserved.
- *
- * ***************************************************************************
- * DESCRIPTION
- *
- * The styles given here are suitable for the demos that are used with the standard DataTables
- * distribution (see www.datatables.net). You will most likely wish to modify these styles to
- * meet the layout requirements of your site.
- *
- * Common issues:
- *   'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
- *     no conflict between the two pagination types. If you want to use full_numbers pagination
- *     ensure that you either have "example_alt_pagination" as a body class name, or better yet,
- *     modify that selector.
- *   Note that the path used for Images is relative. All images are by default located in
- *     ../images/ - relative to this CSS file.
- */
-
-/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
- * DataTables features
- */
-
 .dataTables_wrapper {
+	border-radius: 10px;
+	width: 90%;
+	margin: 0 auto 0 auto;
+	padding: 20px;
+	background-color: white;
 	position: relative;
 	min-height: 302px;
 	clear: both;
@@ -42,7 +15,7 @@
 	position: absolute;
 	top: 50%;
 	left: 50%;
-	width: 250px;
+	width: 20px;
 	height: 30px;
 	margin-left: -125px;
 	margin-top: -15px;
@@ -63,11 +36,14 @@
 	width: 50%;
 	float: right;
 	text-align: right;
+	margin-bottom: 25px;
 }
 
 .dataTables_info {
-	width: 60%;
+	width: 40%;
 	float: left;
+	background-color: white;
+	font-weight: bold;
 }
 
 .dataTables_paginate {
@@ -75,6 +51,7 @@
 	* width: 50px;
 	float: right;
 	text-align: right;
+	background-color: white;
 }
 
 /* Pagination nested */
@@ -107,9 +84,8 @@
  * DataTables display
  */
 table.display {
-	margin: 0 auto;
+	margin: 20px auto;
 	clear: both;
-	width: 100%;
 	
 	/* Note Firefox 3.5 and before have a bug with border-collapse
 	 * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 ) 
@@ -127,8 +103,9 @@ table.display {
 
 table.display thead th {
 	padding: 3px 18px 3px 10px;
-	border-bottom: 1px solid black;
+	background-color: white;
 	font-weight: bold;
+	font-size: 16px;
 	cursor: pointer;
 	* cursor: hand;
 }
@@ -145,6 +122,7 @@ table.display tr.heading2 td {
 
 table.display td {
 	padding: 3px 10px;
+	font-size: 16px;
 }
 
 table.display td.center {
@@ -218,11 +196,11 @@ table.display tr.even.gradeU {
 
 
 tr.odd {
-	background-color: #E2E4FF;
+	background-color: white;
 }
 
 tr.even {
-	background-color: white;
+	background-color: #F5F5F5;
 }
 
 
@@ -255,7 +233,11 @@ tr.even {
 }
 
 .dataTables_empty {
+	font-size: 24px;
 	text-align: center;
+	vertical-align: middle;
+	height: 200px;
+	width: 90%;
 }
 
 tfoot input {
@@ -279,11 +261,6 @@ td.details {
 	border: 2px solid #A19B9E;
 }
 
-
-.example_alt_pagination div.dataTables_info {
-	width: 40%;
-}
-
 .paging_full_numbers {
 	width: 400px;
 	height: 22px;
@@ -321,214 +298,6 @@ table.display tr.odd.row_selected td {
 	background-color: #9FAFD1;
 }
 
-
-/*
- * Sorting classes for columns
- */
-/* For the standard odd/even */
-tr.odd td.sorting_1 {
-	background-color: #D3D6FF;
-}
-
-tr.odd td.sorting_2 {
-	background-color: #DADCFF;
-}
-
-tr.odd td.sorting_3 {
-	background-color: #E0E2FF;
-}
-
-tr.even td.sorting_1 {
-	background-color: #EAEBFF;
-}
-
-tr.even td.sorting_2 {
-	background-color: #F2F3FF;
-}
-
-tr.even td.sorting_3 {
-	background-color: #F9F9FF;
-}
-
-
-/* For the Conditional-CSS grading rows */
-/*
- 	Colour calculations (based off the main row colours)
-  Level 1:
-		dd > c4
-		ee > d5
-	Level 2:
-	  dd > d1
-	  ee > e2
- */
-tr.odd.gradeA td.sorting_1 {
-	background-color: #c4ffc4;
-}
-
-tr.odd.gradeA td.sorting_2 {
-	background-color: #d1ffd1;
-}
-
-tr.odd.gradeA td.sorting_3 {
-	background-color: #d1ffd1;
-}
-
-tr.even.gradeA td.sorting_1 {
-	background-color: #d5ffd5;
-}
-
-tr.even.gradeA td.sorting_2 {
-	background-color: #e2ffe2;
-}
-
-tr.even.gradeA td.sorting_3 {
-	background-color: #e2ffe2;
-}
-
-tr.odd.gradeC td.sorting_1 {
-	background-color: #c4c4ff;
-}
-
-tr.odd.gradeC td.sorting_2 {
-	background-color: #d1d1ff;
-}
-
-tr.odd.gradeC td.sorting_3 {
-	background-color: #d1d1ff;
-}
-
-tr.even.gradeC td.sorting_1 {
-	background-color: #d5d5ff;
-}
-
-tr.even.gradeC td.sorting_2 {
-	background-color: #e2e2ff;
-}
-
-tr.even.gradeC td.sorting_3 {
-	background-color: #e2e2ff;
-}
-
-tr.odd.gradeX td.sorting_1 {
-	background-color: #ffc4c4;
-}
-
-tr.odd.gradeX td.sorting_2 {
-	background-color: #ffd1d1;
-}
-
-tr.odd.gradeX td.sorting_3 {
-	background-color: #ffd1d1;
-}
-
-tr.even.gradeX td.sorting_1 {
-	background-color: #ffd5d5;
-}
-
-tr.even.gradeX td.sorting_2 {
-	background-color: #ffe2e2;
-}
-
-tr.even.gradeX td.sorting_3 {
-	background-color: #ffe2e2;
-}
-
-tr.odd.gradeU td.sorting_1 {
-	background-color: #c4c4c4;
-}
-
-tr.odd.gradeU td.sorting_2 {
-	background-color: #d1d1d1;
-}
-
-tr.odd.gradeU td.sorting_3 {
-	background-color: #d1d1d1;
-}
-
-tr.even.gradeU td.sorting_1 {
-	background-color: #d5d5d5;
-}
-
-tr.even.gradeU td.sorting_2 {
-	background-color: #e2e2e2;
-}
-
-tr.even.gradeU td.sorting_3 {
-	background-color: #e2e2e2;
-}
-
-
-/*
- * Row highlighting example
- */
-.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
-	background-color: #ECFFB3;
-}
-
-.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
-	background-color: #E6FF99;
-}
-
-.ex_highlight_row #example tr.even:hover {
-	background-color: #ECFFB3;
-}
-
-.ex_highlight_row #example tr.even:hover td.sorting_1 {
-	background-color: #DDFF75;
-}
-
-.ex_highlight_row #example tr.even:hover td.sorting_2 {
-	background-color: #E7FF9E;
-}
-
-.ex_highlight_row #example tr.even:hover td.sorting_3 {
-	background-color: #E2FF89;
-}
-
-.ex_highlight_row #example tr.odd:hover {
-	background-color: #E6FF99;
-}
-
-.ex_highlight_row #example tr.odd:hover td.sorting_1 {
-	background-color: #D6FF5C;
-}
-
-.ex_highlight_row #example tr.odd:hover td.sorting_2 {
-	background-color: #E0FF84;
-}
-
-.ex_highlight_row #example tr.odd:hover td.sorting_3 {
-	background-color: #DBFF70;
-}
-
-
-/*
- * KeyTable
- */
-table.KeyTable td {
-	border: 3px solid transparent;
-}
-
-table.KeyTable td.focus {
-	border: 3px solid #3366FF;
-}
-
-table.display tr.gradeA {
-	background-color: #eeffee;
-}
-
-table.display tr.gradeC {
-	background-color: #ddddff;
-}
-
-table.display tr.gradeX {
-	background-color: #ffdddd;
-}
-
-table.display tr.gradeU {
-	background-color: #ddd;
-}
-
 div.box {
 	height: 100px;
 	padding: 10px;
diff --git a/data/css/style.css b/data/css/style.css
index 7afda82b..e0a951d5 100755
--- a/data/css/style.css
+++ b/data/css/style.css
@@ -87,20 +87,12 @@ a:hover { color: #036; }
 */
 
 body { background-color: #EBF4FB }
-div#logo { float: left; margin-left: 10px; }
-
-ul#nav { font-family: Arial, Verdana; font-size: 14px; padding: 0; list-style: none; float: left; }
-ul#nav li { display: inline; margin-top: 25px; }
-ul#nav li a { text-decoration: none; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; margin-left: 1px; white-space: nowrap; }
-ul#nav li a:hover { background: #22eeff }
-
-table#artist_table { margin-left: auto; margin-right: auto; }
-
-footer { margin-top: 40px; text-align: center; padding: 20px; }
-
-
-
+header { height: 68px; padding: 0 10px 0 10px; background-color: #F5F5F5; margin-bottom: 20px; }
 
+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%; }
 
 
 
diff --git a/data/interfaces/default/base.html b/data/interfaces/default/base.html
old mode 100644
new mode 100755
index a82ee1f6..7fa334d5
--- a/data/interfaces/default/base.html
+++ b/data/interfaces/default/base.html
@@ -21,47 +21,28 @@
 	<link rel="apple-touch-icon" href="images/headphoneslogo.png">
 	<link rel="stylesheet" href="css/style.css?v=2">
 	${next.headerIncludes()}
-
+	
 	<script src="js/libs/modernizr-1.7.min.js"></script>
 </head>
 <body>
 	<div id="container">
 		<header>
-			<div id="logo">
-				<a href="home"><img src="images/headphoneslogo.png" alt="headphones"></a>
-			</div>
-			<div id="search">
-				
-			</div>
-			<ul id="nav">
-				<li><a href="upcoming">upcoming</a></li>
-				<li><a href="extras">extras</a></li>
-				<li><a href="manage">manage</a></li>
-				<li><a href="history">history</a></li>
-				<li><a href="logs">logs</a></li>
-				<li><a href="config">settings</a></li>
-			</ul>
+			<img src="images/headphoneslogo.png" alt="headphones">
 		</header>
 
-		<div id="main" role="main">
-		${next.body()}
+		<div id="main" class="main">
+			${next.body()}
 		</div>
 
 		<footer>
-			<div class="version">Version: ${headphones.CURRENT_VERSION}</div>
-					<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
-					<input type="hidden" name="cmd" value="_s-xclick">
-					<input type="hidden" name="hosted_button_id" value="93FFC6WDV97QS">
-					<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
-					<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
-				</form>
-			</div>
+
 		</footer>
 	</div>
 
 	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 	<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.2.min.js"%3E%3C/script%3E'))</script>
 	${next.javascriptIncludes()}
+	
 	<script src="js/plugins.js"></script>
 	<script src="js/script.js"></script>
 
diff --git a/data/interfaces/default/index.html b/data/interfaces/default/index.html
index e09afd23..38c8ef3f 100644
--- a/data/interfaces/default/index.html
+++ b/data/interfaces/default/index.html
@@ -4,10 +4,10 @@
 	<table class="display" id="artist_table">
 		<thead>
 			<tr>
-				<th>Artist Name</th>
-				<th>Status</th>
-				<th>Latest Album</th>
-				<th>Have</th>
+				<th id="name">Artist Name</th>
+				<th id="status">Status</th>
+				<th id="latestalbum">Latest Album</th>
+				<th id="have">Have</th>
 			</tr>
 		</thead>
 		<tbody>
diff --git a/headphones/webserve.py b/headphones/webserve.py
index 5af92dd0..35524d98 100644
--- a/headphones/webserve.py
+++ b/headphones/webserve.py
@@ -34,7 +34,7 @@ class WebInterface(object):
 	def home(self):
 		myDB = db.DBConnection()
 		artists = myDB.select('SELECT * from artists order by ArtistSortName COLLATE NOCASE')
-		return serve_template(templatename="index.html", title='Home', artists=artists)
+		return serve_template(templatename="index.html", title="Home", artists=artists)
 	home.exposed = True
 
 	def homeold(self):