CipherLabs
/
ethstats-server
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed layout and css/js for responsive layout.

Browse Source
pull/5/head
hackyminer 7 years ago committed by Ikmyeong Na
parent 6c30c132a4
commit c628e6b62f
No known key found for this signature in database
GPG Key ID: EC674310ADADE2CA
4 changed files with 130 additions and 17 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 54
      src/css/style.css
  2. 59
      src/js/directives.js
  3. 5
      src/js/script.js
  4. 27
      src/views/index.jade

54
src/css/style.css
Unescape View File

@ -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 {
@ -466,3 +468,51 @@ svg .axis text {
svg .y.axis .tick:first-child text {
opacity: 0;
}
@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;
}
}

59
src/js/directives.js
Unescape View File

@ -100,6 +100,24 @@ angular.module('netStatsApp.directives', [])
{
tElement.replaceWith('<span>' + tAttrs.data + "</span>");
// 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 '<div class="tooltip-arrow"></div><div class="tooltip-inner"><b>' + (d.x/1000) + 's - ' + ((d.x + d.dx)/1000) + 's</b><div class="small">Percent: <b>' + Math.round(d.y * 100) + '%</b>' + '<br>Frequency: <b>' + d.frequency + '</b><br>Cumulative: <b>' + Math.round(d.cumpercent*100) + '%</b></div></div>';
})
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);
});
}
};
}]);

5
src/js/script.js
Unescape View File

@ -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;

27
src/views/index.jade
Unescape View File

@ -18,7 +18,7 @@ block content
i.icon-uncle
div.big-details-holder
span.small-title uncles&nbsp;
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&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
@ -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&nbsp;
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 &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
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 }}")

Write Preview
Loading…
Cancel
Save