Long fencer names on mobile force 1 column display

[epeeme]

Long or multiple fencer names force the display on mobile devices to show only the Firstname column.

https://epee.me/event.php?e=173&d=2007

Look at wrap option, concat names or other alternatives.

[epeeme]

var firstName = 'Chamara Nuwan Priyadarshana';
var lastName = 'Warnasuriya Mudiyanselage';

// ------------------------------------------------

if (firstName.length + lastName.length > 30) {
    var f2 = firstName.split(' ');
    if (f2.length > 1) {
        firstName = f2.shift() + ' <span class="d-none d-lg-block">' + f2.join(' ') + '</span>';
    }
    var l2 = lastName.split(' ');
    if (l2.length > 1) {
        var lastNameTemp = l2.pop();
        lastName = '<span class="d-none d-lg-block">' + l2.join(' ') + '</span>' + lastNameTemp;
    }
}

[epeeme]

A new datatables render function created to hide multiple names when required.

    $.fn.dataTable.render.fencerName = function () {
        return function ( data, type, row ) {
            if (row.fencerFirstname.length + row.fencerSurname.length > 22) {
                var f2 = data.split(' ');
                if (f2.length > 1) {
                    if (row.fencerFirstname === data) {
                        data = f2.shift() + ' <span class="d-none d-lg-inline">' + f2.join(' ') + '</span>';
                    } else {
                        var lastNameTemp = f2.pop();
                        data = '<span class="d-none d-lg-inline">' + f2.join(' ') + '</span> ' + lastNameTemp;
                    }                    
                } 
            }
            return '<a href="fencer.php?f=' + row.fencerID+ '">' + data + '</a>';
        }
    };

Applied to results and events pages. May also be needed elsewhere, so might to look at create an include file for this and any other subsequent custom renderers.