diff --git a/src/css/style.css b/src/css/style.css index f8ca299..47b5649 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -147,9 +147,9 @@ span.small-title span.small { } .big-info.chart .big-details { - display: block; - position: absolute; + display: table; top: 40px; + margin: 0 auto; } .big-info.chart { @@ -166,6 +166,8 @@ span.small-title span.small { width: 288px; padding-top: 6px; margin-left: -2px; + display: table; + margin: 0 auto; } .blocks-holder { @@ -465,4 +467,52 @@ svg .axis text { svg .y.axis .tick:first-child text { opacity: 0; -} \ No newline at end of file +} + +@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; + } +} diff --git a/src/js/directives.js b/src/js/directives.js index b71c62b..19bb3ec 100644 --- a/src/js/directives.js +++ b/src/js/directives.js @@ -100,6 +100,24 @@ angular.module('netStatsApp.directives', []) { tElement.replaceWith('' + tAttrs.data + ""); + // register resize watcher + var timeout; + var width; + $(window).on('resize', function(e) { + if( $('body').width() < 600 ) + width = 4; + else if( $('body').width() < 1200 ) + width = 5; + else + width = 6; + + if(timeout) + clearTimeout(timeout); + timeout = setTimeout(function() { + $.fn.sparkline.defaults.bar.barWidth = width; + }, 200); + }); + return function(scope, element, attrs) { attrs.$observe("data", function (newValue) @@ -302,6 +320,12 @@ angular.module('netStatsApp.directives', []) var width = 280 - margin.left - margin.right, height = 63 - margin.top - margin.bottom; + // fix for mobile devices + if( $('body').width() < 600 ) + width = 200 - margin.left - margin.right; + else( $('body').width() < 1200 ) + width = 240 - margin.left - margin.right; + var TICKS = 40; var x = d3.scale.linear() @@ -342,10 +366,26 @@ angular.module('netStatsApp.directives', []) return '
' + (d.x/1000) + 's - ' + ((d.x + d.dx)/1000) + 's
Percent: ' + Math.round(d.y * 100) + '%' + '
Frequency: ' + d.frequency + '
Cumulative: ' + Math.round(d.cumpercent*100) + '%
'; }) - scope.init = function() + scope.init = function(width) { var data = scope.data; + var x = d3.scale.linear() + .domain([0, 10000]) + .rangeRound([0, width]) + .interpolate(d3.interpolateRound); + + var xAxis = d3.svg.axis() + .scale(x) + .orient("bottom") + .ticks(4, ",.1s") + .tickFormat(function(t){ return t/1000 + "s"}); + + var line = d3.svg.line() + .x(function(d) { return x(d.x + d.dx/2) - 1; }) + .y(function(d) { return y(d.y) - 2; }) + .interpolate('basis'); + // Adjust y axis y.domain([0, d3.max(data, function(d) { return d.y; })]); @@ -414,9 +454,24 @@ angular.module('netStatsApp.directives', []) scope.$watch('data', function() { if(scope.data.length > 0) { - scope.init(); + scope.init(width); } }, true); + + var timeout; + $(window).on('resize', function(e) { + var width = 280 - margin.left - margin.right; + if( $('body').width() < 768 ) + width = 200 - margin.left - margin.right; + + if(timeout) + clearTimeout(timeout); + + timeout = setTimeout(function() { + // redraw + scope.init(width); + }, 200); + }); } }; }]); \ No newline at end of file diff --git a/src/js/script.js b/src/js/script.js index 469b20f..ff9157f 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -7,6 +7,11 @@ $.fn.sparkline.defaults.bar.height = 63; $.fn.sparkline.defaults.bar.barWidth = 6; + + if( $('body').width() < 600 ) + $.fn.sparkline.defaults.bar.barWidth = 4; + else if( $('body').width() < 1200 ) + $.fn.sparkline.defaults.bar.barWidth = 5; $.fn.sparkline.defaults.bar.barSpacing = 1; $.fn.sparkline.defaults.bar.tooltipClassname = 'jqstooltip'; $.fn.sparkline.defaults.bar.tooltipOffsetX = 0; diff --git a/src/views/index.jade b/src/views/index.jade index b47db46..6c02255 100644 --- a/src/views/index.jade +++ b/src/views/index.jade @@ -18,7 +18,7 @@ block content i.icon-uncle div.big-details-holder span.small-title uncles  - span.small (current / last 50) + 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 @@ -43,7 +43,10 @@ block content div.pull-left.icon-full-width i.icon-hashrate div.big-details-holder - span.small-title avg network hashrate + span.small-title + span.hidden-xs avg  + | 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 @@ -87,7 +90,7 @@ block content i.icon-bulb span.small-title uptime span.small-value {{ upTimeTotal | upTimeFilter }} - div.col-sm-6.col-md-6.col-lg-2.stat-holder.box + 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 @@ -127,7 +130,7 @@ block content div.big-info.chart.text-info //- i.icon-uncle span.small-title uncle count  - span.small (25 blocks per bar) + span.small.hidden-xs (25 blocks per bar) //- span.small-value {{ bestStats.block.uncles.length }}/{{ uncleCount }} sparkchart.big-details.spark-uncles(data="{{uncleCountChart.join(',')}}") @@ -184,20 +187,20 @@ block content 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 + th.th-latency.hidden-xs i.icon-clock(data-toggle="tooltip", data-placement="top", title="Node latency", ng-click="orderTable(['stats.latency'], false)") - th + 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 + 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   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 + 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)") @@ -221,12 +224,12 @@ block content i.icon-warning-o td.hidden-xs div.small(ng-bind-html="node.info.node | nodeVersion") - td(class="{{ node.readable.latencyClass }}") + 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") + 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 }}") + 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 @@ -234,7 +237,7 @@ block content 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;") {{node.stats.block.transactions.length || 0}} + 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 }}")