Skip to content
GitLab
Commit 447298dd authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

Removed tablesorter.less. Added bs-tablesorter.less. 

tablesorter.html: does now feature grouping.
parent d23f9810
Hide whitespace changes
Inline Side-by-side
Gruntfile.js
View file @ 447298dd
......@@ -115,17 +115,6 @@ module.exports = function (grunt) {
expand: true,
dest: typo3_js,
flatten: true
},
{
cwd: 'bower_components/tablesorter/dist/css/',
src: [
'theme.default.min.css'
],
dest: typo3_css,
filter: 'isFile',
expand: true,
flatten: true
}
]
},
......@@ -134,21 +123,13 @@ module.exports = function (grunt) {
{
cwd: 'bower_components/tablesorter/dist/js/',
src: [
'jquery.tablesorter.min.js'
'jquery.tablesorter.min.js',
'jquery.tablesorter.widgets.min.js',
'widgets/widget-grouping.min.js'
],
expand: true,
dest: 'js/',
flatten: true
},
{
cwd: 'bower_components/tablesorter/dist/css/',
src: [
'theme.default.min.css'
],
dest: 'css/',
filter: 'isFile',
expand: true,
flatten: true
}
]
},
......@@ -279,7 +260,8 @@ module.exports = function (grunt) {
production: {
files: {
"extension/Resources/Public/Css/qfq-bs.css": "less/qfq-bs.css.less",
"extension/Resources/Public/Css/qfq-plain.css": "less/qfq-plain.css.less"
"extension/Resources/Public/Css/qfq-plain.css": "less/qfq-plain.css.less",
"extension/Resources/Public/Css/bs-tablesorter.css": "less/bs-tablesorter.less"
},
options: {
compress: true
......@@ -289,7 +271,7 @@ module.exports = function (grunt) {
files: {
"css/qfq-bs.css": "less/qfq-bs.css.less",
"css/qfq-plain.css": "less/qfq-plain.css.less",
"css/tablesorter.css": "less/tablesorter.less"
"css/bs-tablesorter.css": "less/bs-tablesorter.less"
},
options: {
banner: "/* Change qfq-bs.css.less, not qfq-bs.css */"
......
less/tablesorter.less → less/bs-tablesorter.less
View file @ 447298dd
......@@ -12,19 +12,19 @@ Test out these custom less files live
*/
/*** theme ***/
@theme : tablesorter-default;
@theme : tablesorter-bootstrap;
/*** fonts ***/
@tableHeaderFont : 11px 'trebuchet ms', verdana, arial;
@tableBodyFont : 11px 'trebuchet ms', verdana, arial;
@tableHeaderFont : inherit;
@tableBodyFont : inherit;
/*** color definitions ***/
/* for best results, only change the hue (120),
leave the saturation (60%) and luminosity (75%) alone
pick the color from here: http://hslpicker.com/#99E699 */
@headerBackground : hsl(120, 60%, 75%);
@headerBackground : white;
@borderAndBackground : #cdcdcd;
@overallBorder : @borderAndBackground 1px solid;
@overallBorder : inherit;
@headerTextColor : #000;
@bodyBackground : #fff;
......@@ -48,9 +48,9 @@ Test out these custom less files live
@filterRowHiddenHeight : 4px;
/* becomes height using padding (so it's divided by 2) */
@overallPadding : 4px;
@overallPadding : inherit;
/* 20px should be slightly wider than the icon width to avoid overlap */
@headerPadding : 4px 20px 4px 4px;
@headerPadding : inherit;
/* url(icons/loading.gif); */
@processingIcon : url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
......@@ -154,14 +154,13 @@ Test out these custom less files live
.unsorted(@headerBackground);
background-repeat: no-repeat;
background-position: @arrowPosition;
padding: @headerPadding;
cursor: pointer;
}
.tablesorter-header.sorter-false {
background-image: none;
cursor: default;
padding: @overallPadding;
}
.tablesorter-headerAsc {
......@@ -181,4 +180,167 @@ Test out these custom less files live
background-image: none;
}
/* optional disabled input styling */
.disabled {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: not-allowed;
}
/* body */
tbody {
td {
.allRows;
}
/* Zebra Widget - row alternating colors */
tr.odd > td {
.oddRows;
}
tr.even > td {
.evenRows;
}
tr.group-hidden {
display: none;
}
tr.group-header {
td {
i {
display: inline-block;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid #888;
border-right: 4px solid #888;
border-left: 4px solid transparent;
margin-right: 7px;
user-select: none;
-moz-user-select: none;
}
}
}
tr.group-header.collapsed {
td {
i {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #888;
border-right: 0;
margin-right: 10px;
}
}
}
}
/* hovered row colors
you'll need to add additional lines for
rows with more than 2 child rows
*/
tbody > tr.hover td,
tbody > tr:hover td,
tbody > tr:hover + tr.tablesorter-childRow > td,
tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
tbody > tr.even.hover > td,
tbody > tr.even:hover > td,
tbody > tr.even:hover + tr.tablesorter-childRow > td,
tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
.evenHovered;
}
tbody > tr.odd.hover > td,
tbody > tr.odd:hover > td,
tbody > tr.odd:hover + tr.tablesorter-childRow > td,
tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
.oddHovered;
}
/* table processing indicator - indeterminate spinner */
.tablesorter-processing {
background-image: @processingIcon;
background-position: center center;
background-repeat: no-repeat;
}
/* Column Widget - column sort colors */
tr.odd td.primary {
background-color: @primaryOdd;
}
td.primary, tr.even td.primary {
background-color: @primaryEven;
}
tr.odd td.secondary {
background-color: @secondaryOdd;
}
td.secondary, tr.even td.secondary {
background-color: @secondaryEven;
}
tr.odd td.tertiary {
background-color: @tertiaryOdd;
}
td.tertiary, tr.even td.tertiary {
background-color: @tertiaryEven;
}
/* caption (non-theme matching) */
caption {
background-color: @captionBackground;
}
/* filter widget */
.tablesorter-filter-row input,
.tablesorter-filter-row select {
width: 98%;
height: auto;
margin: 0;
padding: @overallPadding;
color: @filterElementTextColor;
background-color: @filterElementBkgd;
border: @filterElementBorder;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.filterWidgetTransition;
}
.tablesorter-filter-row {
background-color: @filterCellBackground;
}
.tablesorter-filter-row td {
text-align: center;
background-color: @filterCellBackground;
line-height: normal;
text-align: center; /* center the input */
.filterWidgetTransition;
}
/* hidden filter row */
.tablesorter-filter-row.hideme td {
padding: @filterRowHiddenHeight / 2;
margin: 0;
line-height: 0;
cursor: pointer;
}
.tablesorter-filter-row.hideme * {
height: 1px;
min-height: 0;
border: 0;
padding: 0;
margin: 0;
/* don't use visibility: hidden because it disables tabbing */
opacity: 0;
filter: alpha(opacity=0);
}
/* rows hidden by filtering (needed for child rows) */
.filtered {
display: none;
}
/* ajax error row */
.tablesorter-errorRow td {
text-align: center;
cursor: pointer;
background-color: @errorBackground;
}
}
mockup/tablesorter.html
View file @ 447298dd
......@@ -6,7 +6,7 @@
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
<link rel="stylesheet" href="../css/jqx.darkblue.css">
<link rel="stylesheet" href="../css/tablesorter.css">
<link rel="stylesheet" href="../css/bs-tablesorter.css">
<title>Tablesorter</title>
</head>
......@@ -15,12 +15,12 @@
<table id="thetable" class="table">
<thead>
<tr>
<th>Head A</th>
<th>Head B</th>
<th>Head C</th>
<th>Head D</th>
<th>Head E</th>
<th>Head F</th>
<th class="group-number-10">Head A</th>
<th class="group-false">Head B</th>
<th class="group-false">Head C</th>
<th class="group-false">Head D</th>
<th class="group-false">Head E</th>
<th class="group-false">Head F</th>
</tr>
</thead>
<tbody>
......@@ -144,35 +144,23 @@
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.tablesorter.min.js"></script>
<script src="../js/jquery.tablesorter.widgets.min.js"></script>
<script src="../js/widget-grouping.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script>
$(function() {
$("#thetable").tablesorter({
dateFormat : 'ddmmyyyy'
theme: 'bootstrap',
dateFormat: 'ddmmyyyy',
widgets: ['group']
});
});
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment