Fascinated/Minetrack
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Improved Mojang status indicators and better footer

Browse Source
This commit is contained in:
Cryptkeeper 2017-05-13 11:07:50 -05:00
parent 0955e8dbcd
commit bfcc896e28
4 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
assets/css/main.css
View File

@ -27,6 +27,10 @@ a {
min-height: 100%; min-height: 100%;
} }
strong {
font-weight: 700;
}
/* Constants */ /* Constants */
#header, #footer, #tagline { #header, #footer, #tagline {
@ -47,7 +51,6 @@ a {
#header .column { #header .column {
display: inline-block; display: inline-block;
float: left; float: left;
padding: 20px;
} }
#header .column h1 { #header .column h1 {
@ -85,7 +88,7 @@ a {
/* Footer */ /* Footer */
#footer { #footer {
font-size: 14px; font-size: 16px;
text-transform: uppercase; text-transform: uppercase;
background: #EBEBEB; background: #EBEBEB;
color: #3B3738; color: #3B3738;
@ -94,6 +97,15 @@ a {
margin-top: 15px; margin-top: 15px;
} }
#footer a {
font-weight: 700;
border-bottom: none !important;
}
#footer a:hover {
border-bottom: 1px dashed #000 !important;
}
/* Tagline */ /* Tagline */
#tagline-text { #tagline-text {
padding-top: 20px; padding-top: 20px;
@ -260,16 +272,19 @@ h3 {
/* Mojang Status */ /* Mojang Status */
.mojang-status { .mojang-status {
width: 60px; width: 85px;
height: 60px; height: 106px;
display: inline-block; display: inline-block;
border-radius: 2px;
text-align: center; text-align: center;
line-height: 20px; line-height: 20px;
font-size: 12px; font-size: 14px;
}
.mojang-status > strong {
text-transform: uppercase;
} }
.mojang-status > i { .mojang-status > i {
margin-top: 8px; margin-top: 20px;
font-size: 22px; font-size: 22px;
} }

9
assets/html/index.html
View File

@ -23,7 +23,7 @@
<div id="header-wrapper"> <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;"> <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> <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 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="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 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> </div>
@ -81,7 +78,7 @@
<div id="footer"> <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> </div>

3
assets/js/site.js
View File

@ -292,6 +292,7 @@ $(document).ready(function() {
$('#perc-bar').html(''); $('#perc-bar').html('');
$('.mojang-status').css('background', 'transparent'); $('.mojang-status').css('background', 'transparent');
$('.mojang-status-text').text('');
$("#stat_totalPlayers").text(0); $("#stat_totalPlayers").text(0);
$("#stat_networks").text(0); $("#stat_networks").text(0);
@ -525,7 +526,7 @@ $(document).ready(function() {
var totalPlayers = getCurrentTotalPlayers(); var totalPlayers = getCurrentTotalPlayers();
var playerCount = lastPlayerEntries[currentServerHover]; 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.)');
} }
}); });

4
assets/js/util.js
View File

@ -118,8 +118,8 @@ function updateMojangServices(currentUpdate) {
var key = keys[i]; var key = keys[i];
var status = lastMojangServiceUpdate[key]; var status = lastMojangServiceUpdate[key];
var div = $('#mojang-status_' + status.name); $('#mojang-status_' + status.name).css({background: colorsByStatus[status.title]});
div.css({background: colorsByStatus[status.title]}); $('#mojang-status-text_' + status.name).text(status.title);
} }
} }