New header, controls for category visibility

This commit is contained in:
Cryptkeeper 2016-02-23 18:47:27 -06:00
parent 2fa3f08ae8
commit 6204a536c4
5 changed files with 133 additions and 44 deletions

@ -18,19 +18,34 @@ html, body {
height: 100%; height: 100%;
} }
a {
cursor: pointer;
}
#push { #push {
position: relative; position: relative;
min-height: 100%; min-height: 100%;
} }
/* Header, footer */ /* Header */
#header, #footer { #header, #tagline {
width: 1540px;
margin: 0 auto;
}
#header {
background: #EBEBEB; background: #EBEBEB;
color: #3B3738; color: #3B3738;
padding: 20px 0; padding: 20px 0;
text-align: center; overflow: auto;
width: 1540px; }
margin: 0 auto;
#header .slogan {
font-size: 20px;
}
#header .subslogan {
font-size: 19px;
} }
#header a { #header a {
@ -43,34 +58,46 @@ html, body {
border-bottom: 1px dashed transparent; border-bottom: 1px dashed transparent;
} }
#header > .slogan {
letter-spacing: 2px;
font-size: 20px;
}
#header > .info {
font-size: 17px;
}
#header > h1 { #header > h1 {
font-size: 42px; 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 { #footer {
border-top-right-radius: 2px; width: 1540px;
border-top-left-radius: 2px;
font-size: 16px; font-size: 16px;
text-transform: uppercase; 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 */
#tagline { #tagline {
padding: 10px 0; padding: 10px 0;
text-align: center; text-align: center;
width: 1540px;
margin: 0 auto;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
} }
/* Colors used by the Mojang service's status bar */ /* Colors used by the Mojang service's status bar */
@ -132,7 +159,6 @@ html, body {
.category-header { .category-header {
text-align: center; text-align: center;
display: block;
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -203,7 +229,6 @@ h3 {
#big-graph-controls a:hover { #big-graph-controls a:hover {
border-bottom: 1px dashed transparent; border-bottom: 1px dashed transparent;
cursor: pointer;
} }
/* Basic elements */ /* Basic elements */
@ -220,5 +245,4 @@ h3 {
.button:hover { .button:hover {
background: #ecf0f1; background: #ecf0f1;
color: #3498db; color: #3498db;
cursor: pointer;
} }

@ -20,13 +20,32 @@
<div id="header"> <div id="header">
<h1 class="text-uppercase">Minetrack</h1> <div id="column-center">
<p class="slogan text-uppercase">All your favorite Minecraft servers, right now.</p>
<p class="info text-uppercase">Made with <span style="color: #e74c3c;">&#9829;</span> by <a href="http://cryptkpr.me">Cryptkeeper</a> &middot; Open source'd on <a href="https://github.com/Cryptkeeper/Minetrack">Github</a></p>
<br /> <div class="column">
<p class="info text-uppercase">Watching <span id="stat_totalPlayers">0</span> players on <span id="stat_networks">0</span> networks.</p> <h1 class="text-uppercase">Minetrack</h1>
<p class="slogan text-uppercase">All your favorite Minecraft servers, right now.</p>
<p class="subslogan text-uppercase">Watching <span id="stat_totalPlayers">0</span> players on <span id="stat_networks">0</span> networks.</p>
</div>
<div class="column">
<p class="text-uppercase">Source code available on <a href="https://github.com/Cryptkeeper/Minetrack">Github</a></p>
<p class="text-uppercase">Made with <span style="color: #e74c3c;">&#9829;</span> by <a href="http://cryptkpr.me">Cryptkeeper</a></p>
<br />
<div id="category-controller">
<a class="text-uppercase" onclick="setCategoriesVisible(true);">Show Categories</a> // <a class="text-uppercase" onclick="setCategoriesVisible(false);">Hide Categories</a>
</div>
</div>
</div>
</div> </div>

@ -71,7 +71,7 @@ function toggleControlsDrawer() {
} }
function saveGraphControls(displayedServers) { function saveGraphControls(displayedServers) {
if (typeof(localStorage) !== undefined) { if (typeof(localStorage)) {
var json = JSON.stringify(displayedServers); var json = JSON.stringify(displayedServers);
localStorage.setItem('displayedServers', json); localStorage.setItem('displayedServers', json);
@ -79,7 +79,7 @@ function saveGraphControls(displayedServers) {
} }
function loadGraphControls() { function loadGraphControls() {
if (typeof(localStorage) !== undefined) { if (typeof(localStorage)) {
var item = localStorage.getItem('displayedServers'); var item = localStorage.getItem('displayedServers');
if (item) { if (item) {
@ -89,7 +89,7 @@ function loadGraphControls() {
} }
function resetGraphControls() { function resetGraphControls() {
if (typeof(localStorage) !== undefined) { if (typeof(localStorage)) {
localStorage.removeItem('displayedServers'); localStorage.removeItem('displayedServers');
} }
} }

@ -10,6 +10,8 @@ var isConnected = false;
var mojangServicesUpdater; var mojangServicesUpdater;
var sortServersTask; var sortServersTask;
var categoriesVisible = true;
function updateServerStatus(lastEntry) { function updateServerStatus(lastEntry) {
var info = lastEntry.info; var info = lastEntry.info;
var div = $('#status_' + safeName(info.name)); var div = $('#status_' + safeName(info.name));
@ -59,33 +61,66 @@ function updateServerStatus(lastEntry) {
} }
function sortServers() { 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++) { for (var i = 0; i < categories.length; i++) {
var relevantPlayers = []; var relevantPlayers = [];
for (var x = 0; x < byCategories[categories[i]].length; x++) { for (var x = 0; x < byCategories[categories[i]].length; x++) {
var server = byCategories[categories[i]][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); serverNames.sort(function(a, b) {
return (lastPlayerEntries[b] || 0) - (lastPlayerEntries[a] || 0);
keys.sort(function(a, b) {
return relevantPlayers[b] - relevantPlayers[a];
}); });
for (var x = 0; x < keys.length; x++) { for (var i = 0; i < serverNames.length; i++) {
$('#' + safeName(keys[x])).appendTo('#server-container-' + categories[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) { function setAllGraphVisibility(visible) {
if (visible) { if (visible) {
var keys = Object.keys(hiddenGraphData); var keys = Object.keys(hiddenGraphData);
@ -182,6 +217,11 @@ $(document).ready(function() {
$('#big-graph-checkboxes').html(''); $('#big-graph-checkboxes').html('');
$('#big-graph-controls').css('display', 'none'); $('#big-graph-controls').css('display', 'none');
$('#category-controller').css('display', 'none');
$("#stat_totalPlayers").text(0);
$("#stat_networks").text(0);
isConnected = false; isConnected = false;
}); });
@ -267,6 +307,10 @@ $(document).ready(function() {
socket.on('add', function(servers) { socket.on('add', function(servers) {
createCategories(); createCategories();
if (Object.keys(publicConfig.categories).length > 0) {
$('#category-controller').css('display', 'block');
}
for (var i = 0; i < servers.length; i++) { for (var i = 0; i < servers.length; i++) {
var history = servers[i]; var history = servers[i];
var listing = []; var listing = [];

@ -22,6 +22,8 @@ function createCategories() {
$('#server-container-list').append('<div id="server-container-' + keys[i] + '" class="container server-container"><h3 class="category-header">' + title + '</h3></div>'); $('#server-container-list').append('<div id="server-container-' + keys[i] + '" class="container server-container"><h3 class="category-header">' + title + '</h3></div>');
} }
$('#server-container-list').append('<div id="server-container-all" class="container server-container"></div>');
} }
} }