Fixed some minor layout and usability issues.

www/main.js

@@ -165,24 +165,24 @@ function makeBlockElem(block, prevBlock) {
 	rewardElem.innerHTML = rewardStr;
     });
 
-    // Make the hash element.
-    let hashElem = document.createElement("div");
-    hashElem.innerHTML = block.id;
-    hashElem.classList.add("blbhash");
-    topElem.appendChild(hashElem);
-
     /* ==== Detail row data ===== */
 
     // Details
     let detailElem = document.createElement("div");
     detailElem.classList.add("entrydetail");
 
+    // Make the hash element.
+    let hashElem = document.createElement("div");
+    hashElem.innerHTML = block.id;
+    hashElem.classList.add("blbhash");
+    detailElem.appendChild(hashElem);
+
     // Weight and height
     let sizeElem = document.createElement("div");
     detailElem.appendChild(sizeElem);
     let blockKB = Math.floor(block.size / 1024);
     let blockkWU = Math.floor(block.weight / 1024);
-    sizeElem.innerHTML = "Weight/Size: " + blockKB + " KiB / " + blockkWU + " kSipa";
+    sizeElem.innerHTML = "Size/Weight: " + blockKB + " KiB / " + blockkWU + " kSipa";
 
     // Number of transactions
     let txsElem = document.createElement("div");
@@ -208,6 +208,7 @@ function makeBlockElem(block, prevBlock) {
     linksElem.classList.add("detaillinks");
     detailElem.appendChild(linksElem);
 
+    // Link to the block on Blockstream's explorer.
     let blockstreamLink = document.createElement("a");
     blockstreamLink.href = "https://blockstream.info/block/"+ block.id;
     let blockstreamLogo = document.createElement("img");
@@ -218,6 +219,21 @@ function makeBlockElem(block, prevBlock) {
     blockstreamLink.appendChild(viewonElem);
     linksElem.appendChild(blockstreamLink);
 
+    // Thing to close the details.
+    let closeElem = document.createElement("div");
+    closeElem.classList.add("closebtn");
+    closeElem.innerHTML = "close";
+    closeElem.onclick = function() {
+	// This is such a hack but it works.  We have to do this because the
+	// onclick for the entry we're removing it from here *still gets run*
+	// when we pick up the click here.  This just defers removing it until
+	// we're about to render the next frame, so we're sure we remove it.
+	window.requestAnimationFrame(function() {
+	    entry.classList.remove("blbselected");
+	});
+    };
+    detailElem.appendChild(closeElem);
+
     /* ===== Finalize ===== */
 
     // Put it together.
@@ -225,7 +241,7 @@ function makeBlockElem(block, prevBlock) {
     entry.appendChild(innerElem);
     entry.classList.add("blocklistentry");
     entry.onclick = function() {
-	toggleElemSelected(entry);
+	entry.classList.add("blbselected");
     };
 
     return entry;
@@ -254,21 +270,17 @@ function updateRemainingCount(block) {
 	let sinceLastBlock = nowUnix - block.timestamp;
 	let secsLeft = ((blocksLeft * 10 * 60) - sinceLastBlock)|0;
 
-	console.log("Seconds until halving: " + secsLeft);
-
 	let secsPart = secsLeft % 60;
 	let minLeft = (secsLeft - secsPart) / 60;
 	let minPart = minLeft % 60;
 	let hrsLeft = (minLeft - minPart) / 60;
 
-	console.log(secsPart, minLeft, minPart, hrsLeft);
-
 	let acc = secsPart + "s";
 	if (minLeft > 0) {
 	    acc = (minPart + "m ") + acc;
 	}
 	if (hrsLeft > 0) {
-	    acc = (hrsLeft + "hr ") + acc;
+	    acc = (hrsLeft + "h ") + acc;
 	}
 
 	timeLeftElem.innerHTML = "roughly " + acc + " remaining";
@@ -376,11 +388,6 @@ function checkNewBlocks() {
 function init() {
     console.log("Hello!");
 
-    let checkHeights = [0, 1, 2, 209999, 210000, 210001, 629999, 630000, 630001];
-    for (let i = 0; i < checkHeights.length; i++) {
-	console.log("Reward at " + checkHeights[i] + " is " + calcRewardAtHeight(checkHeights[i]));
-    }
-
     doGetRecentBlocks(function(blocks) {
 	if (blocks == null) {
 	    alert("Error loading blocks, please refresh the page.");

www/style.css

@@ -16,6 +16,7 @@ a {
 
 #blocklist {
     margin: 0 auto;
+    max-width: 80em;
 }
 
 .blocklistentry {
@@ -31,11 +32,13 @@ a {
 }
 
 .entryinner {
-    margin: 6pt;
+    margin: 12pt;
     border: 1px solid black;
     border-width: 2pt;
     border-radius: 4px 4px 4px 4px;
     padding: 12pt;
+
+    box-shadow: 8px 8px #ddaa00;
 }
 
 .blbselected .entryinner {
@@ -141,3 +144,15 @@ a {
 	/* just whatever it already is */
     }
 }
+
+.closebtn {
+    width: 36pt;
+    margin: 4pt;
+
+    border: 1px solid grey;
+    border-radius: 4px 4px 4px 4px;
+    padding: 4pt;
+
+    background-color: lightgrey;
+    text-align: center;
+}