gronod/headphones
1
0
Fork 1
mirror of https://github.com/rembo10/headphones.git synced 2026-03-22 04:39:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Artist table basic styling

Browse Source
This commit is contained in:
Remy
2011-08-04 17:25:13 -07:00
parent dc53c38f27
commit 01e9595d7e
5 changed files with 37 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
data/css/data_table.css
View File

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

18
data/css/style.css
View File

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

31
data/interfaces/default/base.html Normal file → Executable file
View File

@@ -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>

8
data/interfaces/default/index.html
View File

@@ -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>

2
headphones/webserve.py
View File

@@ -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):