New header, controls for category visibility

assets/css/main.css

@@ -18,19 +18,34 @@ html, body {
     height: 100%;
 }
 
+a {
+    cursor: pointer;
+}
+
 #push {
     position: relative;
     min-height: 100%;
 }
 
-/* Header, footer */
+/* Header */
-#header, #footer {
+#header, #tagline {
+    width: 1540px;
+    margin: 0 auto;
+}
+
+#header {
     background: #EBEBEB;
     color: #3B3738;
     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 {
@@ -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;
+    width: 1540px;
-    border-top-left-radius: 2px;
     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;
 }

assets/html/index.html

@@ -20,13 +20,32 @@
 
 			<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>
 

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');
 	}
 }

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++) {
+        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) {
     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 = [];

assets/js/util.js

@@ -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-all" class="container server-container"></div>');
 	}
 }