tweaks to block lists:

- "tag" style for miners, to allude to the hover-text details
- display radial "progress bar" showing used block capacity

package.json

@@ -6,16 +6,17 @@
     "start": "node ./bin/www"
   },
   "dependencies": {
-    "body-parser": "~1.18.2",
-    "cookie-parser": "~1.4.3",
     "bitcoin-core": "2.0.0",
     "bitcoinjs-lib": "3.3.2",
+    "body-parser": "~1.18.2",
+    "cookie-parser": "~1.4.3",
     "crypto-js": "3.1.9-1",
     "debug": "~2.6.0",
     "decimal.js": "7.2.3",
     "express": "~4.16.3",
     "express-session": "1.15.6",
     "jstransformer-markdown-it": "^2.0.0",
+    "less": "3.8.0",
     "lru-cache": "4.1.3",
     "moment": "^2.21.0",
     "moment-duration-format": "2.2.2",
@@ -23,7 +24,7 @@
     "pug": "2.0.1",
     "qrcode": "1.2.0",
     "request": "2.85.0",
-    "serve-favicon": "~2.3.2",
+    "serve-favicon": "^2.5.0",
     "simple-git": "1.92.0"
   }
 }

public/css/radial-progress.less

@@ -0,0 +1,73 @@
+.radial-progress {
+	@circle-size: 16px;
+	@circle-background: #d6dadc;
+	@circle-color: #0eb23a;
+	@inset-size: 6px;
+	@inset-color: #ffffff;
+	@transition-length: 0s;
+	@shadow: 0px 0px 0px rgba(0,0,0,0.1);
+  
+	width:  @circle-size;
+	height: @circle-size;
+	display: inline-block;
+
+	background-color: @circle-background;
+	border-radius: 50%;
+	.circle {
+		.mask, .fill, .shadow {
+			width:    @circle-size;
+			height:   @circle-size;
+			position: absolute;
+			border-radius: 50%;
+		}
+		.shadow {
+			box-shadow: @shadow inset;
+		}
+		.mask, .fill {
+			-webkit-backface-visibility: hidden;
+			transition: -webkit-transform @transition-length;
+			transition: -ms-transform @transition-length;
+			transition: transform @transition-length;
+			border-radius: 50%;
+		}
+		.mask {
+			clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
+			.fill {
+				clip: rect(0px, @circle-size/2, @circle-size, 0px);
+				background-color: @circle-color;
+			}
+		}
+	}
+	.inset {
+		width:       @inset-size;
+		height:      @inset-size;
+		position:    absolute;
+		margin-left: (@circle-size - @inset-size)/2;
+		margin-top:  (@circle-size - @inset-size)/2;
+
+		background-color: @inset-color;
+		border-radius: 50%;
+		box-shadow: @shadow;
+	}
+
+	@i: 0;
+	@increment: 180deg / 100;
+	.loop (@i) when (@i <= 100) {
+		&[data-progress="@{i}"] {
+			.circle {
+				.mask.full, .fill {
+					-webkit-transform: rotate(@increment * @i);
+					-ms-transform: rotate(@increment * @i);
+					transform: rotate(@increment * @i);
+				}	
+				.fill.fix {
+					-webkit-transform: rotate(@increment * @i * 2);
+					-ms-transform: rotate(@increment * @i * 2);
+					transform: rotate(@increment * @i * 2);
+				}
+			}
+		}
+		.loop(@i + 1);
+	}
+	.loop(@i);
+}

views/includes/blocks-list.pug

@@ -5,17 +5,13 @@ table(class="table table-striped table-responsive-sm")
 			th(class="data-header") Height
 			th(class="data-header") Timestamp (utc)
 			th(class="data-header text-right") Age
-			th(class="data-header") Miner 
+			th(class="data-header") Miner
-				a(data-toggle="tooltip", title=("Hover text below for details"))
-					i(class="fas fa-info-circle")
 			th(class="data-header text-right") Transactions
 			th(class="data-header text-right") Average Fee
 			th(class="data-header text-right") Size (bytes)
 
 			if (blocks && blocks.length > 0 && blocks[0].weight)
-				th(class="data-header text-right") Weight (wu) 
+				th(class="data-header text-right") Weight (wu)
-					a(data-toggle="tooltip", title=("Hover text below for % full"))
-						i(class="fas fa-info-circle")
 	tbody
 		each block, blockIndex in blocks
 			if (block)
@@ -29,7 +25,7 @@ table(class="table table-striped table-responsive-sm")
 					td(class="data-cell monospace text-right") #{timeAgo.format()}
 					td(class="data-cell monospace")
 						if (block.miner && block.miner.name)
-							span(data-toggle="tooltip", title=("Identified by: " + block.miner.identifiedBy)) #{block.miner.name}
+							span(data-toggle="tooltip", title=("Identified by: " + block.miner.identifiedBy), class="tag") #{block.miner.name}
 						else
 							span ?
 
@@ -44,4 +40,7 @@ table(class="table table-striped table-responsive-sm")
 
 					if (blocks && blocks.length > 0 && blocks[0].weight)
 						td(class="data-cell monospace text-right")
-							span(title=(new Decimal(100 * block.weight / coinConfig.maxBlockWeight).toDecimalPlaces(2) + "% full"), data-toggle="tooltip") #{block.weight.toLocaleString()}
+							span #{block.weight.toLocaleString()} 
+
+							- var radialProgressBarPercent = new Decimal(100 * block.weight / coinConfig.maxBlockWeight).toDecimalPlaces(2);
+							include ./radial-progress-bar.pug

views/includes/radial-progress-bar.pug

@@ -0,0 +1,8 @@
+div(class="radial-progress", data-progress=parseInt(radialProgressBarPercent), data-toggle="tooltip", title=(radialProgressBarPercent + "% full"))
+	div(class="circle")
+		div(class="mask full")
+			div(class="fill")
+		div(class="mask half")
+			div(class="fill")
+			div(class="fill fix")
+	div(class="inset")

views/layout.pug

@@ -15,6 +15,7 @@ html
 		link(rel="stylesheet", href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css")
 		link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Lato|Open+Sans|Cousine|Ubuntu:400,500,700")
 		link(rel="stylesheet", href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css")
+		link(rel="stylesheet/less", href="/css/radial-progress.less", type="text/css")
 		link(rel='stylesheet', href='/css/styling.css')
 
 		link(rel="icon", type="image/png", href=("/img/logo/" + config.coin.toLowerCase() + ".png"))
@@ -163,6 +164,7 @@ html
 		script(defer, src="https://use.fontawesome.com/releases/v5.0.10/js/all.js", integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+", crossorigin="anonymous")
 
 		script(src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js")
+		script(src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.0/less.min.js")
 		
 		script.
 			$(document).ready(function() {