More information and fixed layout issues.

www/main.js

@@ -86,6 +86,20 @@ function toggleElemSelected(elem) {
     }
 }
 
+function formatDate(date) {
+    let year = date.getUTCFullYear();
+    let month = "0" + (1 + date.getUTCMonth());
+    let day = "0" + (1 + date.getUTCDate());
+    let hours = "0" + date.getUTCHours();
+    let minutes = "0" + date.getUTCMinutes();
+    let seconds = "0" + date.getUTCSeconds();
+
+    let datePart = year + "-" + month.substr(-2) + "-" + day.substr(-2);
+    let timePart = hours.substr(-2) + ":" + minutes.substr(-2) + ":" + seconds.substr(-2);
+
+    return datePart + " " + timePart;
+}
+
 function makeBlockElem(block, prevBlock) {
     let entry = document.createElement("div");
 
@@ -100,9 +114,12 @@ function makeBlockElem(block, prevBlock) {
     innerElem.appendChild(topElem);
 
     // Make the icon.
+    let iconCtr = document.createElement("div");
+    iconCtr.classList.add("blbiconctr");
+    topElem.appendChild(iconCtr);
     let iconElem = document.createElement("img");
     iconElem.classList.add("blbicon");
-    topElem.appendChild(iconElem);
+    iconCtr.appendChild(iconElem);
     if (block.height % HALVING_PERIOD == 0) {
 	iconElem.src = GOLD_BLOCK;
     } else {
@@ -120,6 +137,18 @@ function makeBlockElem(block, prevBlock) {
     heightElem.innerHTML = block.height.toString();
     dataElem.appendChild(heightElem);
 
+    // this makes it look a lot nicer
+    dataElem.append("—");
+
+    // Make the timestamp element.
+    let timestampElem = document.createElement("span");
+    let timestampDate = new Date(block.timestamp * 1000);
+    timestampElem.innerHTML = formatDate(timestampDate);
+    dataElem.appendChild(timestampElem);
+
+    // this makes it look a lot nicer
+    dataElem.append("—");
+
     // Make the reward breakdown element.
     let rewardElem = document.createElement("span");
     rewardElem.innerHTML = "Reward: ? sat";
@@ -131,7 +160,7 @@ function makeBlockElem(block, prevBlock) {
     });
 
     // Make the hash element.
-    let hashElem = document.createElement("span");
+    let hashElem = document.createElement("div");
     hashElem.innerHTML = block.id;
     hashElem.classList.add("blbhash");
     topElem.appendChild(hashElem);
@@ -147,7 +176,7 @@ function makeBlockElem(block, prevBlock) {
     detailElem.appendChild(sizeElem);
     let blockKB = Math.floor(block.size / 1024);
     let blockkWU = Math.floor(block.weight / 1024);
-    detailElem.innerHTML = "Weight/Size: " + blockKB + " KiB / " + blockkWU + " kSipa";
+    sizeElem.innerHTML = "Weight/Size: " + blockKB + " KiB / " + blockkWU + " kSipa";
 
     // Number of transactions
     let txsElem = document.createElement("div");
@@ -169,6 +198,20 @@ function makeBlockElem(block, prevBlock) {
 	detailElem.appendChild(oopsElem);
     }
 
+    let linksElem = document.createElement("div");
+    linksElem.classList.add("detaillinks");
+    detailElem.appendChild(linksElem);
+
+    let blockstreamLink = document.createElement("a");
+    blockstreamLink.href = "https://blockstream.info/block/"+ block.id;
+    let blockstreamLogo = document.createElement("img");
+    blockstreamLogo.src = "https://blockstream.info/img/icons/blockstream-logo.png";
+    blockstreamLink.appendChild(blockstreamLogo);
+    let viewonElem = document.createElement("span");
+    viewonElem.innerHTML = "View on blockstream.info";
+    blockstreamLink.appendChild(viewonElem);
+    linksElem.appendChild(blockstreamLink);
+
     /* ===== Finalize ===== */
 
     // Put it together.

www/style.css

@@ -37,43 +37,38 @@ body {
     align-items: stretch;
 }
 
+.blbiconctr {
+}
+
 .blbicon {
     height: 36pt;
     /*max-width: 36pt;*/
     margin: 0;
 
     vertical-align: middle;
-
-    flex: initial;
 }
 
 .blbdata {
     height: 100%;
-    width: auto;
 
     margin-top: auto;
     margin-bottom: auto;
 
-    display: table;
-
-    flex: auto;
+    flex-grow: 1;
 }
 
 .blbhash {
-    max-width: 100%;
+    margin-top: auto;
+    margin-bottom: auto;
 
     font-size: 12pt;
     font-family: monospace;
 
     vertical-align: middle;
-    float: right;
-    flex: 1;
 }
 
 .blbdata span {
     margin: 4pt;
-
-    display: table-cell;
     vertical-align: middle;
 }
 
@@ -94,3 +89,20 @@ body {
 .entrydetail {
     margin: 5px;
 }
+
+.detaillinks {
+    display: flex;
+}
+
+.detaillinks span {
+    height: 100%;
+    margin-top: auto;
+    margin-bottom: auto;
+    vertical-align: middle;
+}
+
+.detaillinks img {
+    height: 36pt;
+    width: 36pt;
+    vertical-align: middle;
+}