improved performance of list of transactions
This commit is contained in:
parent
8710ce410d
commit
88e39d0c1b
|
@ -1,5 +1,5 @@
|
||||||
doctype
|
doctype
|
||||||
html(lang='en', data-ng-app='insight')
|
html(lang='en', data-ng-app='insight' data-ng-csp)
|
||||||
include ../includes/head
|
include ../includes/head
|
||||||
body
|
body
|
||||||
#wrap
|
#wrap
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
/* Sticky footer styles
|
/* Sticky footer styles
|
||||||
-------------------------------------------------- */
|
-------------------------------------------------- */
|
||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
color: #373D42;
|
color: #373D42;
|
||||||
|
@ -13,6 +15,12 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||||
font-family: 'Ubuntu', sans-serif;
|
font-family: 'Ubuntu', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
|
||||||
|
.ng-cloak, .x-ng-cloak,
|
||||||
|
.ng-hide {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Styling for the ngProgress itself */
|
/* Styling for the ngProgress itself */
|
||||||
#ngProgress {
|
#ngProgress {
|
||||||
background-color: #373D42 !important;
|
background-color: #373D42 !important;
|
||||||
|
|
|
@ -1 +1,9 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('insight')
|
||||||
|
.filter('startFrom', function() {
|
||||||
|
return function(input, start) {
|
||||||
|
start = +start; //parse to int
|
||||||
|
return input.slice(start);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="line-bot row">
|
<div class="line-bot row ng-clock" data-ng-hide="!tx" data-ng-cloak>
|
||||||
<div class="col-xs-12 col-md-6">
|
<div class="col-xs-12 col-md-6">
|
||||||
<button class="btn-expand pull-left" data-ng-click="itemsExpanded = !itemsExpanded"><span class="glyphicon glyphicon-plus" data-ng-class="{'glyphicon-minus': itemsExpanded}" tooltip="Show/Hide items details" tooltip-placement="right"></span></button>
|
<button class="btn-expand pull-left" data-ng-click="itemsExpanded = !itemsExpanded"><span class="glyphicon glyphicon-plus" data-ng-class="{'glyphicon-minus': itemsExpanded}" tooltip="Show/Hide items details" tooltip-placement="right"></span></button>
|
||||||
<button class="btn-copy pull-right" clip-copy="tx.txid"></button>
|
<button class="btn-copy pull-right" clip-copy="tx.txid"></button>
|
||||||
|
@ -18,16 +18,19 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="row line-mid">
|
<div class="row line-mid">
|
||||||
<div class="col-md-5">
|
<div class="col-md-5">
|
||||||
<div class="row" data-ng-show="tx.isCoinBase">
|
<div class="row" data-ng-if="tx.isCoinBase">
|
||||||
<div class="col-md-12 transaction-vin-vout" data-ng-repeat="vin in tx.vin">
|
<div class="col-md-12 transaction-vin-vout" data-ng-repeat="vin in tx.vin">
|
||||||
<div class="ellipsis">
|
<div class="ellipsis">
|
||||||
<span>No Inputs (Newly Generated Coins)</span>
|
<span>No Inputs (Newly Generated Coins)</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" data-ng-show="!tx.isCoinBase">
|
<div class="row" data-ng-if="!tx.isCoinBase">
|
||||||
<div data-ng-repeat="vin in tx.vinSimple" data-ng-class="{ 'hidden': itemsExpanded}">
|
|
||||||
<div class="col-md-12 transaction-vin-vout" data-ng-class="{ 'hidden': $index > 5 && !showMoreIn }">
|
<!-- Simple view -->
|
||||||
|
<div data-ng-if="!itemsExpanded" data-ng-init="currentInNoExpanded=0; sizeInNoExpanded=5">
|
||||||
|
<div data-ng-repeat="vin in tx.vinSimple| startFrom:currentInNoExpanded*sizeInNoExpanded | limitTo:sizeInNoExpanded">
|
||||||
|
<div class="col-md-12 transaction-vin-vout">
|
||||||
<div class="text-muted pull-right btc-value" data-ng-class="{'text-danger': $root.currentAddr == vin.addr}"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
|
<div class="text-muted pull-right btc-value" data-ng-class="{'text-danger': $root.currentAddr == vin.addr}"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
|
||||||
<div class="ellipsis">
|
<div class="ellipsis">
|
||||||
<span data-ng-show="vin.notAddr">{{vin.addr}}</span>
|
<span data-ng-show="vin.notAddr">{{vin.addr}}</span>
|
||||||
|
@ -41,8 +44,15 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div data-ng-repeat="vin in tx.vin" data-ng-class="{ 'hidden': !itemsExpanded }">
|
<div class="showmore_collapse text-center" data-ng-show="tx.vinSimple.length > 5" data-ng-class="{ 'hidden': itemsExpanded}">
|
||||||
<div data-ng-class="{ 'hidden': $index > 5 && !showMoreIn }">
|
<a href="#" ng-hide="sizeInNoExpanded != tx.vinSimple.length" ng-click="currentInNoExpanded=0; sizeInNoExpanded=5">...less</a>
|
||||||
|
<a href="#" ng-hide="currentInNoExpanded >= tx.vinSimple.length/sizeInNoExpanded - 1" ng-click="currentInNoExpanded=0; sizeInNoExpanded=tx.vinSimple.length">more...</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Full view -->
|
||||||
|
<div data-ng-if="itemsExpanded" data-ng-init="currentInExpanded=0; sizeInExpanded=5">
|
||||||
|
<div data-ng-repeat="vin in tx.vin| startFrom:currentInExpanded*sizeInExpanded | limitTo:sizeInExpanded">
|
||||||
<div class="col-md-12 transaction-vin-vout">
|
<div class="col-md-12 transaction-vin-vout">
|
||||||
<div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
|
<div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
|
||||||
<div class="ellipsis">
|
<div class="ellipsis">
|
||||||
|
@ -68,10 +78,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="showmore_collapse text-center" data-ng-show="tx.vin.length > 5" data-ng-class="{ 'hidden': !itemsExpanded}">
|
||||||
|
<a href="#" ng-hide="sizeInExpanded != tx.vin.length" ng-click="currentInExpanded=0; sizeInExpanded=5">...less</a>
|
||||||
|
<a href="#" ng-hide="currentInExpanded >= tx.vin.length/sizeInExpanded - 1" ng-click="currentInExpanded=0; sizeInExpanded=tx.vin.length">more...</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="showmore_collapse text-center" data-ng-show="tx.vin.length > 6">
|
|
||||||
<a href="#" data-ng-show="!showMoreIn" data-ng-click="showMoreIn = !showMoreIn">more...</a>
|
|
||||||
<a href="#" data-ng-show="showMoreIn" data-ng-click="showMoreIn = !showMoreIn">...less</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -83,8 +93,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div data-ng-repeat="vout in tx.voutSimple" data-ng-class="{ 'hidden': itemsExpanded}">
|
|
||||||
<div class="col-md-12 transaction-vin-vout" data-ng-class="{ 'hidden': $index > 5 && !showMoreOut }">
|
<!-- Simple view -->
|
||||||
|
<div data-ng-if="!itemsExpanded" data-ng-init="currentOutNoExpanded=0; sizeOutNoExpanded=5">
|
||||||
|
<div data-ng-repeat="vout in tx.voutSimple| startFrom:currentOutNoExpanded*sizeOutNoExpanded | limitTo:sizeOutNoExpanded">
|
||||||
|
<div class="col-md-12 transaction-vin-vout">
|
||||||
<div class="text-muted pull-right btc-value" data-ng-class="{'text-success': $root.currentAddr == vout.addr}">
|
<div class="text-muted pull-right btc-value" data-ng-class="{'text-success': $root.currentAddr == vout.addr}">
|
||||||
|
|
||||||
<small>
|
<small>
|
||||||
|
@ -99,12 +112,17 @@
|
||||||
<span class="text-muted" title="Current Bitcoin Address" data-ng-show="address == $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{vout.addr}}</span>
|
<span class="text-muted" title="Current Bitcoin Address" data-ng-show="address == $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{vout.addr}}</span>
|
||||||
<a href="/address/{{address}}" data-ng-show="!vout.notAddr && address != $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{address}}</a>
|
<a href="/address/{{address}}" data-ng-show="!vout.notAddr && address != $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{address}}</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div data-ng-repeat="vout in tx.vout" data-ng-class="{ 'hidden': !itemsExpanded}">
|
<div class="showmore_collapse text-center" data-ng-show="tx.voutSimple.length > 5" data-ng-class="{ 'hidden': itemsExpanded}">
|
||||||
<div data-ng-class="{ 'hidden': $index > 5 && !showMoreOut }">
|
<a href="#" ng-hide="sizeOutNoExpanded != tx.voutSimple.length" ng-click="currentOutNoExpanded=0; sizeOutNoExpanded=5">...less</a>
|
||||||
|
<a href="#" ng-hide="currentOutNoExpanded >= tx.voutSimple.length/sizeOutNoExpanded - 1" ng-click="currentOutNoExpanded=0; sizeOutNoExpanded=tx.voutSimple.length">more...</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Full view -->
|
||||||
|
<div data-ng-if="itemsExpanded" data-ng-init="currentOutExpanded=0; sizeOutExpanded=5">
|
||||||
|
<div data-ng-repeat="vout in tx.vout| startFrom:currentOutExpanded*sizeOutExpanded | limitTo:sizeOutExpanded">
|
||||||
<div class="col-md-12 transaction-vin-vout">
|
<div class="col-md-12 transaction-vin-vout">
|
||||||
<div class="text-muted pull-right btc-value">
|
<div class="text-muted pull-right btc-value">
|
||||||
<small>{{$root.currency.getConvertion(vout.value)}}
|
<small>{{$root.currency.getConvertion(vout.value)}}
|
||||||
|
@ -133,10 +151,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="showmore_collapse text-center" data-ng-show="tx.vout.length > 5" data-ng-class="{ 'hidden': !itemsExpanded}">
|
||||||
|
<a href="#" ng-hide="sizeOutExpanded != tx.vout.length" ng-click="currentOutExpanded=0; sizeOutExpanded=5">...less</a>
|
||||||
|
<a href="#" ng-hide="currentOutExpanded >= tx.vout.length/sizeOutExpanded - 1" ng-click="currentOutExpanded=0; sizeOutExpanded=tx.vout.length">more...</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="showmore_collapse text-center" data-ng-show="tx.vout.length > 6">
|
|
||||||
<a href="#" data-ng-show="!showMoreOut" data-ng-click="showMoreOut = !showMoreOut">more...</a>
|
|
||||||
<a href="#" data-ng-show="showMoreOut" data-ng-click="showMoreOut = !showMoreOut">...less</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -150,7 +168,7 @@
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line-top row">
|
<div class="line-top row ng-cloak" data-ng-hide="!tx" data-ng-cloak>
|
||||||
<div class="col-xs-12 col-sm-4 col-md-4">
|
<div class="col-xs-12 col-sm-4 col-md-4">
|
||||||
<span data-ng-show="!tx.isCoinBase && !isNaN(parseFloat(tx.fees))" class="txvalues txvalues-default">Fees: {{$root.currency.getConvertion(tx.fees)}} </span>
|
<span data-ng-show="!tx.isCoinBase && !isNaN(parseFloat(tx.fees))" class="txvalues txvalues-default">Fees: {{$root.currency.getConvertion(tx.fees)}} </span>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue