|
|
doctype htmlhtml(lang="en") head title= title link(rel='stylesheet', href='/lib/uikit/css/uikit.almost-flat.min.css') link(rel='stylesheet', href='/css/app.css') script(src='/lib/jquery.js') script(src='/lib/uikit/js/uikit.min.js')
// Favicon stuff link(rel='apple-touch-icon', sizes='57x57', href='/apple-touch-icon-57x57.png') link(rel='apple-touch-icon', sizes='114x114', href='/apple-touch-icon-114x114.png') link(rel='apple-touch-icon', sizes='72x72', href='/apple-touch-icon-72x72.png') link(rel='apple-touch-icon', sizes='144x144', href='/apple-touch-icon-144x144.png') link(rel='apple-touch-icon', sizes='60x60', href='/apple-touch-icon-60x60.png') link(rel='apple-touch-icon', sizes='120x120', href='/apple-touch-icon-120x120.png') link(rel='apple-touch-icon', sizes='76x76', href='/apple-touch-icon-76x76.png') link(rel='apple-touch-icon', sizes='152x152', href='/apple-touch-icon-152x152.png') link(rel='icon', type='image/png', href='/favicon-196x196.png', sizes='196x196') link(rel='icon', type='image/png', href='/favicon-160x160.png', sizes='160x160') link(rel='icon', type='image/png', href='/favicon-96x96.png', sizes='96x96') link(rel='icon', type='image/png', href='/favicon-16x16.png', sizes='16x16') link(rel='icon', type='image/png', href='/favicon-32x32.png', sizes='32x32') meta(name='msapplication-TileColor', content='#da532c') meta(name='msapplication-TileImage', content='/mstile-144x144.png') body div.uk-grid div.uk-width-1-1 div.uk-grid div.uk-width-1-4 img(src='/img/#{logo}') div.uk-width-2-4 // bigimagelogo h1.uk-text-center #{title}<br/>#{slogan} div.uk-width-1-4 img.flip(src='/img/#{logo}') div.uk-width-1-1 nav.uk-navbar ul.uk-navbar-nav.uk-navbar-center li: a(href='http://www.twitch.tv/#{title}'): img(src='/img/twitch.png', alt='Stream') li: a(href='/') Home li: a(href='/ladder') Ladder li: a(href='#') Chat Stats li: a(href='http://www.twitter.com/#{twitter}'): img(src='/img/twitter.gif', alt='Twitter') div.uk-width-1-1 div.uk-container.uk-container-center div.uk-grid br br div.uk-width-1-1 div.uk-panel.uk-panel-box div.uk-badge.uk-float-right form.uk-search input(class='uk-search-field', type='search', placeholder='Search...') button(class='uk-close', type='reset') table.uk-table.uk-table-hover.uk-table-striped caption Potato Farmer Ladder Rankings thead tr th Rank th Viewer th Potatoes tbody ul.uk-pagination
script. var perPage = 50, data = !{JSON.stringify(rows)};
$(document).ready(function(){
// Live search of the ladder listings $('.uk-search-field').keyup(function() { var query = $(this).val();
if(query.length > 2) { var temp = $('.uk-active').attr('page'); $('.uk-active').removeClass('uk-active').empty().append('<a>'+temp+'</a>'); $('table > tbody').empty();
data.forEach(function(element, index, array) { if(element.user.search(new RegExp(query, 'i')) != -1) { $('table > tbody').append($('<tr></tr>').append('<td>'+index+'</td><td>'+element.user+'</td><td>'+element.points+'</td>')); } }); } });
// Create pagination buttons for(var i = 1; i <= Math.ceil(data.length/perPage); i++) { var button = $('<li page='+i+'></li>').append('<a>'+i+'</a>'); button.on('click', function(){ //get page var z = $(this).attr('page'); // cleanup var temp = $('.uk-active').attr('page'); $('.uk-active').removeClass('uk-active').empty().append('<a>'+temp+'</a>'); $('table > tbody').empty();
$(this).addClass('uk-active').empty().append('<span>'+z+'</span>');
// slice(a, b): a = (n*(x-1))+1, b = n*x where n = perPage and x=curerntPage (skip +1 at end of a for splice) var a = (perPage*(z-1)), b = perPage*z; data.slice(a, b).forEach(function(element, index, array){ $('table > tbody').append($('<tr></tr>').append('<td>'+(a+index+1)+'</td><td>'+element.user+'</td><td>'+element.points+'</td>')); }); });
$('.uk-pagination').append(button); }
// When search input is cleared, go back to first page $('.uk-close').on('click', function(){ $('ul.uk-pagination > li').first().click(); });
// Show the first page when we load up $('ul.uk-pagination > li').first().click(); });
|
