From de38d2ffb20d4618041eee1d853833d613f05bec Mon Sep 17 00:00:00 2001 From: Gonzalo Bellver Date: Mon, 10 Oct 2011 20:25:49 -0300 Subject: [PATCH] Basic Table styling --- .../src/main/webapp/html/css/demo_table.css | 538 ------------------ .../src/main/webapp/html/css/styles.less | 16 +- .../src/main/webapp/html/css/table.less | 262 +++++++++ .../src/main/webapp/html/workspace.html | 28 +- 4 files changed, 293 insertions(+), 551 deletions(-) delete mode 100644 wise-webapp/src/main/webapp/html/css/demo_table.css create mode 100644 wise-webapp/src/main/webapp/html/css/table.less diff --git a/wise-webapp/src/main/webapp/html/css/demo_table.css b/wise-webapp/src/main/webapp/html/css/demo_table.css deleted file mode 100644 index 65f31c89..00000000 --- a/wise-webapp/src/main/webapp/html/css/demo_table.css +++ /dev/null @@ -1,538 +0,0 @@ -/* - * File: demo_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 { - position: relative; - min-height: 302px; - clear: both; - _height: 302px; - zoom: 1; /* Feeling sorry for IE */ -} - -.dataTables_processing { - position: absolute; - top: 50%; - left: 50%; - width: 250px; - height: 30px; - margin-left: -125px; - margin-top: -15px; - padding: 14px 0 2px 0; - border: 1px solid #ddd; - text-align: center; - color: #999; - font-size: 14px; - background-color: white; -} - -.dataTables_length { - width: 40%; - float: left; -} - -.dataTables_filter { - width: 50%; - float: right; - text-align: right; -} - -.dataTables_info { - width: 60%; - float: left; -} - -.dataTables_paginate { - width: 44px; - * width: 50px; - float: right; - text-align: right; -} - -/* Pagination nested */ -.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next { - height: 19px; - width: 19px; - margin-left: 3px; - float: left; -} - -.paginate_disabled_previous { - background-image: url('../images/back_disabled.jpg'); -} - -.paginate_enabled_previous { - background-image: url('../images/back_enabled.jpg'); -} - -.paginate_disabled_next { - background-image: url('../images/forward_disabled.jpg'); -} - -.paginate_enabled_next { - background-image: url('../images/forward_enabled.jpg'); -} - - - -/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - * DataTables display - */ -table.display { - margin: 0 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 ) - * border-spacing: 0; is one possible option. Conditional-css.com is - * useful for this kind of thing - * - * Further note IE 6/7 has problems when calculating widths with border width. - * It subtracts one px relative to the other browsers from the first column, and - * adds one to the end... - * - * If you want that effect I'd suggest setting a border-top/left on th/td's and - * then filling in the gaps with other borders. - */ -} - -table.display thead th { - padding: 3px 18px 3px 10px; - border-bottom: 1px solid black; - font-weight: bold; - cursor: pointer; - * cursor: hand; -} - -table.display tfoot th { - padding: 3px 18px 3px 10px; - border-top: 1px solid black; - font-weight: bold; -} - -table.display tr.heading2 td { - border-bottom: 1px solid #aaa; -} - -table.display td { - padding: 3px 10px; -} - -table.display td.center { - text-align: center; -} - - - -/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - * DataTables sorting - */ - -.sorting_asc { - background: url('../images/sort_asc.png') no-repeat center right; -} - -.sorting_desc { - background: url('../images/sort_desc.png') no-repeat center right; -} - -.sorting { - background: url('../images/sort_both.png') no-repeat center right; -} - -.sorting_asc_disabled { - background: url('../images/sort_asc_disabled.png') no-repeat center right; -} - -.sorting_desc_disabled { - background: url('../images/sort_desc_disabled.png') no-repeat center right; -} - - - - - -/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - * DataTables row classes - */ -table.display tr.odd.gradeA { - background-color: #ddffdd; -} - -table.display tr.even.gradeA { - background-color: #eeffee; -} - -table.display tr.odd.gradeC { - background-color: #ddddff; -} - -table.display tr.even.gradeC { - background-color: #eeeeff; -} - -table.display tr.odd.gradeX { - background-color: #ffdddd; -} - -table.display tr.even.gradeX { - background-color: #ffeeee; -} - -table.display tr.odd.gradeU { - background-color: #ddd; -} - -table.display tr.even.gradeU { - background-color: #eee; -} - - -tr.odd { - background-color: #E2E4FF; -} - -tr.even { - background-color: white; -} - - - - - -/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - * Misc - */ -.dataTables_scroll { - clear: both; -} - -.dataTables_scrollBody { - *margin-top: -1px; -} - -.top, .bottom { - padding: 15px; - background-color: #F5F5F5; - border: 1px solid #CCCCCC; -} - -.top .dataTables_info { - float: none; -} - -.clear { - clear: both; -} - -.dataTables_empty { - text-align: center; -} - -tfoot input { - margin: 0.5em 0; - width: 100%; - color: #444; -} - -tfoot input.search_init { - color: #999; -} - -td.group { - background-color: #d1cfd0; - border-bottom: 2px solid #A19B9E; - border-top: 2px solid #A19B9E; -} - -td.details { - background-color: #d1cfd0; - border: 2px solid #A19B9E; -} - - -.example_alt_pagination div.dataTables_info { - width: 40%; -} - -.paging_full_numbers { - width: 400px; - height: 22px; - line-height: 22px; -} - -.paging_full_numbers span.paginate_button, - .paging_full_numbers span.paginate_active { - border: 1px solid #aaa; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - padding: 2px 5px; - margin: 0 3px; - cursor: pointer; - *cursor: hand; -} - -.paging_full_numbers span.paginate_button { - background-color: #ddd; -} - -.paging_full_numbers span.paginate_button:hover { - background-color: #ccc; -} - -.paging_full_numbers span.paginate_active { - background-color: #99B3FF; -} - -table.display tr.even.row_selected td { - background-color: #B0BED9; -} - -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; - overflow: auto; - border: 1px solid #8080FF; - background-color: #E5E5FF; -} diff --git a/wise-webapp/src/main/webapp/html/css/styles.less b/wise-webapp/src/main/webapp/html/css/styles.less index 5d00dbea..6f8cdff7 100644 --- a/wise-webapp/src/main/webapp/html/css/styles.less +++ b/wise-webapp/src/main/webapp/html/css/styles.less @@ -1,4 +1,3 @@ -/* ----------------------------- General -------------------------------- */ @html-background: #dedede repeat-x scroll; @body-background: transparent no-repeat center top; @@ -12,6 +11,8 @@ @base-border-size: 1px; @base-color: #111; +/* ----------------------------- General -------------------------------- */ + html { overflow-y: scroll; background: @html-background; @@ -53,7 +54,7 @@ body { border: @tags-border-size solid @base-color * 3; border-right: none; position: relative; - top: 42px; + top: 52px; h2 { font-size: @base-font-size * 1.5; @@ -72,9 +73,18 @@ body { /* ------------------------------ Table --------------------------------- */ -@table-width: 100% - (@tags-width + @tags-padding); +@table-gap: 2%; +@table-width: 100% - (@tags-width + (@tags-padding / @body-width * 100) + @table-gap); #map-table { width: @table-width; display: inline-block; +} + +/* ----------------------------- Toolbar -------------------------------- */ + +#toolbar { + width: 100%; + height: 20px; + border: @tags-border-size solid @base-color * 3; } \ No newline at end of file diff --git a/wise-webapp/src/main/webapp/html/css/table.less b/wise-webapp/src/main/webapp/html/css/table.less new file mode 100644 index 00000000..193157a4 --- /dev/null +++ b/wise-webapp/src/main/webapp/html/css/table.less @@ -0,0 +1,262 @@ + +@even-color: #FFFFFF; +@sorting-even-color: #EAEBFF; +@odd-color: #E2E4FF; +@sorting-odd-color: #D3D6FF; + +.dataTables_wrapper { + position: relative; + min-height: 302px; + clear: both; + zoom: 1; /* Feeling sorry for IE */ +} + +.dataTables_processing { + position: absolute; + top: 50%; + left: 50%; + width: 250px; + height: 30px; + margin-left: -125px; + margin-top: -15px; + padding: 14px 0 2px 0; + border: 1px solid #ddd; + text-align: center; + color: #999; + font-size: 14px; + background-color: white; +} + +.dataTables_length { + width: 40%; + float: left; + margin-bottom: 10px; +} + +.dataTables_filter { + width: 50%; + float: right; + text-align: right; + margin-bottom: 10px; +} + +.dataTables_info { + width: 60%; + float: left; +} + +.dataTables_paginate { + width: 44px; + float: right; + text-align: right; +} + +/* Pagination nested */ +.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next { + height: 19px; + width: 19px; + margin-left: 3px; + float: left; +} + +.paginate_disabled_previous { + background-image: url('../images/back_disabled.jpg'); +} + +.paginate_enabled_previous { + background-image: url('../images/back_enabled.jpg'); +} + +.paginate_disabled_next { + background-image: url('../images/forward_disabled.jpg'); +} + +.paginate_enabled_next { + background-image: url('../images/forward_enabled.jpg'); +} + + +/* ---------------------------- Dislpay --------------------------------- */ + +table.display { + margin: 0 auto; + clear: both; + width: 100%; + thead th { + padding: 3px 18px 3px 10px; + border-bottom: 1px solid black; + font-weight: bold; + cursor: pointer; + } + + tfoot th { + padding: 3px 18px 3px 10px; + border-top: 1px solid black; + font-weight: bold; + } + + tr.heading2 td { + border-bottom: 1px solid #aaa; + } + + td { + padding: 10px 10px; + } + + td.center { + text-align: center; + } +} + + +/* ---------------------------- Sorting --------------------------------- */ + +.sorting_asc { + background: url('../images/sort_asc.png') no-repeat center right; +} + +.sorting_desc { + background: url('../images/sort_desc.png') no-repeat center right; +} + +.sorting { + background: url('../images/sort_both.png') no-repeat center right; +} + +.sorting_asc_disabled { + background: url('../images/sort_asc_disabled.png') no-repeat center right; +} + +.sorting_desc_disabled { + background: url('../images/sort_desc_disabled.png') no-repeat center right; +} + + +/* ----------------------------- Rows ----------------------------------- */ + +tr.odd { + background-color: @odd-color; +} + +tr.even { + background-color: @even-color; +} + + +/* ----------------------------- Misc ----------------------------------- */ + +.dataTables_scroll { + clear: both; +} + +.dataTables_scrollBody { + margin-top: -1px; +} + +.top, .bottom { +} + +.top .dataTables_info { + float: none; +} + +.clear { + clear: both; +} + +.dataTables_empty { + text-align: center; +} + +tfoot input { + margin: 0.5em 0; + width: 100%; + color: #444; +} + +tfoot input.search_init { + color: #999; +} + +td.group { + background-color: #d1cfd0; + border-bottom: 2px solid #A19B9E; + border-top: 2px solid #A19B9E; +} + +td.details { + background-color: #d1cfd0; + border: 2px solid #A19B9E; +} + + +.example_alt_pagination div.dataTables_info { + width: 40%; +} + +.paging_full_numbers { + width: 400px; + height: 22px; + line-height: 22px; +} + +.paging_full_numbers span.paginate_button, + .paging_full_numbers span.paginate_active { + border: 1px solid #aaa; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + padding: 2px 5px; + margin: 0 3px; + cursor: pointer; +} + +.paging_full_numbers span.paginate_button { + background-color: #ddd; +} + +.paging_full_numbers span.paginate_button:hover { + background-color: #ccc; +} + +.paging_full_numbers span.paginate_active { + background-color: #99B3FF; +} + +table.display tr.even.row_selected td { + background-color: #B0BED9; +} + +table.display tr.odd.row_selected td { + background-color: #9FAFD1; +} + + +/* ------------------------ Sorting classes ----------------------------- */ + +tr.odd { + td.sorting_1 { + background-color: @sorting-odd-color; + } + + td.sorting_2 { + background-color: #DADCFF; + } + + td.sorting_3 { + background-color: #E0E2FF; + } +} + +tr.even { + td.sorting_1 { + background-color: @sorting-even-color; + } + + td.sorting_2 { + background-color: #F2F3FF; + } + + td.sorting_3 { + background-color: #F9F9FF; + } +} \ No newline at end of file diff --git a/wise-webapp/src/main/webapp/html/workspace.html b/wise-webapp/src/main/webapp/html/workspace.html index 0017787a..3d36045b 100644 --- a/wise-webapp/src/main/webapp/html/workspace.html +++ b/wise-webapp/src/main/webapp/html/workspace.html @@ -4,10 +4,10 @@ WiseMApping Workspace - + @@ -43,9 +43,13 @@ { "sTitle": "Utillisateurs" }, { "sTitle": "Derniere modification" }, { "sTitle": "Details", "sClass": "center" } - ] - } ); - } ); + ], + "bAutoWidth" : false, + "bLengthChange": false, + "bInfo": false + + }); + }); @@ -77,14 +81,18 @@
-
-

Mes dossiers:

-
-
- + + +
+
+

Mes dossiers:

+
+
+ +
+
-
\ No newline at end of file