New header, controls for category visibility
This commit is contained in:
parent
2fa3f08ae8
commit
6204a536c4
@ -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;">♥</span> by <a href="http://cryptkpr.me">Cryptkeeper</a> · 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;">♥</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>');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user