From 6204a536c4002889b06fad0fee0746d0a7d80a0b Mon Sep 17 00:00:00 2001 From: Cryptkeeper Date: Tue, 23 Feb 2016 18:47:27 -0600 Subject: [PATCH] New header, controls for category visibility --- assets/css/main.css | 68 ++++++++++++++++++++++++++------------- assets/html/index.html | 29 ++++++++++++++--- assets/js/graph.js | 6 ++-- assets/js/site.js | 72 ++++++++++++++++++++++++++++++++++-------- assets/js/util.js | 2 ++ 5 files changed, 133 insertions(+), 44 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index eabaf34..23a5316 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -18,19 +18,34 @@ html, body { height: 100%; } +a { + cursor: pointer; +} + #push { position: relative; min-height: 100%; } -/* Header, footer */ -#header, #footer { +/* Header */ +#header, #tagline { + width: 1540px; + margin: 0 auto; +} + +#header { background: #EBEBEB; color: #3B3738; padding: 20px 0; - text-align: center; - width: 1540px; - margin: 0 auto; + overflow: auto; +} + +#header .slogan { + font-size: 20px; +} + +#header .subslogan { + font-size: 19px; } #header a { @@ -43,34 +58,46 @@ html, body { border-bottom: 1px dashed transparent; } -#header > .slogan { - letter-spacing: 2px; - font-size: 20px; -} - -#header > .info { - font-size: 17px; -} - #header > h1 { font-size: 42px; } +#header > #column-center { + width: 1480px; + margin: 0 auto; +} + +#header > #column-center > .column { + width: 740px; + display: inline-block; + float: left; +} + +/* Category controls */ +#category-controller { + display: none; +} + +/* Footer */ #footer { - border-top-right-radius: 2px; - border-top-left-radius: 2px; + width: 1540px; font-size: 16px; text-transform: uppercase; + background: #EBEBEB; + color: #3B3738; + padding: 15px 0; + margin: 0 auto; + text-align: center; + border-top-right-radius: 2px; + border-top-left-radius: 2px; } /* Tagline */ #tagline { padding: 10px 0; text-align: center; - width: 1540px; - margin: 0 auto; - border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; } /* Colors used by the Mojang service's status bar */ @@ -132,7 +159,6 @@ html, body { .category-header { text-align: center; - display: block; margin-bottom: 15px; } @@ -203,7 +229,6 @@ h3 { #big-graph-controls a:hover { border-bottom: 1px dashed transparent; - cursor: pointer; } /* Basic elements */ @@ -220,5 +245,4 @@ h3 { .button:hover { background: #ecf0f1; color: #3498db; - cursor: pointer; } \ No newline at end of file diff --git a/assets/html/index.html b/assets/html/index.html index 6cca90b..204ebb1 100644 --- a/assets/html/index.html +++ b/assets/html/index.html @@ -20,13 +20,32 @@ diff --git a/assets/js/graph.js b/assets/js/graph.js index b82be21..9de0c59 100644 --- a/assets/js/graph.js +++ b/assets/js/graph.js @@ -71,7 +71,7 @@ function toggleControlsDrawer() { } function saveGraphControls(displayedServers) { - if (typeof(localStorage) !== undefined) { + if (typeof(localStorage)) { var json = JSON.stringify(displayedServers); localStorage.setItem('displayedServers', json); @@ -79,7 +79,7 @@ function saveGraphControls(displayedServers) { } function loadGraphControls() { - if (typeof(localStorage) !== undefined) { + if (typeof(localStorage)) { var item = localStorage.getItem('displayedServers'); if (item) { @@ -89,7 +89,7 @@ function loadGraphControls() { } function resetGraphControls() { - if (typeof(localStorage) !== undefined) { + if (typeof(localStorage)) { localStorage.removeItem('displayedServers'); } } diff --git a/assets/js/site.js b/assets/js/site.js index 15c55ef..61d402a 100644 --- a/assets/js/site.js +++ b/assets/js/site.js @@ -10,6 +10,8 @@ var isConnected = false; var mojangServicesUpdater; var sortServersTask; +var categoriesVisible = true; + function updateServerStatus(lastEntry) { var info = lastEntry.info; var div = $('#status_' + safeName(info.name)); @@ -59,33 +61,66 @@ function updateServerStatus(lastEntry) { } function sortServers() { - var byCategories = getServersByCategory(); + if (categoriesVisible) { + var byCategories = getServersByCategory(); - var categories = Object.keys(byCategories); + var categories = Object.keys(byCategories); - for (var i = 0; i < categories.length; i++) { - var relevantPlayers = []; + for (var i = 0; i < categories.length; i++) { + var relevantPlayers = []; - for (var x = 0; x < byCategories[categories[i]].length; x++) { - var server = byCategories[categories[i]][x]; + for (var x = 0; x < byCategories[categories[i]].length; x++) { + var server = byCategories[categories[i]][x]; - relevantPlayers[server.name] = lastPlayerEntries[server.name]; + relevantPlayers[server.name] = lastPlayerEntries[server.name]; + } + + var keys = Object.keys(relevantPlayers); + + keys.sort(function(a, b) { + return relevantPlayers[b] - relevantPlayers[a]; + }); + + for (var x = 0; x < keys.length; x++) { + $('#' + safeName(keys[x])).appendTo('#server-container-' + categories[i]); + + $('#ranking_' + safeName(keys[x])).text('#' + (x + 1)); + } + } + } else { + var serverNames = []; + + var keys = Object.keys(lastPlayerEntries); + + for (var i = 0; i < keys.length; i++) { + serverNames.push(keys[i]); } - var keys = Object.keys(relevantPlayers); - - keys.sort(function(a, b) { - return relevantPlayers[b] - relevantPlayers[a]; + serverNames.sort(function(a, b) { + return (lastPlayerEntries[b] || 0) - (lastPlayerEntries[a] || 0); }); - for (var x = 0; x < keys.length; x++) { - $('#' + safeName(keys[x])).appendTo('#server-container-' + categories[i]); + for (var i = 0; i < serverNames.length; i++) { + $('#' + safeName(serverNames[i])).appendTo('#server-container-all'); - $('#ranking_' + safeName(keys[x])).text('#' + (x + 1)); + $('#ranking_' + safeName(serverNames[i])).text('#' + (i + 1)); } } } +function setCategoriesVisible(newCategoriesVisible) { + categoriesVisible = newCategoriesVisible; + + $('.category-header').css('display', (categoriesVisible ? 'block' : 'none')); + $('.server-container').css('margin', (categoriesVisible ? '10px auto' : '0 auto')); + + sortServers(); + + if (typeof(localStorage)) { + localStorage.setItem('categoriesVisible', categoriesVisible); + } +} + function setAllGraphVisibility(visible) { if (visible) { var keys = Object.keys(hiddenGraphData); @@ -182,6 +217,11 @@ $(document).ready(function() { $('#big-graph-checkboxes').html(''); $('#big-graph-controls').css('display', 'none'); + $('#category-controller').css('display', 'none'); + + $("#stat_totalPlayers").text(0); + $("#stat_networks").text(0); + isConnected = false; }); @@ -267,6 +307,10 @@ $(document).ready(function() { socket.on('add', function(servers) { createCategories(); + if (Object.keys(publicConfig.categories).length > 0) { + $('#category-controller').css('display', 'block'); + } + for (var i = 0; i < servers.length; i++) { var history = servers[i]; var listing = []; diff --git a/assets/js/util.js b/assets/js/util.js index c220440..8261892 100644 --- a/assets/js/util.js +++ b/assets/js/util.js @@ -22,6 +22,8 @@ function createCategories() { $('#server-container-list').append('

' + title + '

'); } + + $('#server-container-list').append('
'); } }