diff --git a/public/css/style.css b/public/css/style.css index d8e28f2..0868f74 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -10,26 +10,44 @@ body { -moz-font-smoothing: antialiased; } -.bg-success { +.propagationBox { + position: relative; + width: 8px; + height: 8px; + float: left; + top: 8px; + margin-right: 5px; +} + +.bg-success, +.text-success .propagationBox { background: #7bcc3a; } -.bg-info { +.bg-info, +.text-info .propagationBox { background: #10a0de; } -.bg-warning { +.bg-warning, +.text-warning .propagationBox { background: #FFD162; } -.bg-orange { +.bg-orange, +.text-orange .propagationBox { background: #ff8a00; } -.bg-danger { +.bg-danger, +.text-danger .propagationBox { background: #F74B4B; } +.text-gray .propagationBox { + border: 1px solid #777; +} + .bg-success, .bg-info, .bg-warning, diff --git a/public/js/filters.js b/public/js/filters.js index 3ed98e2..0d5e66d 100644 --- a/public/js/filters.js +++ b/public/js/filters.js @@ -92,18 +92,18 @@ angular.module('netStatsApp.filters', []) return 'text-gray'; if(stats.block.propagation == 0) - return 'bg-info'; + return 'text-info'; if(stats.block.propagation < 1000) - return 'bg-success'; + return 'text-success'; if(stats.block.propagation < 3000) - return 'bg-warning'; + return 'text-warning'; if(stats.block.propagation < 7000) - return 'bg-orange'; + return 'text-orange'; - return 'bg-danger' + return 'text-danger' }; }) .filter('latencyFilter', function() { diff --git a/views/index.jade b/views/index.jade index 0d1e34f..15f1147 100644 --- a/views/index.jade +++ b/views/index.jade @@ -151,5 +151,6 @@ block content td(style="padding-left: 14px;") {{node.stats.block.transactions.length || 0}} td(class="{{ node.stats.block.received | timeClass : node.stats.active }}") {{node.stats.block.received | blockTimeFilter }} td(class="{{ node.stats | propagationTimeClass : bestBlock }}") {{node.stats.block.propagation | blockPropagationFilter}} + div.propagationBox td.peerPropagationChart(class="{{node.id}}") td(class="{{ node.stats.uptime | upTimeClass : node.stats.active }}") {{ node.stats.uptime | upTimeFilter }}