HawkEye

HawkEye

192k Downloads

Web interface UI Enhancements

marcelo-mason opened this issue ยท 3 comments

commented

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 }
    ] } );
commented

Thanks! Yeah i'm not sure when the text went giant.. it used to be small o.O

commented

What do iDisplayLength and sDom do?

commented

Implemented