Improve table column sizing, template, CSS

README.md

@@ -12,18 +12,15 @@ First install node.js, e.g.:
 	# apt-get install nodejs
 	# # OR:
 	# pacman -S nodejs
-	# # OR:
-	# emerge nodejs
 
 Then install doT.js and its dependencies:
 
-	$ cd ~
 	$ npm install dot commander mkdirp
 
 And finally compile the template:
 
 	$ cd static
-	$ ~/node_modules/dot/bin/dot-packer -s .
+	$ ../node_modules/dot/bin/dot-packer -s .
 
 You can now serve the webpage by copying the files in static/ to your web root, or by [starting the server list](#setting-up-the-server).
 

static/index.html

@@ -13,6 +13,11 @@
 		a:visited {
 			color: #336BA1;
 		}
+		@media only screen and (max-width: 1024px) {
+			#server_list table .version, #server_list table .flags, #server_list table .uptime {
+				display: none;
+			}
+		}
 	</style>
 	<script>
 		var master = {show_proto_select: true};

static/list.js

@@ -47,14 +47,9 @@ function addressString(server) {
 	return str + '>' + shortStr + '</span>';
 }
 
-function tooltipString(str, maxLen) {
+function tooltipString(str) {
 	str = escapeHTML(str);
-	var ret = str;
-	if (ret.length > maxLen) {
-		ret = '<div class="mts_tooltip" style="width:' + maxLen + 'ch;"';
-		ret += ' title="' + str + '">' + str + '</div>';
-	}
-	return ret;
+	return '<span title="' + str + '">' + str + '</div>';
 }
 
 function hoverList(name, list) {

static/servers.jst

@@ -16,11 +16,11 @@
 	<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[, Mapgen]</th>{{?}}
+		{{? !master.no_version}}<th class="version">Version, Subgame[, Mapgen]</th>{{?}}
 		{{? !master.no_name}}<th>Name</th>{{?}}
 		{{? !master.no_description}}<th>Description</th>{{?}}
-		{{? !master.no_flags}}<th>Flags</th>{{?}}
-		{{? !master.no_uptime}}<th>Uptime, Age</th>{{?}}
+		{{? !master.no_flags}}<th class="flags">Flags</th>{{?}}
+		{{? !master.no_uptime}}<th class="uptime">Uptime, Age</th>{{?}}
 		{{? !master.no_ping}}<th>Ping, Lag</th>{{?}}
 	</tr></thead>
 	<tbody>
@@ -49,14 +49,14 @@
 		{{? !master.no_name}}
 		<td class="name">
 			{{? server.url}}
-				<a href="{{!server.url}}">{{=tooltipString(server.name, 25)}}</a>
+				<a href="{{!server.url}}">{{=tooltipString(server.name)}}</a>
 			{{??}}
-				{{=tooltipString(server.name, 25)}}
+				{{=tooltipString(server.name)}}
 			{{?}}
 		</td>{{?}}
 		{{? !master.no_description}}
 		<td class="description">
-			{{=tooltipString(server.description, 50)}}
+			{{=tooltipString(server.description)}}
 		</td>{{?}}
 		{{? !master.no_flags}}
 		<td class="flags {{? server.privs}} mts_hover_list_text{{?}}">
@@ -81,5 +81,5 @@
 	</tbody>
 </table>
 {{? master.min_clients || master.limit}}
-	<a class="clickable" onclick="delete master.min_clients; delete master.limit; get();">Show more...</a>
+	<a href="javascript:delete master.min_clients; delete master.limit; get();">Show more...</a>
 {{?}}

static/style.css

@@ -14,6 +14,7 @@
 #server_list td, #server_list th {
 	border: 1px solid #2A3132;
 	padding: 5px;
+	color: inherit;
 }
 
 #server_list thead {
@@ -31,11 +32,32 @@
 	text-align: center;
 }
 
+#server_list td.version, #server_list td.name, #server_list td.description {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+/* Note: the column widths here are not exact as auto-layout is left enabled */
+
+#server_list td.address {
+	max-width: 24ch;
+}
+#server_list td.version {
+	max-width: 16ch;
+}
+#server_list td.name {
+	max-width: 32ch;
+}
+#server_list td.description {
+	max-width: 64ch;
+}
+
 .mts_hover_list {
 	display: none;
 	border: 1px solid #336B87;
 	border-radius: 10px;
-	background-color: #FAFAFA;
+	background-color: #FFF;
 	position: absolute;
 	z-index: 100;
 	padding: 0.5em;
@@ -43,27 +65,13 @@
 }
 
 .mts_hover_list b {
-	display: inline-block;
 	font-size: 1.1em;
-	padding-bottom: 2px;
 }
 
 td:hover .mts_hover_list {
 	display: block;
 }
 
-.clickable {
-	text-decoration: underline;
-	cursor: pointer;
-}
-
-.mts_tooltip {
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
-}
-
 .mts_cwidth {
 	display: inline-block;
-	text-align: center;
 }