From bfcc896e28bf7bbbaa2f342efc2e0552d1c7bebc Mon Sep 17 00:00:00 2001
From: Cryptkeeper <hello@cryptkpr.me>
Date: Sat, 13 May 2017 11:07:50 -0500
Subject: [PATCH] Improved Mojang status indicators and better footer

---
 assets/css/main.css    | 29 ++++++++++++++++++++++-------
 assets/html/index.html |  9 +++------
 assets/js/site.js      |  3 ++-
 assets/js/util.js      |  4 ++--
 4 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index dbba33c..653f5ab 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -27,6 +27,10 @@ a {
     min-height: 100%;
 }
 
+strong {
+    font-weight: 700;
+}
+
 /* Constants */
 #header, #footer, #tagline {
 
@@ -47,7 +51,6 @@ a {
 #header .column {
     display: inline-block;
     float: left;
-    padding: 20px;
 }
 
 #header .column h1 {
@@ -85,7 +88,7 @@ a {
 
 /* Footer */
 #footer {
-    font-size: 14px;
+    font-size: 16px;
     text-transform: uppercase;
     background: #EBEBEB;
     color: #3B3738;
@@ -94,6 +97,15 @@ a {
     margin-top: 15px;
 }
 
+#footer a {
+    font-weight: 700;
+    border-bottom: none !important;
+}
+
+#footer a:hover {
+    border-bottom: 1px dashed #000 !important;
+}
+
 /* Tagline */
 #tagline-text {
     padding-top: 20px;
@@ -260,16 +272,19 @@ h3 {
 
 /* Mojang Status */
 .mojang-status {
-    width: 60px;
-    height: 60px;
+    width: 85px;
+    height: 106px;
     display: inline-block;
-    border-radius: 2px;
     text-align: center;
     line-height: 20px;
-    font-size: 12px;
+    font-size: 14px;
+}
+
+.mojang-status > strong {
+    text-transform: uppercase;
 }
 
 .mojang-status > i {
-    margin-top: 8px;
+    margin-top: 20px;
     font-size: 22px;
 }
diff --git a/assets/html/index.html b/assets/html/index.html
index 2323412..615bed1 100644
--- a/assets/html/index.html
+++ b/assets/html/index.html
@@ -23,7 +23,7 @@
 
 				<div id="header-wrapper">
 
-					<div class="column">
+					<div class="column" style="padding: 20px;">
 
 						<img src="/images/compass.png" width="28" height="28" style="display: inline-block; margin-right: 5px;">
 						<h1 style="display: inline-block;" class="text-uppercase">Minetrack</h1>
@@ -33,10 +33,7 @@
 
 					<div id="mojang-status-list" class="column" style="float: right;">
 
-						<div class="mojang-status" title="Sessions" id="mojang-status_Sessions"><i class="fa fa-gamepad"></i><br />Sessions</div>
-						<div class="mojang-status" title="Skins" id="mojang-status_Skins"><i class="fa fa-user"></i><br />Skins</div>
-						<div class="mojang-status" title="Auth" id="mojang-status_Auth"><i class="fa fa-key"></i><br />Auth</div>
-						<div class="mojang-status" title="API" id="mojang-status_API"><i class="fa fa-wrench"></i><br />API</div>
+						<div class="mojang-status" title="Sessions" id="mojang-status_Sessions"><i class="fa fa-gamepad"></i><br /><strong>Sessions</strong><p class="mojang-status-text" id="mojang-status-text_Sessions"></p></div><div class="mojang-status" title="Skins" id="mojang-status_Skins"><i class="fa fa-user"></i><br /><strong>Skins</strong><p class="mojang-status-text" id="mojang-status-text_Skins"></p></div><div class="mojang-status" title="Auth" id="mojang-status_Auth"><i class="fa fa-key"></i><br /><strong>Auth</strong><p class="mojang-status-text" id="mojang-status-text_Auth"></p></div><div class="mojang-status" title="API" id="mojang-status_API"><i class="fa fa-wrench"></i><br /><strong>API</strong><p class="mojang-status-text" id="mojang-status-text_API"></p></div>
 
 					</div>
 
@@ -81,7 +78,7 @@
 
         <div id="footer">
 
-			<span style="padding-left: 20px;">Made with <span style="color: #e74c3c;">&#9829;</span> by <a href="http://cryptkpr.me">Cryptkeeper</a>. Read the source code on <a href="https://github.com/Cryptkeeper/Minetrack">Github</a>. Older records may not be reflected due to tracking behavior.</span>
+			<span style="padding-left: 20px;">Made with <span style="color: #e74c3c;">&#9829;</span> by <a href="http://cryptkpr.me">Cryptkeeper</a>. Source code available on <a href="https://github.com/Cryptkeeper/Minetrack"><i class="fa fa-github"></i> Github</a>. Older individual server records may not be reflected due to tracking behavior.</span>
 
 		</div>
 
diff --git a/assets/js/site.js b/assets/js/site.js
index a6036d9..ac5c918 100644
--- a/assets/js/site.js
+++ b/assets/js/site.js
@@ -292,6 +292,7 @@ $(document).ready(function() {
 
         $('#perc-bar').html('');
         $('.mojang-status').css('background', 'transparent');
+        $('.mojang-status-text').text('');
 
         $("#stat_totalPlayers").text(0);
         $("#stat_networks").text(0);
@@ -525,7 +526,7 @@ $(document).ready(function() {
             var totalPlayers = getCurrentTotalPlayers();
             var playerCount = lastPlayerEntries[currentServerHover];
 
-            renderTooltip(e.pageX + 10, e.pageY + 10, '<strong>' + currentServerHover + '</strong>: ' + roundToPoint(playerCount / totalPlayers * 100, 10) + '%<br />' + formatNumber(playerCount) + ' of ' + formatNumber(totalPlayers) + ' tracked players.');
+            renderTooltip(e.pageX + 10, e.pageY + 10, '<strong>' + currentServerHover + '</strong>: ' + roundToPoint(playerCount / totalPlayers * 100, 10) + '% of ' + formatNumber(totalPlayers) + ' tracked players.<br />(' + formatNumber(playerCount) + ' online.)');
         }
     });
 
diff --git a/assets/js/util.js b/assets/js/util.js
index d111a28..9a9c0fb 100644
--- a/assets/js/util.js
+++ b/assets/js/util.js
@@ -118,8 +118,8 @@ function updateMojangServices(currentUpdate) {
         var key = keys[i];
         var status = lastMojangServiceUpdate[key];
 
-        var div = $('#mojang-status_' + status.name);
-        div.css({background: colorsByStatus[status.title]});
+        $('#mojang-status_' + status.name).css({background: colorsByStatus[status.title]});
+        $('#mojang-status-text_' + status.name).text(status.title);
     }
 }