Changed how tables are layed out (since I was repeatedly duplicating code in many places) by adding a table element to be used wherever we need a table. This could probably have been a helper instead of an element, but it's not clear to me why one should be chosen over the other, and I already know how to quickly add an element (I think the real choice resides in whether you need a collection of helper functions, or you just want to drop in a chunk of html, i.e. a helper element). Also, a major revamp to the style sheets as well, although more work is clearly needed.
git-svn-id: file:///svn-source/pmgr/branches/initial_20090526/site@42 97e9348a-65ac-dc4b-aefc-98561f571b83
This commit is contained in:
abijah
@@ -27,59 +27,6 @@
|
||||
padding:0;
|
||||
}
|
||||
|
||||
/* General Style Info */
|
||||
body {
|
||||
background: #003d4c;
|
||||
color: #fff;
|
||||
font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
|
||||
font-size:90%;
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
background:#fff;
|
||||
color: #003d4c;
|
||||
text-decoration: underline;
|
||||
font-weight: bold;
|
||||
}
|
||||
a:hover {
|
||||
background:#fff;
|
||||
color: #003d4c;
|
||||
text-decoration:none;
|
||||
}
|
||||
a img {
|
||||
border:none;
|
||||
}
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: normal;
|
||||
}
|
||||
h1 {
|
||||
background:#fff;
|
||||
color: #003d4c;
|
||||
font-size: 100%;
|
||||
margin: 0.1em 0;
|
||||
}
|
||||
h2 {
|
||||
background:#fff;
|
||||
color: #e32;
|
||||
font-family:'Gill Sans','lucida grande',helvetica, arial, sans-serif;
|
||||
font-size: 190%;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
h3 {
|
||||
color: #993;
|
||||
font-family:'Gill Sans','lucida grande',helvetica, arial, sans-serif;
|
||||
font-size: 165%;
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
h4 {
|
||||
color: #993;
|
||||
font-weight: normal;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
ul, li {
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
#container {
|
||||
text-align: left;
|
||||
@@ -117,51 +64,7 @@ ul, li {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
background: #fff;
|
||||
border:1px solid #ccc;
|
||||
border-right:0;
|
||||
clear: both;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
th {
|
||||
background: #f2f2f2;
|
||||
border:1px solid #bbb;
|
||||
border-top: 1px solid #fff;
|
||||
border-left: 1px solid #fff;
|
||||
text-align: center;
|
||||
}
|
||||
th a {
|
||||
background:#f2f2f2;
|
||||
display: block;
|
||||
padding: 2px 4px;
|
||||
text-decoration: none;
|
||||
}
|
||||
th a:hover {
|
||||
background: #ccc;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
table tr td {
|
||||
background: #fff;
|
||||
border-right: 1px solid #ccc;
|
||||
padding: 4px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
table tr.altrow td {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
td.actions {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
td.actions a {
|
||||
margin: 0px 6px;
|
||||
}
|
||||
|
||||
.cake-sql-log table {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
@@ -208,102 +111,6 @@ dd {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
form {
|
||||
clear: both;
|
||||
margin-right: 20px;
|
||||
padding: 0;
|
||||
width: 80%;
|
||||
}
|
||||
fieldset {
|
||||
border: 1px solid #ccc;
|
||||
margin-top: 30px;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
fieldset legend {
|
||||
background:#fff;
|
||||
color: #e32;
|
||||
font-size: 160%;
|
||||
font-weight: bold;
|
||||
}
|
||||
fieldset fieldset {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 20px;
|
||||
padding: 16px 10px;
|
||||
}
|
||||
fieldset fieldset legend {
|
||||
font-size: 120%;
|
||||
font-weight: normal;
|
||||
}
|
||||
fieldset fieldset div {
|
||||
clear: left;
|
||||
margin: 0 20px;
|
||||
}
|
||||
form div {
|
||||
clear: both;
|
||||
margin-bottom: 1em;
|
||||
padding: .5em;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
form div.input {
|
||||
color: #444;
|
||||
}
|
||||
form div.required {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
form div.submit {
|
||||
border: 0;
|
||||
clear: both;
|
||||
margin-top: 10px;
|
||||
margin-left: 140px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-size: 110%;
|
||||
padding-right: 20px;
|
||||
}
|
||||
input, textarea {
|
||||
clear: both;
|
||||
font-size: 140%;
|
||||
font-family: "frutiger linotype", "lucida grande", "verdana", sans-serif;
|
||||
padding: 2px;
|
||||
width: 100%;
|
||||
}
|
||||
select {
|
||||
clear: both;
|
||||
font-size: 120%;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
select[multiple=multiple] {
|
||||
width: 100%;
|
||||
}
|
||||
option {
|
||||
font-size: 120%;
|
||||
padding: 0 3px;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
clear: left;
|
||||
float: left;
|
||||
margin: 0px 6px 7px 2px;
|
||||
width: auto;
|
||||
}
|
||||
input[type=radio] {
|
||||
float:left;
|
||||
width:auto;
|
||||
margin: 0 3px 7px 0;
|
||||
}
|
||||
div.radio label {
|
||||
margin: 0 0 6px 20px;
|
||||
}
|
||||
input[type=submit] {
|
||||
display: inline;
|
||||
font-size: 110%;
|
||||
padding: 2px 5px;
|
||||
width: auto;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/* Notices and Errors */
|
||||
div.message {
|
||||
clear: both;
|
||||
@@ -347,6 +154,14 @@ p.error em {
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
td.actions {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
td.actions a {
|
||||
margin: 0px 6px;
|
||||
}
|
||||
|
||||
div.actions ul {
|
||||
margin: 0px 0;
|
||||
padding: 0;
|
||||
|
||||
154
webroot/css/layout.css
Normal file
154
webroot/css/layout.css
Normal file
@@ -0,0 +1,154 @@
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Debug table margin/padding helper
|
||||
*/
|
||||
|
||||
/* table th, td { border: dashed 1px; } */
|
||||
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Overall page layout
|
||||
*/
|
||||
|
||||
table#layout { width: 100% }
|
||||
td#sidecolumn ,
|
||||
td#pagecolumn { vertical-align: top; }
|
||||
td#pagecolumn { padding-left: 4mm; }
|
||||
|
||||
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Panel captions
|
||||
*/
|
||||
|
||||
table caption { text-align: left;
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
table.item caption { margin-top: 1em; }
|
||||
table.detail caption { margin-top: 0; }
|
||||
|
||||
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Cell configuration
|
||||
*/
|
||||
|
||||
table.item th ,
|
||||
table.item td { padding: 0.1em 0.4em 0.1em 0.4em; }
|
||||
table.item { white-space: nowrap; }
|
||||
/* table.item { border-spacing: 0 0; /\*IE*\/border-collapse: collapse; empty-cells: show } */
|
||||
table.item { border-spacing: 0 0; empty-cells: show }
|
||||
table.item { border:1px solid #ccc;
|
||||
border-bottom:2px solid #ccc;
|
||||
}
|
||||
|
||||
table.item th { background: #f2f2f2;
|
||||
border-top: 1px solid #fff;
|
||||
border-left: 1px solid #fff;
|
||||
border-right: 1px solid #ccc;
|
||||
/* text-align: center; */
|
||||
}
|
||||
table.item td { border-right: 1px solid #ccc; }
|
||||
|
||||
tr.evnrow { background: #f4f4f4; }
|
||||
|
||||
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Formatting for item listings
|
||||
*/
|
||||
|
||||
/** Item listing width and borders **/
|
||||
table.list { width : 100%; }
|
||||
table.detail { width : 60%; }
|
||||
|
||||
/** Column to which any extra real estate should be allocated **/
|
||||
/* table.list.view td#referer , */
|
||||
/* table.list.browser td#web_browser , */
|
||||
/* table.list.tracker td#url , */
|
||||
table.list td.comment { width: 99%; }
|
||||
table.detail td.field { width: 10em }
|
||||
|
||||
/** Text alignment exceptions **/
|
||||
table.list td.id { text-align: center; }
|
||||
|
||||
/** White spacing exceptions **/
|
||||
table.list td.comment { white-space: normal; }
|
||||
|
||||
/* table.detail td {word-wrap : normal} */
|
||||
|
||||
table.list.ledger td.date.receipt { padding-left: 1em }
|
||||
|
||||
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* General Style Info
|
||||
*/
|
||||
|
||||
body {
|
||||
/* background: #003d4c; */
|
||||
/* color: #fff; */
|
||||
font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
|
||||
font-size:90%;
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
color: #003d4c;
|
||||
text-decoration: underline;
|
||||
font-weight: bold;
|
||||
}
|
||||
a:hover {
|
||||
color: #f00;
|
||||
text-decoration:none;
|
||||
}
|
||||
a img {
|
||||
border:none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
background:#fff;
|
||||
color: #003d4c;
|
||||
font-size: 100%;
|
||||
margin: 0.1em 0;
|
||||
}
|
||||
h2 {
|
||||
background:#fff;
|
||||
color: #e32;
|
||||
font-family:'Gill Sans','lucida grande',helvetica, arial, sans-serif;
|
||||
font-size: 190%;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
h3 {
|
||||
color: #993;
|
||||
font-family:'Gill Sans','lucida grande',helvetica, arial, sans-serif;
|
||||
font-size: 165%;
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
h4 {
|
||||
color: #993;
|
||||
font-weight: normal;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Forms */
|
||||
}
|
||||
input[type=checkbox] {
|
||||
clear: left;
|
||||
float: left;
|
||||
margin: 0px 6px 7px 2px;
|
||||
width: auto;
|
||||
}
|
||||
input[type=radio] {
|
||||
float:left;
|
||||
width:auto;
|
||||
margin: 0 3px 7px 0;
|
||||
}
|
||||
@@ -1,141 +1,40 @@
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Debug table margin/padding helper
|
||||
* Side Menu Layout
|
||||
*/
|
||||
|
||||
/* table th, td { border: dashed 1px; } */
|
||||
td#sidecolumn { width: 10em; background: lightblue; text-align: left; }
|
||||
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Overall page layout
|
||||
*/
|
||||
|
||||
table#layout { width: 100% }
|
||||
td#sidecolumn { width: 10em; background: lightblue; text-align: left; }
|
||||
td#pagecolumn { padding-left: 4mm; }
|
||||
td#sidecolumn ,
|
||||
td#pagecolumn { vertical-align: top; }
|
||||
|
||||
td#sidecolumn .header { margin-top: 0.4em; }
|
||||
td#sidecolumn .header ,
|
||||
td#sidecolumn .item { white-space : nowrap; }
|
||||
td#sidecolumn .item { padding-left: 0.6em; }
|
||||
td#sidecolumn .item a { background: lightblue; }
|
||||
|
||||
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Menu Headers
|
||||
*/
|
||||
|
||||
td#sidecolumn .header { margin-top: 0.4em;
|
||||
background: blue;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Menu Separators
|
||||
*/
|
||||
|
||||
td#sidecolumn hr { margin-top: 0.4em; margin-bottom: 0.3em; }
|
||||
|
||||
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Panel captions
|
||||
*/
|
||||
|
||||
table caption { text-align: left;
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Panel headers
|
||||
* Menu Items
|
||||
*/
|
||||
|
||||
td#sidecolumn .header ,
|
||||
table.list th ,
|
||||
table.edit td.name { background: blue;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
td#sidecolumn .item { padding-left: 0.6em; }
|
||||
|
||||
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Cell configuration
|
||||
*/
|
||||
|
||||
th, td { padding: 0.1em 0.4em 0.1em 0.4em; }
|
||||
table.item { border-spacing: 0 0; /*IE*/border-collapse: collapse; empty-cells: show }
|
||||
|
||||
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Overall text alignment
|
||||
*/
|
||||
|
||||
th, td { text-align: left; }
|
||||
|
||||
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Formatting for item listings
|
||||
*/
|
||||
|
||||
/** Item listing width and borders **/
|
||||
table.list { width: 100%; }
|
||||
table.list td { border: 1px solid #000; }
|
||||
|
||||
/* IE doesn't seem to work with first-child. this combination of
|
||||
* rules works for both IE and Firefox */
|
||||
table.list th { border-left: 1px solid #fff; border-top: 1px solid #000; }
|
||||
table.list th:first-child { border-left: 1px solid #000 }
|
||||
table.list { border: 1px solid #000; }
|
||||
|
||||
/** Column to which any extra real estate should be allocated **/
|
||||
table.list.view td#referer ,
|
||||
table.list.browser td#web_browser ,
|
||||
table.list.tracker td#url ,
|
||||
table.list.category td#comment { width: 99%; }
|
||||
|
||||
/** Text alignment exceptions **/
|
||||
table.list td#id ,
|
||||
table.list td#operation ,
|
||||
table.list td#browser ,
|
||||
table.list td#views ,
|
||||
table.list td#uniques { text-align: center; }
|
||||
|
||||
/** White spacing exceptions **/
|
||||
table.list { white-space : nowrap }
|
||||
table.list.browser td#web_browser ,
|
||||
table.list.category td#comment { white-space: normal; }
|
||||
|
||||
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Format for item editing
|
||||
*/
|
||||
|
||||
/** Item editing width and borders **/
|
||||
table.edit tr:first-child td.name { border-top: none }
|
||||
table.edit td.name { border-top: 1px solid #fff; width:1% }
|
||||
|
||||
/** Text alignment exceptions **/
|
||||
table.edit td.name { text-align: right }
|
||||
table.edit td.value { text-align: left }
|
||||
|
||||
|
||||
/************************************************************
|
||||
************************************************************
|
||||
* Form submission buttons after item tables
|
||||
*/
|
||||
|
||||
div.opbuttons { margin-top: 1.0em; text-align: left }
|
||||
|
||||
|
||||
|
||||
|
||||
/* table#unitinfo, table#tenantinfo { width: 60% } */
|
||||
/* table#unitinfo td:first-child, table#tenantinfo td:first-child { width: 30% } */
|
||||
/* table#unitinfo td, table#tenanatinfo td { width: 70% } */
|
||||
/* /\*table.detail td:first-child { width: 30% }*\/ */
|
||||
/* /\*table.detail td { width: 1% }*\/ */
|
||||
/* #unitinfo caption, #tenantinfo caption { margin-top: 0px; } */
|
||||
/* table.detail caption { margin-top: 1.5em; text-align: left; font-size: 14pt; font-weight: bold } */
|
||||
/* table.detail {width: 80% } */
|
||||
/* table.detail {border-spacing: 0 0} */
|
||||
/* table.detail {border-left: 1px solid #000; border-top: 1px solid #000} */
|
||||
/* table.detail {empty-cells: show} */
|
||||
/* table.detail td, table.detail th {padding: 0.1em 0.2em 0.1em 0.2em } */
|
||||
/* table.detail td, table.detail th {border-right: 1px solid #000; border-bottom: 1px solid #000} */
|
||||
/* table.detail td {word-wrap : normal} */
|
||||
|
||||
Reference in New Issue
Block a user