visual improvements

public/css/style.css

@@ -10,12 +10,18 @@ body {
 	-moz-font-smoothing: antialiased;
 }
 
+td {
+	font-size: 14px;
+	-webkit-font-smoothing: subpixel-antialiased;
+	-moz-font-smoothing: subpixel-antialiased;
+}
+
 .propagationBox {
 	position: relative;
 	width: 8px;
 	height: 8px;
 	float: left;
-	top: 8px;
+	top: 7px;
 	margin-right: 5px;
 	-webkit-border-radius: 2px;
 	border-radius: 2px;
@@ -139,21 +145,26 @@ div.small-title-miner {
 	margin-left: -2px;
 }
 
-.blocks-holder div.small-title-miner {
+.blocks-holder {
-	font-size: 12px;
-	font-weight: normal;
-	letter-spacing: 0px;
-	text-transform: none;
-	white-space: nowrap;
 	-webkit-font-smoothing: subpixel-antialiased;
 	-moz-font-smoothing: subpixel-antialiased;
-	color: #777;
+}
+
+.blocks-holder div.small-title-miner {
+	font-family: "Lucida Console", "Courier New", Courier, monospace;
+	font-size: 11px;
+	letter-spacing: -0.1px;
+	text-transform: none;
+	white-space: nowrap;
+	color: #666;
 }
 
 .blocks-holder .block-count {
+	font-family: 'Lucida Console', monaco, "Courier New", Courier, monospace;
+	font-weight: bold;
+	font-size: 10px;
+	padding-top: 3px;
 	float: right;
-	line-height: 18px;
-	color: #aaa;
 }
 
 .blocks-holder .block {

public/js/filters.js

@@ -274,17 +274,19 @@ angular.module('netStatsApp.filters', [])
 	};
 })
 .filter('minerBlocksClass', function() {
-	return function(blocks) {
+	return function(blocks, prefix) {
+		if(typeof prefix === 'undefined')
+			prefix = 'bg-';
 		if(blocks <= 6)
-			return 'bg-success';
+			return prefix + 'success';
 
 		if(blocks <= 12)
-			return 'bg-info';
+			return prefix + 'info';
 
 		if(blocks <= 18)
-			return 'bg-warning';
+			return prefix + 'warning';
 
-		return 'bg-danger';
+		return prefix + 'danger';
 	};
 });
 

views/index.jade

@@ -86,7 +86,7 @@ block content
             div.big-info.chart.double-chart
               span.small-title last blocks miners
               div.blocks-holder(ng-repeat='miner in miners', data-toggle="tooltip", data-placement="right", title="{{miner.blocks}}")
-                div.block-count ({{miner.blocks}})
+                div.block-count(class="{{miner.blocks | minerBlocksClass : 'text-'}}") {{miner.blocks}}
                 div.small-title-miner {{miner.miner | minerNameFilter : miner.name}}
                 div.block(ng-repeat="i in getNumber(miner.blocks) track by $index", class="{{miner.blocks | minerBlocksClass}}")
                 div.clearfix
@@ -134,7 +134,7 @@ block content
               i.icon-bulb(data-toggle="tooltip", data-placement="top", title="Up-time", ng-click="orderTable(['-stats.active', '-stats.uptime'], false)")
         tbody
           tr(ng-repeat='node in nodes | orderBy:predicate:reverse', class="{{ node.stats | mainClass : bestBlock }}")
-            td(rel="{{node.id}}")
+            td.nodeInfo(rel="{{node.id}}")
               span.small(data-toggle="tooltip", data-placement="top", data-html="true", data-original-title="{{node | geoTooltip}}") {{node.info.name}}
               span.small #[ ]({{node.info.ip}}:{{node.info.port || 30303}})
             td