gronod/headphones
1
0
Fork 0
mirror of https://github.com/rembo10/headphones.git synced 2026-07-21 00:14:02 +01: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
data/css/data_table.css
+21 -252
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 { .dataTables_wrapper {
border-radius: 10px;
width: 90%;
margin: 0 auto 0 auto;
padding: 20px;
background-color: white;
position: relative; position: relative;
min-height: 302px; min-height: 302px;
clear: both; clear: both;
@@ -42,7 +15,7 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 250px; width: 20px;
height: 30px; height: 30px;
margin-left: -125px; margin-left: -125px;
margin-top: -15px; margin-top: -15px;
@@ -63,11 +36,14 @@
width: 50%; width: 50%;
float: right; float: right;
text-align: right; text-align: right;
margin-bottom: 25px;
} }
.dataTables_info { .dataTables_info {
width: 60%; width: 40%;
float: left; float: left;
background-color: white;
font-weight: bold;
} }
.dataTables_paginate { .dataTables_paginate {
@@ -75,6 +51,7 @@
* width: 50px; * width: 50px;
float: right; float: right;
text-align: right; text-align: right;
background-color: white;
} }
/* Pagination nested */ /* Pagination nested */
@@ -107,9 +84,8 @@
* DataTables display * DataTables display
*/ */
table.display { table.display {
margin: 0 auto; margin: 20px auto;
clear: both; clear: both;
width: 100%;
/* Note Firefox 3.5 and before have a bug with border-collapse /* Note Firefox 3.5 and before have a bug with border-collapse
* ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 ) * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 )
@@ -127,8 +103,9 @@ table.display {
table.display thead th { table.display thead th {
padding: 3px 18px 3px 10px; padding: 3px 18px 3px 10px;
border-bottom: 1px solid black; background-color: white;
font-weight: bold; font-weight: bold;
font-size: 16px;
cursor: pointer; cursor: pointer;
* cursor: hand; * cursor: hand;
} }
@@ -145,6 +122,7 @@ table.display tr.heading2 td {
table.display td { table.display td {
padding: 3px 10px; padding: 3px 10px;
font-size: 16px;
} }
table.display td.center { table.display td.center {
@@ -218,11 +196,11 @@ table.display tr.even.gradeU {
tr.odd { tr.odd {
background-color: #E2E4FF; background-color: white;
} }
tr.even { tr.even {
background-color: white; background-color: #F5F5F5;
} }
@@ -255,7 +233,11 @@ tr.even {
} }
.dataTables_empty { .dataTables_empty {
font-size: 24px;
text-align: center; text-align: center;
vertical-align: middle;
height: 200px;
width: 90%;
} }
tfoot input { tfoot input {
@@ -279,11 +261,6 @@ td.details {
border: 2px solid #A19B9E; border: 2px solid #A19B9E;
} }
.example_alt_pagination div.dataTables_info {
width: 40%;
}
.paging_full_numbers { .paging_full_numbers {
width: 400px; width: 400px;
height: 22px; height: 22px;
@@ -321,214 +298,6 @@ table.display tr.odd.row_selected td {
background-color: #9FAFD1; 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 { div.box {
height: 100px; height: 100px;
padding: 10px; padding: 10px;
data/css/style.css
+5 -13
View File
@@ -87,20 +87,12 @@ a:hover { color: #036; }
*/ */
body { background-color: #EBF4FB } body { background-color: #EBF4FB }
div#logo { float: left; margin-left: 10px; } header { height: 68px; padding: 0 10px 0 10px; background-color: #F5F5F5; margin-bottom: 20px; }
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; }
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%; }
data/interfaces/default/base.html
Regular → Executable
+6 -25
View File
@@ -21,47 +21,28 @@
<link rel="apple-touch-icon" href="images/headphoneslogo.png"> <link rel="apple-touch-icon" href="images/headphoneslogo.png">
<link rel="stylesheet" href="css/style.css?v=2"> <link rel="stylesheet" href="css/style.css?v=2">
${next.headerIncludes()} ${next.headerIncludes()}
<script src="js/libs/modernizr-1.7.min.js"></script> <script src="js/libs/modernizr-1.7.min.js"></script>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<header> <header>
<div id="logo"> <img src="images/headphoneslogo.png" alt="headphones">
<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>
</header> </header>
<div id="main" role="main"> <div id="main" class="main">
${next.body()} ${next.body()}
</div> </div>
<footer> <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> </footer>
</div> </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <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> <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.2.min.js"%3E%3C/script%3E'))</script>
${next.javascriptIncludes()} ${next.javascriptIncludes()}
<script src="js/plugins.js"></script> <script src="js/plugins.js"></script>
<script src="js/script.js"></script> <script src="js/script.js"></script>
data/interfaces/default/index.html
+4 -4
View File
@@ -4,10 +4,10 @@
<table class="display" id="artist_table"> <table class="display" id="artist_table">
<thead> <thead>
<tr> <tr>
<th>Artist Name</th> <th id="name">Artist Name</th>
<th>Status</th> <th id="status">Status</th>
<th>Latest Album</th> <th id="latestalbum">Latest Album</th>
<th>Have</th> <th id="have">Have</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
headphones/webserve.py
+1 -1
View File
@@ -34,7 +34,7 @@ class WebInterface(object):
def home(self): def home(self):
myDB = db.DBConnection() myDB = db.DBConnection()
artists = myDB.select('SELECT * from artists order by ArtistSortName COLLATE NOCASE') 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 home.exposed = True
def homeold(self): def homeold(self):