improved formatting for block lists

app.js

@@ -16,6 +16,7 @@ var utils = require("./app/utils.js");
 var moment = require("moment");
 var Decimal = require('decimal.js');
 var bitcoin = require("bitcoin");
+var momentDurationFormat = require("moment-duration-format");
 
 
 var baseActionsRouter = require('./routes/baseActionsRouter');

package.json

@@ -17,6 +17,7 @@
     "jstransformer-markdown-it": "^2.0.0",
     "md5":"2.2.1",
     "moment": "^2.18.1",
+    "moment-duration-format": "1.3.0",
     "monk": "^4.0.0",
     "morgan": "~1.7.0",
     "mysql": "2.13.0",

public/css/styling.css

@@ -38,4 +38,13 @@ img.header-image {
 
 #subheader a {
 	margin-right: 20px;
+}
+
+.data-header {
+	text-align: right;
+}
+
+.data-cell {
+	text-align: right;
+	font-family: monospace;
 }

views/includes/blocks-list.pug

@@ -2,19 +2,21 @@ table(class="table table-striped")
 	thead
 		tr
 			th
-			th Height
-			th Timestamp (utc)
-			th Age
-			th Transactions
-			th Size (bytes)
+			th(class="data-header") Height
+			th(class="data-header") Timestamp (utc)
+			th(class="data-header") Age
+			th(class="data-header") Transactions
+			th(class="data-header") Size (bytes)
 	tbody
 		each block, blockIndex in blocks
 			if (block)
 				tr
-					th #{blockIndex + blockOffset + 1}
-					td
+					th #{(blockIndex + blockOffset + 1).toLocaleString()}
+					td(class="data-cell")
 						a(href=("/block-height/" + block.height)) #{block.height.toLocaleString()}
-					td #{moment.utc(new Date(parseInt(block.time) * 1000)).format("Y-MM-DD HH:mm:ss")}
-					td #{moment.utc(new Date(parseInt(block.time) * 1000)).fromNow(true)}
-					td #{block.tx.length.toLocaleString()}
-					td #{block.size.toLocaleString()}
+					td(class="data-cell") #{moment.utc(new Date(parseInt(block.time) * 1000)).format("Y-MM-DD HH:mm:ss")}
+
+					- var timeAgo = moment.duration(moment.utc(new Date()).diff(moment.utc(new Date(parseInt(block.time) * 1000))));
+					td(class="data-cell") #{timeAgo.format()}
+					td(class="data-cell") #{block.tx.length.toLocaleString()}
+					td(class="data-cell") #{block.size.toLocaleString()}