Permalink
Browse files

tweaks to block lists:

- "tag" style for miners, to allude to the hover-text details
- display radial "progress bar" showing used block capacity
  • Loading branch information...
janoside committed Jul 25, 2018
1 parent 69895f8 commit fda769e7ce04c8f1b6eaf2d8d49346da01cb7adc
Showing with 94 additions and 11 deletions.
  1. +4 −3 package.json
  2. +73 −0 public/css/radial-progress.less
  3. +7 −8 views/includes/blocks-list.pug
  4. +8 −0 views/includes/radial-progress-bar.pug
  5. +2 −0 views/layout.pug
@@ -6,24 +6,25 @@
"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",
"morgan": "~1.9.0",
"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"
}
}
@@ -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);
}
@@ -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
a(data-toggle="tooltip", title=("Hover text below for details"))
i(class="fas fa-info-circle")
th(class="data-header") Miner
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)
a(data-toggle="tooltip", title=("Hover text below for % full"))
i(class="fas fa-info-circle")
th(class="data-header text-right") Weight (wu)
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
@@ -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")
@@ -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() {

0 comments on commit fda769e

Please sign in to comment.