Web interface UI Enhancements
marcelo-mason opened this issue ยท 3 comments
The default big fonts look makes the table hard to read, and the default datatable fileter placements are a bit counter-intuitive. Here's a more streamlined look which fits tabular data:
Add to styles.css:
.restable td {
font-size: 11px;
}
.DataTables_sort_wrapper
{
font-size: 14px;
}
.dataTables_paginate {
font-size: 12px;
}
.dataTables_length {
font-size: 12px;
}
.dataTables_info {
font-size: 12px;
}
.dataTables_filter input
{
padding: 2px !important;
}
Add iDisplayLength and sDom to the datatable object in scripts.js:
$(".restable").dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaData": data.data,
"aaSorting": [[ 0, "asc" ]],
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"bAutoWidth": false,
"iDisplayLength": 25,
"sDom": '<"H"ipr>t<"F"lf>',
"aoColumns": [
{ "sTitle": data.columns.id },
{ "sTitle": data.columns.date, "sWidth": "160px" },
{ "sTitle": data.columns.player, "bSearchable": true },
{ "sTitle": data.columns.action, "bSearchable": true },
{ "sTitle": data.columns.world },
{ "sTitle": data.columns.xyz },
{ "sTitle": data.columns.data, "bSearchable": true }
] } );
Thanks! Yeah i'm not sure when the text went giant.. it used to be small o.O