Design changes on the server list page
This commit is contained in:
sfan5
@@ -3,6 +3,9 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Minetest server list</title>
|
||||
<style type="text/css">
|
||||
body { font-family: "Droid Sans", "Segoe UI", sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="server_list"></div>
|
||||
|
||||
@@ -6,6 +6,8 @@ if (!master.list) master.list = "list";
|
||||
if (!master.list_root) master.list_root = master.root;
|
||||
if (!master.list_url) master.list_url = master.list_root + master.list;
|
||||
|
||||
// Utility functions used by the templating code
|
||||
|
||||
function humanTime(seconds) {
|
||||
if (typeof(seconds) != "number") return '?';
|
||||
var conv = {
|
||||
@@ -13,10 +15,10 @@ function humanTime(seconds) {
|
||||
d: 86400,
|
||||
h: 3600,
|
||||
m: 60
|
||||
}
|
||||
};
|
||||
for (var i in conv) {
|
||||
if (seconds >= conv[i]) {
|
||||
return (seconds / conv[i]).toFixed(1) + i;
|
||||
return (seconds / conv[i]).toFixed(i=='y'?1:0) + i;
|
||||
}
|
||||
}
|
||||
return seconds + 's';
|
||||
@@ -37,7 +39,7 @@ function addressString(server) {
|
||||
var str = '<span'
|
||||
if (shortStr.length > 25) {
|
||||
shortStr = shortStr.substr(0, 23) + "…";
|
||||
str += ' class="mts_tooltip" title="' + addrStr + '"'
|
||||
str += ' title="' + addrStr + '"'
|
||||
}
|
||||
if (server.port != 30000)
|
||||
shortStr += ':' + server.port;
|
||||
@@ -46,19 +48,18 @@ function addressString(server) {
|
||||
|
||||
function tooltipString(str, maxLen) {
|
||||
str = escapeHTML(str);
|
||||
var shortStr = str;
|
||||
var ret = '<span';
|
||||
if (shortStr.length > maxLen) {
|
||||
shortStr = shortStr.substr(0, maxLen - 2) + "…";
|
||||
ret += ' class="mts_tooltip" title="' + str + '"';
|
||||
var ret = str;
|
||||
if (ret.length > maxLen) {
|
||||
ret = '<div class="mts_tooltip" style="width:' + maxLen + 'ch;"';
|
||||
ret += ' title="' + str + '">' + str + '</div>';
|
||||
}
|
||||
return ret + '>' + shortStr + '</span>';
|
||||
return ret;
|
||||
}
|
||||
|
||||
function hoverList(name, list) {
|
||||
if (!list || list.length == 0) return '';
|
||||
var str = '<div class="mts_hover_list">'
|
||||
str += name + ' (' + list.length + ')<br />';
|
||||
str += '<b>' + name + '</b> (' + list.length + ')<br />';
|
||||
for (var i in list) {
|
||||
str += escapeHTML(list[i]) + '<br />';
|
||||
}
|
||||
@@ -67,12 +68,18 @@ function hoverList(name, list) {
|
||||
|
||||
function hoverString(name, string) {
|
||||
if (!string) return '';
|
||||
return '<div class="mts_hover_list">'
|
||||
+ name + ':<br />'
|
||||
return '<div class="mts_hover_list">'
|
||||
+ '<b>' + name + '</b>:<br />'
|
||||
+ escapeHTML(string) + '<br />'
|
||||
+ '</div>';
|
||||
}
|
||||
|
||||
function constantWidth(str, width) {
|
||||
return '<span class="mts_cwidth" style="width:' + width + 'em;">' + str + '</span>';
|
||||
}
|
||||
|
||||
// Code that fetches & displays the actual list
|
||||
|
||||
function draw(json) {
|
||||
var html = window.render.servers(json);
|
||||
jQuery(master.output).html(html);
|
||||
@@ -89,6 +96,7 @@ function loaded(){
|
||||
get();
|
||||
}
|
||||
|
||||
|
||||
// https://github.com/pyrsmk/toast
|
||||
this.toast=function(){var e=document,t=e.getElementsByTagName("head")[0],n=this.setTimeout,r="createElement",i="appendChild",s="addEventListener",o="onreadystatechange",u="styleSheet",a=10,f=0,l=function(){--f},c,h=function(e,r,i,s){if(!t)n(function(){h(e)},a);else if(e.length){c=-1;while(i=e[++c]){if((s=typeof i)=="function"){r=function(){return i(),!0};break}if(s=="string")p(i);else if(i.pop){p(i[0]),r=i[1];break}}d(r,Array.prototype.slice.call(e,c+1))}},p=function(n,s){++f,/\.css$/.test(n)?(s=e[r]("link"),s.rel=u,s.href=n,t[i](s),v(s)):(s=e[r]("script"),s.src=n,t[i](s),s[o]===null?s[o]=m:s.onload=l)},d=function(e,t){if(!f)if(!e||e()){h(t);return}n(function(){d(e,t)},a)},v=function(e){if(e.sheet||e[u]){l();return}n(function(){v(e)},a)},m=function(){/ded|co/.test(this.readyState)&&l()};h(arguments)};
|
||||
|
||||
@@ -96,6 +104,6 @@ toast(master.root + 'style.css', master.root + 'servers.js', function() {
|
||||
if (typeof(jQuery) != 'undefined')
|
||||
return loaded();
|
||||
else
|
||||
toast('//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', loaded);
|
||||
toast('//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', loaded);
|
||||
});
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<thead><tr>
|
||||
{{? !master.no_address}}<th>Address[:Port]</th>{{?}}
|
||||
{{? !master.no_clients}}<th>Players / Max{{? !master.no_avgtop}}<br/>Average / Top{{?}}</th>{{?}}
|
||||
{{? !master.no_version}}<th>Version, Subgame, Mapgenerator</th>{{?}}
|
||||
{{? !master.no_version}}<th>Version, Subgame[, Mapgen]</th>{{?}}
|
||||
{{? !master.no_name}}<th>Name</th>{{?}}
|
||||
{{? !master.no_description}}<th>Description</th>{{?}}
|
||||
{{? !master.no_flags}}<th>Flags</th>{{?}}
|
||||
@@ -26,13 +26,14 @@
|
||||
</td>{{?}}
|
||||
{{? !master.no_clients}}
|
||||
<td class="clients{{? server.clients_list && server.clients_list.length > 0}} mts_hover_list_text{{?}}">
|
||||
{{=server.clients}}/{{=server.clients_max}}{{? !master.no_avgtop}} {{=Math.floor(server.pop_v)}}/{{=server.clients_top}}{{?}}
|
||||
{{=constantWidth(server.clients + '/' + server.clients_max, 3.4)}}
|
||||
{{? !master.no_avgtop}} {{=constantWidth(Math.floor(server.pop_v) + '/' + server.clients_top, 3.4)}}{{?}}
|
||||
{{=hoverList("Clients", server.clients_list)}}
|
||||
</td>{{?}}
|
||||
{{? !master.no_version}}
|
||||
<td class="version{{? server.mods && server.mods.length > 0}} mts_hover_list_text{{?}}">
|
||||
{{=escapeHTML(server.version)}}, {{=escapeHTML(server.gameid)}},
|
||||
{{=escapeHTML(server.mapgen || '?')}}
|
||||
{{=escapeHTML(server.version)}}, {{=escapeHTML(server.gameid)}}
|
||||
{{? server.mapgen}}, {{=escapeHTML(server.mapgen)}}{{?}}
|
||||
{{=hoverList("Mods", server.mods)}}
|
||||
</td>{{?}}
|
||||
{{? !master.no_name}}
|
||||
@@ -51,9 +52,7 @@
|
||||
<td class="flags {{? server.privs}} mts_hover_list_text{{?}}">
|
||||
{{=hoverString("Privs", server.privs)}}
|
||||
{{=server.creative ? 'Cre ' : ''}}
|
||||
{{=server.dedicated ? 'Ded ' : ''}}
|
||||
{{=server.damage ? 'Dmg ' : ''}}
|
||||
{{=server.liquid_finite ? 'Liq ' : ''}}
|
||||
{{=server.pvp ? 'PvP ' : ''}}
|
||||
{{=server.password ? 'Pwd ' : ''}}
|
||||
{{=server.rollback ? 'Rol ' : ''}}
|
||||
@@ -61,11 +60,11 @@
|
||||
</td>{{?}}
|
||||
{{? !master.no_uptime}}
|
||||
<td class="uptime">
|
||||
{{=humanTime(server.uptime)}}, {{=humanTime(server.game_time)}}
|
||||
{{=constantWidth(humanTime(server.uptime), 3.2)}} / {{=constantWidth(humanTime(server.game_time), 3.2)}}
|
||||
</td>{{?}}
|
||||
{{? !master.no_ping}}
|
||||
<td class="ping">
|
||||
{{=Math.floor(server.ping * 1000)}}{{? server.lag}}, {{= Math.floor(server.lag * 1000)}}{{?}}
|
||||
{{=constantWidth(Math.floor(server.ping * 1000), 1.8)}}{{? server.lag}} / {{=constantWidth(Math.floor(server.lag * 1000), 1.8)}}{{?}}
|
||||
</td>{{?}}
|
||||
</tr>
|
||||
{{~}}
|
||||
|
||||
@@ -20,11 +20,7 @@
|
||||
}
|
||||
|
||||
#server_list tbody tr:nth-child(even) {
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
#server_list tbody tr:hover {
|
||||
background-color: #CCC;
|
||||
background-color: #F1F1F1;
|
||||
}
|
||||
|
||||
.mts_hover_list {
|
||||
@@ -41,13 +37,18 @@ td:hover .mts_hover_list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mts_hover_list_text, .mts_tooltip {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dashed;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mts_tooltip {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mts_cwidth {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user