egroupware/phpgwapi/js/egw_action/test/grid.css
Andreas Stöckel c7122b1006 Basic grid functionality including dynamic generation of grid rows is now working in all browsers
and performs quite well (just some non-objective data):

Lines    | IE 7/8     | FF        |  Chrome
---------------------------------------------
1000     | fast       | very fast | very fast
10000    | ok         | fast      | very fast
100000   | still ok   | ok        | fast

(Performance might still be optimized but this does not really help right now).

The code for dynamic data loading has been written but still has to be tested.

Work which still has to be done to have a fully functional grid view:
- Data columns have to be generated correctly
- Displaying trees has to be tested, but should work more or less out-of-the-box due to the design of
  the grid containers
- Client side manipulation of data (sorting/filtering...) - most functionality is already there but not
  yet used (will be tested alongside with the filemanager)
2011-03-09 22:16:41 +00:00

203 lines
3.3 KiB
CSS

body {
margin: 0;
padding: 0;
}
body, td, th {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
}
.egwGridView_grid {
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
}
.egwGridView_scrollarea {
width: 100%;
overflow: auto;
}
.egwGridView_spacer {
background-image: url(imgs/non_loaded_bg.png);
background-position: top left;
}
.egwGridView_outer {
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
padding: 0;
margin: 5px;
}
.egwGridView_outer td, .egwGridView_outer tr {
padding: 0;
margin: 0;
}
.egwGridView_grid td, .egwGridView_grid tr {
border-right: 1px solid silver;
padding: 4px 3px 4px 4px;
margin: 0;
}
.egwGridView_grid tr.odd {
background-color: #F1F1F1;
}
.egwGridView_outer thead th {
background-color: #E0E0E0;
font-weight: normal;
padding: 5px;
text-align: left;
border-left: 1px solid silver;
border-top: 1px solid silver;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
background-image: url(imgs/header_overlay.png);
background-position: center;
background-repeat: repeat-x;
}
.egwGridView_outer thead th.optcol {
padding: 0;
text-align: center;
}
/*----------------------------------------------------------------------------*/
.grid_outer {
border-spacing: 0;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.grid_outer div.scrollarea {
overflow: auto;
width:100%;
}
.grid_outer td, .grid_outer tr {
padding: 0;
margin: 0;
}
.horizontal_spacer {
display: block;
background-image: url(imgs/non_loaded_bg.png);
background-position: top left;
}
.selectcols {
display: inline-block;
width: 10px;
height: 9px;
margin: 0;
padding: 0;
vertical-align: middle;
background-image: url(imgs/selectcols.png);
background-position: center;
background-repeat: no-repeat;
}
.grid {
border-spacing: 0;
border-collapse: collapse;
}
.grid th.optcol {
width: 6px;
padding: 0;
text-align: center;
}
.grid tr.hidden {
display: none;
}
.grid td, .grid th {
border: 1px solid white;
}
.grid tr.focused td {
border: 1px dotted black;
}
.grid tr.selected td {
background-image: url(imgs/select_overlay.png);
background-position: center;
background-repeat: repeat-x;
}
.grid span.arrow {
display: inline-block;
vertical-align: middle;
width: 8px;
height: 8px;
background-repeat: no-repeat;
margin-right: 2px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.grid span.arrow.opened {
cursor: pointer;
background-image: url(imgs/arrows.png);
background-position: -8px 0;
}
.grid span.arrow.closed {
cursor: pointer;
background-image: url(imgs/arrows.png);
background-position: 0 0;
}
.grid tr.odd {
background-color: #F1F1F1;
}
.grid th {
background-color: #E0E0E0;
font-weight: normal;
padding: 5px;
text-align: left;
border-left: 1px solid silver;
border-top: 1px solid silver;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
background-image: url(imgs/header_overlay.png);
background-position: center;
background-repeat: repeat-x;
}
.grid td {
padding: 0;
vertical-align: middle;
}
.grid th.front {
font-weight: bold;
}
.grid span.caption {
vertical-align: middle;
}
.grid span.indentation {
display: inline-block;
}
.grid img.icon {
vertical-align: middle;
margin: 2px 5px 2px 2px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}