css: fix dracula theme

This commit is contained in:
5chdn 2018-12-01 20:05:23 +01:00
parent 59273a0b23
commit 271dab2a97
No known key found for this signature in database
GPG Key ID: 1A40871B597F5F80
3 changed files with 867 additions and 6 deletions

View File

@ -65,27 +65,27 @@ table td {
.bg-success,
.text-success .propagationBox {
background: #7bcc3a;
background: #50fa7b;
}
.bg-info,
.text-info .propagationBox {
background: #10a0de;
background: #8be9fd;
}
.bg-warning,
.text-warning .propagationBox {
background: #FFD162;
background: #f1fa8c;
}
.bg-orange,
.text-orange .propagationBox {
background: #ff8a00;
background: #ffb86c;
}
.bg-danger,
.text-danger .propagationBox {
background: #F74B4B;
background: #ff5555;
}
.text-gray .propagationBox {
@ -106,7 +106,7 @@ table td {
}
.text-orange {
color: #ff8a00;
color: #ffb86c;
}
.container-fluid {

561
src/css/style.css.orig Normal file
View File

@ -0,0 +1,561 @@
html {
width: 100%;
}
body {
width: 100%;
font-smooth: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 200;
src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(../fonts/SourceSansPro-ExtraLight.woff2) format('woff2');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(../fonts/SourceSansPro-Light.woff2) format('woff2');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(../fonts/SourceSansPro-Regular.woff2) format('woff2');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(../fonts/SourceSansPro-SemiBold.woff2) format('woff2');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(../fonts/SourceSansPro-Bold.woff2) format('woff2');
}
table td {
font-size: 14px;
white-space: nowrap !important;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
.propagationBox {
position: relative;
width: 8px;
height: 8px;
float: left;
top: 5px;
margin-right: 5px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.bg-success,
.text-success .propagationBox {
background: #50fa7b;
}
.bg-info,
.text-info .propagationBox {
background: #8be9fd;
}
.bg-highlight,
.text-highlight .propagationBox {
background: #bd93f9;
}
.bg-warning,
.text-warning .propagationBox {
background: #f1fa8c;
}
.bg-orange,
.text-orange .propagationBox {
background: #ffb86c;
}
.bg-danger,
.text-danger .propagationBox {
background: #ff5555;
}
.text-gray .propagationBox {
background: none !important;
border: 1px solid #f8f8f2;
}
.bg-success,
.bg-info,
.bg-warning,
.bg-orange,
.bg-danger {
color: #000;
}
.text-gray {
color: #f8f8f2 !important;
}
.text-orange {
color: #ffb86c;
}
.container-fluid {
padding-left: 30px;
padding-right: 30px;
}
.stat-holder {
background: #090909;
border: 1px solid rgba(255,255,255,0.05);
}
.big-info {
padding-top: 15px;
padding-bottom: 15px;
}
.big-info .icon-full-width i {
display: block;
width: 85px;
height: 70px;
font-size: 70px;
line-height: 70px;
margin-right: 15px;
margin-left: -15px;
}
.big-info span.small-title,
.big-info div.small-title-miner {
display: block;
}
span.small-title,
div.small-title-miner {
font-weight: 700;
font-size: 14px;
line-height: 20px;
letter-spacing: 1px;
text-transform: uppercase;
color: #aaa;
}
span.small-title span.small {
font-size: 11px;
font-weight: 600;
line-height: 16px;
letter-spacing: 0px;
color: #666;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
.big-info .big-details {
display: block;
font-weight: 200;
font-size: 50px;
line-height: 55px;
letter-spacing: -4px;
word-spacing: nowrap !important;
}
.big-info .big-details .small-hash {
font-size: 87%;
}
.big-info .big-details-holder {
position: absolute;
top: 15px;
left: 99px;
}
.big-info.chart {
padding-top: 12px;
}
.big-info.chart .big-details {
display: table;
top: 40px;
margin: 0 auto;
}
.big-info.chart {
height: 120px;
-webkit-box-sizing: border-box
box-sizing: border-box;
}
.big-info.chart.double-chart {
height: 242px;
}
.blocks-holder {
width: 288px;
padding-top: 6px;
margin-left: -2px;
display: table;
margin: 0 auto;
}
.blocks-holder {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
.blocks-holder div.small-title-miner {
font-family: "Lucida Console", "Courier New", Courier, monospace;
font-size: 11px;
letter-spacing: -0.1px;
text-transform: none;
white-space: nowrap;
color: #f8f8f2;
}
.blocks-holder .block-count {
font-family: 'Lucida Console', "Courier New", Courier, monospace;
font-weight: bold;
font-size: 10px;
padding-top: 3px;
float: right;
}
.blocks-holder .block {
width: 6px;
height: 6px;
margin: 2px 1px 6px 0px;
float: left;
-webkit-border-radius: 1px;
border-radius: 1px;
opacity: .8;
}
.blocks-holder .block:first-child {
margin-left: 0px;
}
.blocks-holder .block:last-child {
margin-right: 0px;
}
.second-row .box {
height: 40px;
line-height: 24px !important;
padding: 5px 15px;
}
.second-row .box i,
.big-info.chart i {
position: relative;
top: 2px;
left: -3px;
font-size: 24px;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
margin-right: 7px;
float: left;
}
.big-info.chart i {
font-size: 24px;
top: -2px;
}
.small-value {
font-weight: 300;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
float: right;
}
.second-row .box .small-value {
float: right;
}
.big-info .small-value {
position: absolute;
right: 14px;
top: 10px;
}
table i {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
table th,
table td {
border-color: #222 !important;
}
table td {
line-height: 18px !important;
}
table th {
color: #888;
}
table th i {
line-height: 1em;
font-size: 20px;
}
table td i {
position: relative;
top: 2px;
left: 2px;
}
table td.peerPropagationChart {
padding: 4px 5px !important;
}
nodepropagchart {
display: inline-block;
width: 107px;
height: 20px;
vertical-align: top;
}
.table>tbody>tr>td,
.table>thead>tr>th {
padding: 5px;
}
.th-nodecheck,
.td-nodecheck {
width: 38px;
text-align: center;
}
.td-nodecheck i {
left: 0px;
}
.th-nodename {
width: 300px;
text-overflow: ellipsis;
}
.th-nodetype {
width: 220px;
}
.th-latency {
width: 100px;
}
.th-blockhash {
width: 150px;
}
.th-blocktime {
width: 110px;
}
.th-peerPropagationTime {
width: 120px;
}
.th-peerPropagationChart {
width: 140px;
}
.nodeInfo .tooltip .tooltip-inner {
max-width: 400px;
text-align: left;
font-size: 12px;
}
.map-holder {
padding: 0;
}
#mapHolder {
position: relative;
display: block;
width: 100%;
height: 242px;
overflow: hidden;
}
#mapHolder > svg {
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.jqsfield {
position: relative;
padding: 5px 0;
width: auto;
left: -50%;
word-wrap: wrap;
text-align: center;
}
.d3-tip {
padding: 5px 0;
}
.jqsfield .tooltip-arrow {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #fff;
}
.datamaps-hoverover .tooltip-arrow,
.d3-tip .tooltip-arrow {
position: absolute;
top: -5px;
left: 0px;
margin-left: -5px;
border-width: 0px 5px 5px 5px;
border-bottom-color: #fff;
}
.d3-tip .tooltip-arrow {
top: 0px;
left: 50%;
}
.hoverinfo {
position: relative;
width: auto;
left: -50%;
text-align: center;
color: #333;
border: none !important;
box-shadow: none !important;
border-radius: 3px !important;
padding: 5px !important;
line-height: 14px !important;
}
.hoverinfo .propagationBox {
top: 3px;
}
svg {
overflow: visible !important;
}
svg .bars .bar {
opacity: 1;
shape-rendering: auto;
}
svg .bars .handle {
opacity: 0;
}
svg .bars .highlight {
opacity: 0;
}
svg .bars g:hover .highlight {
opacity: 1;
}
svg .line {
fill: none;
stroke: #ff0000;
stroke-width: 1.3px;
stroke-linejoin: round;
stroke-linecap: round;
shape-rendering: geometric-precision;
/*-webkit-svg-shadow: 0 0 7px #fff;*/
}
svg .bar text {
text-anchor: end;
font-size: 12px;
}
svg .axis path,
svg .axis line {
fill: none;
stroke: rgba(255,255,255,0.15);
shape-rendering: crispEdges;
}
svg .axis text {
fill: #f8f8f2;
font-size: 10px;
letter-spacing: 0px;
font-family: "Source Sans Pro";
font-weight: 700;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
svg .y.axis .tick:first-child text {
opacity: 0;
}
<<<<<<< HEAD
=======
@media (max-width: 768px) {
.container-fluid {
padding-left: 5px;
padding-right: 5px;
}
.big-info .icon-full-width i {
width: 75px;
height: 67px;
font-size: 67px;
margin-left: -25px;
}
.big-info .big-details-holder {
left: 75px;
}
.big-info .big-details {
font-size: 35px;
}
.blocks-holder div.small-title-miner {
font-family: inherit;
font-size: 11px;
letter-spacing: -.5px;
}
.blocks-holder {
width: 100%;
}
.big-info.chart i, .second-row .box i {
font-size: 18px;
margin-right: 0px;
}
.second-row .box {
height: 100%; /* BUG XXX */
}
}
@media (max-width: 600px) {
.blocks-holder div.small-title-miner {
font-size: 10px;
}
}
>>>>>>> e4ae99d42d3264d10364d7db28704e596ac830ad

300
src/views/index.jade.orig Normal file
View File

@ -0,0 +1,300 @@
//- index.jade
extends ./layout.jade
block content
div.container-fluid(ng-controller='StatsCtrl')
div.row(ng-cloak)
div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder
div.big-info.bestblock.text-info
div.pull-left.icon-full-width
i.icon-block
div.big-details-holder
span.small-title best block
span.big-details {{'#'}}{{ bestBlock | number}}
div.clearfix
<<<<<<< HEAD
div.col-xs-2.stat-holder
=======
div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder
div.big-info.uncleCount.text-info
div.pull-left.icon-full-width
i.icon-uncle
div.big-details-holder
span.small-title uncles&nbsp;
span.small.hidden-xs (current / last 50)
span.big-details {{ bestStats.block.uncles.length }}/{{ uncleCount }}
div.clearfix
div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder
>>>>>>> e4ae99d42d3264d10364d7db28704e596ac830ad
div.big-info.blocktime(class="{{ lastBlock | timeClass : true }}")
div.pull-left.icon-full-width
i.icon-time
div.big-details-holder
span.small-title last block
span.big-details {{ lastBlock | blockTimeFilter }}
//- span.big-details(time-ago="lastBlock")
div.clearfix
div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder
div.big-info.avgblocktime(class="{{ avgBlockTime | avgTimeClass }}")
div.pull-left.icon-full-width
i.icon-gas
div.big-details-holder
span.small-title avg block time
span.big-details {{ avgBlockTime | avgTimeFilter }}
div.clearfix
<<<<<<< HEAD
div.col-xs-2.stat-holder
div.big-info.gasprice.text-info
=======
div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder
div.big-info.difficulty.text-orange
>>>>>>> e4ae99d42d3264d10364d7db28704e596ac830ad
div.pull-left.icon-full-width
i.icon-gasprice
div.big-details-holder
<<<<<<< HEAD
span.small-title gas price
span.big-details {{ bestStats.gasPrice.toString() | gasPriceFilter }}
div.clearfix
div.col-xs-2.stat-holder
div.big-info.gasprice.text-highlight
=======
span.small-title
span.hidden-xs avg&nbsp;
| network hash
span.hidden-xs rate
span.big-details(ng-bind-html="avgHashrate | networkHashrateFilter")
div.clearfix
div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder
div.big-info.difficulty.text-danger
>>>>>>> e4ae99d42d3264d10364d7db28704e596ac830ad
div.pull-left.icon-full-width
i.icon-difficulty
div.big-details-holder
span.small-title gas limit
span.big-details {{ bestStats.block.gasLimit }} gas
div.clearfix
div.col-xs-2.stat-holder
div.big-info.active-nodes(class="{{ nodesActive | nodesActiveClass : nodesTotal }}")
div.pull-left.icon-full-width
i.icon-node
div.big-details-holder
span.small-title active nodes
span.big-details {{nodesActive}}/{{nodesTotal}}
div.clearfix
div.clearfix
div.row(ng-cloak)
<<<<<<< HEAD
div.col-xs-2.stat-holder
div.big-info.chart(class="{{ avgBlockTime | avgTimeClass }}")
i.icon-time
span.small-title block time
sparkchart.big-details.spark-blocktimes(data="{{lastBlocksTime.join(',')}}", tooltipsuffix="s")
div.clearfix
div.col-xs-2.stat-holder.xpull-right
div.big-info.chart.xdouble-chart(class="{{ blockPropagationAvg | propagationAvgTimeClass : true }}")
i.icon-gas
span.small-title block propagation
histogram.big-details.d3-blockpropagation(data="blockPropagationChart")
div.clearfix
div.col-xs-2.stat-holder
div.big-info.chart.text-info
i.icon-uncle
span.small-title transactions
sparkchart.big-details.spark-transactions(data="{{transactionDensity.join(',')}}")
div.clearfix
div.col-xs-2.stat-holder
div.big-info.chart.text-info
i.icon-gasprice
span.small-title gas spending
sparkchart.big-details.spark-gasspending(data="{{gasSpending.join(',')}}")
div.clearfix
div.col-xs-2.stat-holder
div.big-info.chart.text-info
i.icon-difficulty
span.small-title gas limit
sparkchart.big-details.spark-difficulty(data="{{lastGasLimit.join(',')}}")
div.clearfix
div.col-xs-2.stat-holder.xpull-right
div.big-info.chart.xdouble-chart.text-danger
//- i.icon-hashrate
span.small-title last blocks miners
div.blocks-holder(ng-repeat='miner in miners track by miner.miner', data-toggle="tooltip", data-placement="right", data-original-title="{{miner.blocks}}")
div.block-count(class="{{miner.blocks | minerBlocksClass : 'text-'}}") {{miner.blocks}}
div.small-title-miner {{miner.miner | minerNameFilter : miner.name}}
minerblock(blocks="{{miner.blocks}}")
div.clearfix
div.clearfix
=======
div.col-xs-12.stats-boxes(style="padding-top: 0px;")
div.row.second-row
div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder.box
div.active-nodes(class="{{ nodesActive | nodesActiveClass : nodesTotal }}")
i.icon-node
span.small-title active nodes
span.small-value {{nodesActive}}/{{nodesTotal}}
div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder.box
div.gasprice.text-info
i.icon-gasprice
span.small-title gas price
span.small-value {{ bestStats.gasPrice.toString() | gasPriceFilter }}
div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder.box
div.gasprice.text-info
i.icon-gasprice
span.small-title gas limit
span.small-value {{ bestStats.block.gasLimit | number }} gas
div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder.box
div.page-latency(class="{{ {active: true, latency: latency} | latencyClass }}")
i.icon-clock
span.small-title page latency
span.small-value {{latency}} ms
div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder.box
div.uptime(class="{{ upTimeTotal | upTimeClass : true }}")
i.icon-bulb
span.small-title uptime
span.small-value {{ upTimeTotal | upTimeFilter }}
div.col-xs-6.col-sm-6.col-md-6.col-lg-2.stat-holder.box
div.row
div.col-xs-12.col-sm-12.col-md-12.col-lg-8
div.row
div.col-xs-6.col-sm-4.col-md-3.stat-holder
div.big-info.chart(class="{{ avgBlockTime | avgTimeClass }}")
//- i.icon-time
span.small-title block time
//- span.small-value {{ avgBlockTime | avgTimeFilter }}
sparkchart.big-details.spark-blocktimes(data="{{lastBlocksTime.join(',')}}", tooltipsuffix="s")
div.col-xs-6.col-sm-4.col-md-3.stat-holder
div.big-info.chart.text-info
//- i.icon-difficulty
span.small-title difficulty
//- span.small-value {{ lastDifficulty | number }}
sparkchart.big-details.spark-difficulty(data="{{difficultyChart.join(',')}}")
div.col-xs-6.col-sm-4.col-md-3.stat-holder.xpull-right
div.big-info.chart.xdouble-chart(class="{{ blockPropagationAvg | propagationAvgTimeClass : true }}")
//- i.icon-gas
span.small-title block propagation
//- span.small-value {{ blockPropagationAvg | blockPropagationFilter : '' }}
histogram.big-details.d3-blockpropagation(data="blockPropagationChart")
div.col-xs-6.col-sm-4.col-md-3.stat-holder.xpull-right
div.big-info.chart.xdouble-chart
span.small-title last blocks miners
div.blocks-holder(ng-repeat='miner in miners track by miner.miner', data-toggle="tooltip", data-placement="right", data-original-title="{{miner.blocks}}")
//- div.small-title-miner {{miner.miner | minerNameFilter : miner.name}}
div.small-title-miner {{miner.miner}}
div.block-count(class="{{miner.blocks | minerBlocksClass : 'text-'}}") {{miner.blocks}}
minerblock(blocks="{{miner.blocks}}")
div.clearfix
div.col-xs-6.col-sm-4.col-md-3.stat-holder
div.big-info.chart.text-info
//- i.icon-uncle
span.small-title uncle count&nbsp;
span.small.hidden-xs (25 blocks per bar)
//- span.small-value {{ bestStats.block.uncles.length }}/{{ uncleCount }}
sparkchart.big-details.spark-uncles(data="{{uncleCountChart.join(',')}}")
div.col-xs-6.col-sm-4.col-md-3.stat-holder
div.big-info.chart.text-info
//- i.icon-uncle
span.small-title transactions
sparkchart.big-details.spark-transactions(data="{{transactionDensity.join(',')}}")
div.col-xs-6.col-sm-4.col-md-3.stat-holder
div.big-info.chart.text-info
//- i.icon-gasprice
span.small-title gas spending
sparkchart.big-details.spark-gasspending(data="{{gasSpending.join(',')}}")
div.col-xs-6.col-sm-4.col-md-3.stat-holder
div.big-info.chart.text-info
//- i.icon-difficulty
span.small-title gas limit
//- span.small-value {{ lastDifficulty | number }}
sparkchart.big-details.spark-difficulty(data="{{lastGasLimit.join(',')}}")
div.col-xs-12.col-sm-12.col-md-12.col-lg-4.stat-holder.map-holder
//- div.col-xs-12
nodemap#mapHolder(data="map")
div.row.hidden-xs
div.col-xs-12.stats-boxes
div.row.second-row
>>>>>>> e4ae99d42d3264d10364d7db28704e596ac830ad
div.row(ng-cloak, style="padding-top: 10px")
table.table.table-striped
thead
tr.text-info
th.th-nodecheck
i.icon-check-o(data-toggle="tooltip", data-placement="top", title="Pin nodes to display first", ng-click="orderTable(['-stats.block.number', 'stats.block.propagation'], false)")
th.th-nodename
i.icon-node(data-toggle="tooltip", data-placement="top", title="Node name", ng-click="orderTable(['info.name'], false)")
th.th-nodetype.hidden-xs
i.icon-laptop(data-toggle="tooltip", data-placement="top", title="Node type", ng-click="orderTable(['info.node'], false)")
th.th-latency.hidden-xs
i.icon-clock(data-toggle="tooltip", data-placement="top", title="Node latency", ng-click="orderTable(['stats.latency'], false)")
th.hidden-xs
i.icon-mining(data-toggle="tooltip", data-placement="top", title="Is mining", ng-click="orderTable(['-stats.hashrate'], false)")
th
i.icon-group(data-toggle="tooltip", data-placement="top", title="Peers", ng-click="orderTable(['-stats.peers'], false)")
th
i.icon-network(data-toggle="tooltip", data-placement="top", title="Pending transactions", ng-click="orderTable(['-stats.pending'], false)")
th.hidden-xs
i.icon-block(data-toggle="tooltip", data-placement="top", title="Last block", ng-click="orderTable(['-stats.block.number', 'stats.block.propagation'], false)")
th.th-blockhash.hidden-xs.hidden-sm.hidden-md &nbsp;
th.th-blockhash.hidden-xs.hidden-sm.hidden-md
i.icon-difficulty(data-toggle="tooltip", data-placement="top", title="Total difficulty", ng-click="orderTable(['-stats.block.totalDifficulty'], false)")
th.hidden-xs
i.icon-check-o(data-toggle="tooltip", data-placement="top", title="Block transactions", ng-click="orderTable(['-stats.block.transactions.length'], false)")
th.hidden-xs
i.icon-uncle(data-toggle="tooltip", data-placement="top", title="Uncles", ng-click="orderTable(['-stats.block.uncles.length'], false)")
th.th-blocktime
i.icon-time(data-toggle="tooltip", data-placement="top", title="Last block time", ng-click="orderTable(['-stats.block.received'], false)")
th.th-peerPropagationTime
i.icon-gas(data-toggle="tooltip", data-placement="top", title="Propagation time", ng-click="orderTable(['-stats.block.number', 'stats.block.propagation'], false)")
th.th-peerPropagationChart
th.th-peerPropagationAvg.hidden-xs
i.icon-gas(data-toggle="tooltip", data-placement="top", title="Average propagation time", ng-click="orderTable(['stats.propagationAvg'], false)")
th
i.icon-bulb(data-toggle="tooltip", data-placement="top", title="Up-time", ng-click="orderTable(['-stats.uptime'], false)")
tbody(ng-cloak)
tr(ng-repeat='node in nodes | orderBy:predicate track by node.id', class="{{ node.stats | mainClass : bestBlock }}", id="node_{{node.id}}")
td.td-nodecheck
i(ng-click="pinNode(node.id)", class="{{ node.pinned | nodePinClass }}", data-toggle="tooltip", data-placement="right", data-original-title="Click to {{ node.pinned ? 'un' : '' }}pin")
td.nodeInfo(rel="{{node.id}}")
span.small(data-toggle="tooltip", data-placement="top", data-html="true", data-original-title="{{node | geoTooltip}}") {{node.info.name}}
//- span.small &nbsp;({{node.info.ip}})
a.small(href="https://github.com/ethereum/wiki/wiki/Network-Status#updating", target="_blank", data-toggle="tooltip", data-placement="top", data-html="true", data-original-title="Netstats client needs update.<br>Click this icon for instructions.", class="{{ node.info | nodeClientClass : currentApiVersion }}")
i.icon-warning-o
td.hidden-xs
div.small(ng-bind-html="node.info.node | nodeVersion")
td(class="{{ node.readable.latencyClass }}").hidden-xs
span.small {{ node.readable.latency }}
td(class="{{ node.stats.mining | hashrateClass : node.stats.active }}", ng-bind-html="node.stats.hashrate | hashrateFilter : node.stats.mining").hidden-xs
td(class="{{ node.stats.peers | peerClass : node.stats.active }}", style="padding-left: 11px;") {{node.stats.peers}}
td(style="padding-left: 15px;") {{node.stats.pending}}
td(class="{{ node.stats | blockClass : bestBlock }}").hidden-xs
span(class="{{ node.readable.forkMessage ? node.readable.forkClass : '' }}") {{'#'}}{{ node.stats.block.number | number }}
//- a.small(data-toggle="tooltip", data-placement="top", data-html="true", data-original-title="{{ node.readable.forkMessage }}", class="{{ node.readable.forkClass }}")
i.icon-warning-o
td(class="{{ node.stats | blockClass : bestBlock }}").hidden-xs.hidden-sm.hidden-md
span.small {{node.stats.block.hash | hashFilter}}
td(class="{{ node.stats | blockClass : bestBlock }}").hidden-xs.hidden-sm.hidden-md
span.small {{node.stats.block.totalDifficulty | number}}
td(style="padding-left: 14px;").hidden-xs {{node.stats.block.transactions.length || 0}}
td(style="padding-left: 14px;").hidden-xs {{node.stats.block.uncles.length || 0}}
td(class="{{ node.stats.block.received | timeClass : node.stats.active }}") {{node.stats.block.received | blockTimeFilter }}
td(class="{{ node.stats | propagationTimeClass : bestBlock }}")
div.propagationBox
span {{node.stats.block.propagation | blockPropagationFilter}}
td.peerPropagationChart(class="{{node.id}}")
nodepropagchart(data="{{node.history.join(',')}}")
td(class="{{ node.stats | propagationNodeAvgTimeClass : bestBlock }}").hidden-xs {{ node.stats | blockPropagationAvgFilter : bestBlock }}
td(class="{{ node.stats.uptime | upTimeClass : node.stats.active }}") {{ node.stats.uptime | upTimeFilter }}