Merge pull request #399 from cmgustavo/feature/01fix-layout
Feature/01fix layout
This commit is contained in:
Matias Alejo Garcia
commit
94249a214d
|
|
@ -71,6 +71,10 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
|||
|
||||
.vm { vertical-align: middle; }
|
||||
|
||||
.bgwhite {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
@ -113,7 +117,6 @@ margin-left: 0;
|
|||
}
|
||||
|
||||
.navbar-form {
|
||||
margin-left: 20px;
|
||||
width: 35%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
|
@ -123,11 +126,11 @@ margin-left: 0;
|
|||
margin: 0;
|
||||
}
|
||||
.navbar-form {
|
||||
width: 20%;
|
||||
width: 15%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 767px) {
|
||||
.navbar-form {
|
||||
width: auto;
|
||||
}
|
||||
|
|
@ -142,6 +145,7 @@ margin-left: 0;
|
|||
font-size: 34px;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
|
||||
|
|
@ -150,7 +154,6 @@ margin-left: 0;
|
|||
|
||||
.navbar-default .navbar-brand {
|
||||
color: #FFFFFF;
|
||||
margin-right: 20px;
|
||||
padding: 22px 15px;
|
||||
}
|
||||
|
||||
|
|
@ -207,6 +210,7 @@ margin-left: 0;
|
|||
font-size: 12px;
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.status .tooltip {
|
||||
|
|
@ -388,6 +392,13 @@ margin-left: 0;
|
|||
background-color: #AC0015;
|
||||
}
|
||||
|
||||
.txvalues-normal {
|
||||
background-color: transparent;
|
||||
text-transform: none;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.progress-bar-info { background-color: #8DC429; }
|
||||
|
||||
/* Set the fixed height of the footer here */
|
||||
|
|
@ -511,38 +522,37 @@ margin-left: 0;
|
|||
color: black;
|
||||
}
|
||||
|
||||
.btn-copy, .btn-expand {
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
border: 2px solid #E4E4E4;
|
||||
.btn-copy {
|
||||
color: #9b9b9b;
|
||||
display: inline-block;
|
||||
height: 25px;
|
||||
padding: 0;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
width: 30px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.btn-expand {
|
||||
color: #9b9b9b;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.btn-copy:hover, .btn-expand:hover {
|
||||
background-color: #f2f2f2;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-copy {
|
||||
background: #fff url('/img/icons/copy.png') center center no-repeat;
|
||||
margin-left: 5px;
|
||||
background: transparent url('/img/icons/copy.png') center center no-repeat;
|
||||
}
|
||||
|
||||
.btn-copy .tooltip {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
display: block;
|
||||
margin-left: 20px;
|
||||
margin-top: -2px;
|
||||
opacity: 0;
|
||||
}
|
||||
.btn-copy.zeroclipboard-is-hover { color: #2a6496; }
|
||||
.btn-copy.zeroclipboard-is-active .tooltip { opacity: 1; }
|
||||
.btn-expand { margin-right: 5px; }
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.btn-copy {
|
||||
|
|
@ -658,3 +668,15 @@ a.v_highlight_more {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.secondary_navbar {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
left: 0;
|
||||
border: 1px solid #eee;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,18 @@
|
|||
var ZeroClipboard = window.ZeroClipboard;
|
||||
|
||||
angular.module('insight')
|
||||
.directive("scroll", function ($window) {
|
||||
return function(scope, element, attrs) {
|
||||
angular.element($window).bind("scroll", function() {
|
||||
if (this.pageYOffset >= 200) {
|
||||
scope.secondaryNavbar = true;
|
||||
} else {
|
||||
scope.secondaryNavbar = false;
|
||||
}
|
||||
scope.$apply();
|
||||
});
|
||||
};
|
||||
})
|
||||
.directive('whenScrolled', function($window) {
|
||||
return {
|
||||
restric: 'A',
|
||||
|
|
|
|||
|
|
@ -1,70 +1,76 @@
|
|||
<div data-ng-include src="'/views/includes/connection.html'"></div>
|
||||
<section data-ng-controller="AddressController" data-ng-init="findOne()">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-gray col-gray-fixed">
|
||||
<h1 class="text-center">Address</h1>
|
||||
<div class="m20v text-center text-muted" data-ng-if="!address.addrStr">
|
||||
<span>Loading Address Information...</span>
|
||||
</div>
|
||||
<div class="ng-cloak" data-ng-cloak data-ng-if="address.addrStr">
|
||||
<div class="text-center">
|
||||
<qrcode size="160" data="{{address.addrStr}}"></qrcode>
|
||||
<h4>{{$root.currency.getConvertion(address.balance)}}</h4>
|
||||
</div>
|
||||
<div class="m10v">
|
||||
<button class="pull-right btn-copy" clip-copy="address.addrStr"></button>
|
||||
<a class="ellipsis" href="/address/{{address.addrStr}}">{{address.addrStr}}</a>
|
||||
</div>
|
||||
<div class="m20v">
|
||||
<h4>Summary</h4>
|
||||
<h5>Confirmed</h5>
|
||||
<table class="table ng-cloak" data-ng-hide="!address.addrStr" data-ng-cloak>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="small">Total Received</td>
|
||||
<td class="address ellipsis text-right">{{$root.currency.getConvertion(address.totalReceived)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">Total Sent</td>
|
||||
<td class="address ellipsis text-right">{{$root.currency.getConvertion(address.totalSent)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">Final Balance</td>
|
||||
<td class="address ellipsis text-right">{{$root.currency.getConvertion(address.balance)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">No. Transactions</td>
|
||||
<td class="address ellipsis text-right">{{address.txApperances}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div data-ng-show="address.unconfirmedTxApperances">
|
||||
<h5>Unconfirmed</h5>
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="small">Unconfirmed Txs Balance</td>
|
||||
<td class="address ellipsis text-right">{{$root.currency.getConvertion(address.unconfirmedBalance)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">No. Transactions</td>
|
||||
<td class="address ellipsis text-right">{{address.unconfirmedTxApperances}}</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div> <!-- END OF TRANSACTIONS TABLE -->
|
||||
<div class="secondary_navbar" scroll data-ng-class="{'hidden': !secondaryNavbar}" data-ng-show="address.addrStr">
|
||||
<div class="row">
|
||||
<div class="col-md-8 text-center">
|
||||
<span class="ellipsis txvalues txvalues-normal">
|
||||
<strong>Address</strong> {{address.addrStr}}
|
||||
<span class="btn-copy" clip-copy="address.addrStr"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div data-ng-include src="'/views/includes/currency.html'"></div>
|
||||
</div> <!-- END OF COL-MD-3 -->
|
||||
<div class="col-xs-12 col-md-9 col-md-offset-3">
|
||||
<div data-ng-controller="transactionsController" data-ng-init="load('address')">
|
||||
<h2>Transactions <small>Transactions for this address</small></h2>
|
||||
<div data-ng-include src="'/views/transaction/list.html'" when-scrolled="loadMore()"></div>
|
||||
<div class="col-md-4">
|
||||
<span class="txvalues txvalues-primary"><strong>Final Balance</strong> {{$root.currency.getConvertion(address.balance) || address.balance + ' BTC' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- END OF ROW -->
|
||||
</div>
|
||||
<h1>Address <small data-ng-show="address.addrStr">{{$root.currency.getConvertion(address.balance) || address.balance + ' BTC'}}</small></h1>
|
||||
<div class="text-muted" data-ng-if="!address.addrStr">
|
||||
<span>Loading Address Information...</span>
|
||||
</div>
|
||||
<div data-ng-if="address.addrStr">
|
||||
<div class="well well-sm ellipsis">
|
||||
<strong>Address</strong>
|
||||
<span class="text-muted">{{address.addrStr}}</span>
|
||||
<span class="btn-copy" clip-copy="address.addrStr"></span>
|
||||
</div>
|
||||
<h2>Summary <small>confirmed</small></h2>
|
||||
<div class="ng-cloak row" data-ng-hide="!address.addrStr" data-ng-cloak>
|
||||
<div class="col-md-10">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Total Received</strong></td>
|
||||
<td class="ellipsis text-right">{{$root.currency.getConvertion(address.totalReceived) || address.totalReceived + ' BTC'}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Total Sent</strong></td>
|
||||
<td class="ellipsis text-right">{{$root.currency.getConvertion(address.totalSent) || address.totalSent + ' BTC'}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Final Balance</strong></td>
|
||||
<td class="ellipsis text-right">{{$root.currency.getConvertion(address.balance) || address.balance + ' BTC'}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>No. Transactions</strong></td>
|
||||
<td class="ellipsis text-right">{{address.txApperances}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-md-2 text-center">
|
||||
<qrcode size="160" data="{{address.addrStr}}"></qrcode>
|
||||
</div>
|
||||
</div>
|
||||
<div data-ng-show="address.unconfirmedTxApperances">
|
||||
<h3>Unconfirmed</h3>
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="small">Unconfirmed Txs Balance</td>
|
||||
<td class="address ellipsis text-right">{{$root.currency.getConvertion(address.unconfirmedBalance)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">No. Transactions</td>
|
||||
<td class="address ellipsis text-right">{{address.unconfirmedTxApperances}}</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Transactions</h2>
|
||||
<div data-ng-controller="transactionsController" data-ng-init="load('address')">
|
||||
<div data-ng-include src="'/views/transaction/list.html'" when-scrolled="loadMore()"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,118 +1,119 @@
|
|||
<div data-ng-include src="'/views/includes/connection.html'"></div>
|
||||
<section data-ng-controller="BlocksController" data-ng-init="findOne()">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-gray col-gray-fixed">
|
||||
<div class="m20v text-center text-muted" data-ng-if="!block.hash">
|
||||
<span>Loading Block...</span>
|
||||
</div>
|
||||
<div class="ng-cloak" data-ng-cloak data-ng-if="block.hash">
|
||||
<div class="block-id">
|
||||
<span class="glyphicon glyphicon-list-alt"></span>
|
||||
<h2 data-ng-if="block">#{{block.height}}</h2>
|
||||
</div>
|
||||
<div class="m10v">
|
||||
<button class="pull-right btn-copy" clip-copy="block.hash"></button>
|
||||
<a class="ellipsis" href="/block/{{block.hash}}">{{block.hash}}</a>
|
||||
</div>
|
||||
<div class="m20v" data-ng-show="!tx.isCoinBase">
|
||||
<table class="table" style="table-layout: fixed">
|
||||
<tbody class="small">
|
||||
<tr data-ng-show="block.previousblockhash">
|
||||
<td> Previous Block</td>
|
||||
<td class="text-right"><a href="/block/{{block.previousblockhash}}">{{block.height-1}}</a></td>
|
||||
</tr>
|
||||
<tr data-ng-show="block.nextblockhash">
|
||||
<td> Next Block</td>
|
||||
<td class="text-right"><a href="/block/{{block.nextblockhash}}">{{block.height+1}}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div> <!-- END OF TRANSACTIONS TABLE -->
|
||||
<div class="secondary_navbar" scroll data-ng-class="{'hidden': !secondaryNavbar}">
|
||||
<div class="row">
|
||||
<div class="col-md-2 text-right">
|
||||
<span class="ellipsis txvalues txvalues-normal">
|
||||
<a href="/block/{{block.previousblockhash}}">← Previous Block</a>
|
||||
</span>
|
||||
</div>
|
||||
<div data-ng-include src="'/views/includes/currency.html'"></div>
|
||||
</div> <!-- END OF COL-GRAY -->
|
||||
|
||||
<div class="col-xs-12 col-md-9 col-md-offset-3">
|
||||
<h1>Block #{{block.height}}</h1>
|
||||
<h3>Summary</h3>
|
||||
<div class="progress progress-striped active" data-ng-if="!block.hash">
|
||||
<div class="progress-bar progress-bar-info" style="width: 100%">
|
||||
<span>Loading Block Details...</span>
|
||||
<div class="col-md-8 text-center">
|
||||
<div class="ellipsis txvalues txvalues-normal">
|
||||
<strong>Block</strong> #{{block.height}} ·
|
||||
<strong>Hash</strong> {{block.hash}}
|
||||
<span class="btn-copy" clip-copy="block.hash"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row ng-cloak" data-ng-cloak data-ng-if="block.hash">
|
||||
<div class="col-md-6">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Number Of Transactions</strong></td>
|
||||
<td class="text-right text-muted">{{block.tx.length}}<td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Height</strong></td>
|
||||
<td class="text-right text-muted">{{block.height}}
|
||||
<span data-ng-show="block.isMainChain" class="text-success">(Mainchain)</span>
|
||||
<span data-ng-show="!block.isMainChain" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> (Orphaned)</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Block Reward</strong></td>
|
||||
<td class="text-right text-muted">{{$root.currency.getConvertion(block.reward)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Timestamp</strong></td>
|
||||
<td class="text-right text-muted">{{block.time * 1000 | date:'medium'}}</td>
|
||||
</tr>
|
||||
<tr data-ng-show="block.poolInfo">
|
||||
<td><strong>Mined by</strong></td>
|
||||
<td class="text-right text-muted">
|
||||
<a href="{{block.poolInfo.url}}" target="_blank" title="{{block.poolInfo.poolName}}">{{block.poolInfo.poolName}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Merkle Root</strong></td>
|
||||
<td class="text-right text-muted">
|
||||
<button class="pull-right btn-copy" clip-copy="block.merkleroot"></button>
|
||||
<span class="ellipsis" style="width:155px">{{block.merkleroot}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td> <strong> Difficulty </strong></td>
|
||||
<td class="text-right text-muted">{{block.difficulty}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <strong> Bits </strong></td>
|
||||
<td class="text-right text-muted">{{block.bits}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <strong> Size (bytes) </strong></td>
|
||||
<td class="text-right text-muted">{{block.size}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <strong> Version </strong></td>
|
||||
<td class="text-right text-muted">{{block.version}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <strong> Nonce </strong></td>
|
||||
<td class="text-right text-muted">{{block.nonce}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div><!-- END OF ROW -->
|
||||
|
||||
<div data-ng-controller="transactionsController" data-ng-init="load('block')">
|
||||
<h3>Transactions</h3>
|
||||
<div data-ng-include src="'/views/transaction/list.html'" when-scrolled="loadMore()"></div>
|
||||
<div class="col-md-2 text-left">
|
||||
<span class="ellipsis txvalues txvalues-normal">
|
||||
<a href="/block/{{block.nextblockhash}}">Next Block →</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1>Block #{{block.height}}</h1>
|
||||
<div class="progress progress-striped active" data-ng-if="!block.hash">
|
||||
<div class="progress-bar progress-bar-info" style="width: 100%">
|
||||
<span>Loading Block...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row ng-cloak" data-ng-cloak data-ng-if="block.hash">
|
||||
<div class="well well-sm ellipsis">
|
||||
<strong>BlockHash</strong>
|
||||
<span class="txid text-muted">{{block.hash}}</span>
|
||||
<span class="btn-copy" clip-copy="block.hash"></span>
|
||||
</div>
|
||||
<h2>Summary</h2>
|
||||
<div class="col-md-6">
|
||||
<table class="table" style="table-layout: fixed">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Number Of Transactions</strong></td>
|
||||
<td class="text-right text-muted">{{block.tx.length}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Height</strong></td>
|
||||
<td class="text-right text-muted">{{block.height}}
|
||||
<span data-ng-show="block.isMainChain" class="text-success">(Mainchain)</span>
|
||||
<span data-ng-show="!block.isMainChain" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> (Orphaned)</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Block Reward</strong></td>
|
||||
<td class="text-right text-muted">{{$root.currency.getConvertion(block.reward) || block.reward + ' BTC'}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Timestamp</strong></td>
|
||||
<td class="text-right text-muted">{{block.time * 1000 | date:'medium'}}</td>
|
||||
</tr>
|
||||
<tr data-ng-show="block.poolInfo">
|
||||
<td><strong>Mined by</strong></td>
|
||||
<td class="text-right text-muted">
|
||||
<a href="{{block.poolInfo.url}}" target="_blank" title="{{block.poolInfo.poolName}}">{{block.poolInfo.poolName}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Merkle Root</strong></td>
|
||||
<td class="text-right text-muted">
|
||||
<div class="ellipsis">
|
||||
<span class="btn-copy" clip-copy="block.merkleroot"></span>
|
||||
<span>{{block.merkleroot}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr data-ng-show="block.previousblockhash">
|
||||
<td><strong>Previous Block</strong></td>
|
||||
<td class="text-right"><a href="/block/{{block.previousblockhash}}">{{block.height-1}}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td> <strong> Difficulty </strong></td>
|
||||
<td class="text-right text-muted">{{block.difficulty}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <strong> Bits </strong></td>
|
||||
<td class="text-right text-muted">{{block.bits}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <strong> Size (bytes) </strong></td>
|
||||
<td class="text-right text-muted">{{block.size}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <strong> Version </strong></td>
|
||||
<td class="text-right text-muted">{{block.version}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> <strong> Nonce </strong></td>
|
||||
<td class="text-right text-muted">{{block.nonce}}</td>
|
||||
</tr>
|
||||
<tr data-ng-show="block.nextblockhash">
|
||||
<td><strong>Next Block</strong></td>
|
||||
<td class="text-right"><a href="/block/{{block.nextblockhash}}">{{block.height+1}}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div><!-- END OF ROW -->
|
||||
|
||||
<div data-ng-controller="transactionsController" data-ng-init="load('block')">
|
||||
<h3>Transactions</h3>
|
||||
<div data-ng-include src="'/views/transaction/list.html'" when-scrolled="loadMore()"></div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
<div class="text-center">
|
||||
<small class="text-muted">Currency:</small>
|
||||
<div class="btn-group currency m10l" data-ng-controller="CurrencyController">
|
||||
|
||||
<a href="#" type="button" class="btn btn-default btn-sm" data-ng-click="setCurrency('USD')" data-ng-class="{active: currency.symbol == 'USD'}" tooltip="Change to USD: Bitstamp ${{currency.bitstamp}}"> <small>USD </small></a>
|
||||
<a href="#" type="button" class="btn btn-default btn-sm" data-ng-click="setCurrency('BTC')" data-ng-class="{active: currency.symbol == 'BTC'}" tooltip="Change to BTC"><small>BTC</small></a>
|
||||
<a href="#" type="button" class="btn btn-default btn-sm" data-ng-click="setCurrency('mBTC')" data-ng-class="{active: currency.symbol == 'mBTC'}" tooltip="Change to mBTC"><small>mBTC</small></a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
{{currency.symbol}} <span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#" data-ng-click="setCurrency('USD')" data-ng-class="{active: currency.symbol == 'USD'}">USD</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" data-ng-click="setCurrency('BTC')" data-ng-class="{active: currency.symbol == 'BTC'}">BTC</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" data-ng-click="setCurrency('mBTC')" data-ng-class="{active: currency.symbol == 'mBTC'}">mBTC</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@
|
|||
<strong>Height</strong> {{totalBlocks || info.blocks}}
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown" data-ng-controller="CurrencyController" data-ng-include src="'/views/includes/currency.html'"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,60 +1,62 @@
|
|||
<div data-ng-include src="'/views/includes/connection.html'"></div>
|
||||
<section data-ng-controller="transactionsController" data-ng-init="findThis()">
|
||||
|
||||
<div class="row ng-cloak" data-ng-cloak data-ng-if="tx.txid">
|
||||
<div class="col-xs-12 col-gray col-gray-fixed">
|
||||
<div class="m20v text-center text-muted" data-ng-if="!tx.txid">
|
||||
<span>Loading Transaction...</span>
|
||||
<div class="secondary_navbar" scroll data-ng-class="{'hidden': !secondaryNavbar}">
|
||||
<div class="row">
|
||||
<div class="col-md-8 text-center">
|
||||
<span class="ellipsis txvalues txvalues-normal">
|
||||
<strong>Transaction</strong> {{tx.txid}}
|
||||
<span class="btn-copy" clip-copy="tx.txid"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ng-cloak" data-ng-cloak data-ng-if="tx.txid">
|
||||
<div class="tx-id">
|
||||
<span class="glyphicon glyphicon-retweet"></span>
|
||||
</div>
|
||||
<div class="m10v">
|
||||
<button class="btn-copy pull-right" clip-copy="tx.txid"></button>
|
||||
<div class="ellipsis">
|
||||
<a class="txid" href="/tx/{{tx.txid}}">{{tx.txid}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<h4>Summary</h4>
|
||||
<table class="table" style="table-layout: fixed">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong> Size </strong></td>
|
||||
<td class="text-muted text-right">{{tx.size}} (bytes)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Received Time </strong></td>
|
||||
<td data-ng-show="tx.firstSeenTs" class="text-muted text-right">{{tx.firstSeenTs * 1000|date:'medium'}}</td>
|
||||
<td data-ng-show="!tx.firstSeenTs" class="text-muted text-right">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Mined Time </strong></td>
|
||||
<td data-ng-show="tx.time" class="text-muted text-right">{{tx.time * 1000|date:'medium'}}</td>
|
||||
<td data-ng-show="!tx.time" class="text-muted text-right">N/A</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="col-md-4">
|
||||
<span data-ng-show="tx.confirmations" class="txvalues txvalues-success">{{tx.confirmations}} Confirmations</span>
|
||||
<span data-ng-show="!tx.confirmations" class="txvalues txvalues-danger">Unconfirmed Transaction!</span>
|
||||
<span class="txvalues txvalues-primary">{{$root.currency.getConvertion(tx.valueOut) || tx.valueOut + ' BTC' }}</span>
|
||||
</div>
|
||||
<div data-ng-include src="'/views/includes/currency.html'"></div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-9 col-md-offset-3">
|
||||
<h1>Transaction
|
||||
</div>
|
||||
<div class="ng-cloak" data-ng-cloak data-ng-if="tx.txid">
|
||||
<h1>Transaction
|
||||
<small data-ng-show="from_vin || from_vout">
|
||||
<span data-ng-show="from_vin">Input</span>
|
||||
<span data-ng-show="from_vout">Output</span>
|
||||
<span>{{v_index}}</span>
|
||||
<span>{{v_index}}</span>
|
||||
</small>
|
||||
</h1>
|
||||
<div class="progress progress-striped active" data-ng-if="!tx.txid">
|
||||
<div class="progress-bar progress-bar-info" style="width: 100%">
|
||||
<span>Loading Transaction Details...</span>
|
||||
</div>
|
||||
</h1>
|
||||
<div class="progress progress-striped active" data-ng-if="!tx.txid">
|
||||
<div class="progress-bar progress-bar-info" style="width: 100%">
|
||||
<span>Loading Transaction Details...</span>
|
||||
</div>
|
||||
<div class="block-tx ng-cloak" data-ng-cloak data-ng-if="tx.txid">
|
||||
<div data-ng-include src="'/views/transaction/tx.html'"></div>
|
||||
</div>
|
||||
<div data-ng-if="tx.txid">
|
||||
<div class="well well-sm ellipsis">
|
||||
<strong>Transaction</strong>
|
||||
<span class="txid text-muted">{{tx.txid}}</span>
|
||||
<span class="btn-copy" clip-copy="tx.txid"></span>
|
||||
</div>
|
||||
<h2>Summary</h2>
|
||||
<table class="table" style="table-layout: fixed">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong> Size </strong></td>
|
||||
<td class="text-muted text-right">{{tx.size}} (bytes)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Received Time </strong></td>
|
||||
<td data-ng-show="tx.firstSeenTs" class="text-muted text-right">{{tx.firstSeenTs * 1000|date:'medium'}}</td>
|
||||
<td data-ng-show="!tx.firstSeenTs" class="text-muted text-right">N/A</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Mined Time </strong></td>
|
||||
<td data-ng-show="tx.time" class="text-muted text-right">{{tx.time * 1000|date:'medium'}}</td>
|
||||
<td data-ng-show="!tx.time" class="text-muted text-right">N/A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h2>Details</h2>
|
||||
<div class="block-tx ng-cloak" data-ng-cloak data-ng-if="tx.txid">
|
||||
<div data-ng-include src="'/views/transaction/tx.html'"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,22 @@
|
|||
<div class="line-bot row ng-cloak" data-ng-hide="!tx" data-ng-cloak>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<button class="btn-expand pull-left" data-ng-click="itemsExpanded = !itemsExpanded"><span class="glyphicon glyphicon-plus-sign" data-ng-class="{'glyphicon-minus-sign': itemsExpanded}" tooltip="Show/Hide items details" tooltip-placement="right"></span></button>
|
||||
<button class="btn-copy pull-right" clip-copy="tx.txid"></button>
|
||||
<div class="ellipsis">
|
||||
<a class="btn-expand" href="#" title="Show/Hide items details" data-ng-click="itemsExpanded = !itemsExpanded">
|
||||
<span class="glyphicon glyphicon-plus-sign" data-ng-class="{'glyphicon-minus-sign': itemsExpanded}"></span>
|
||||
</a>
|
||||
<a class="txid" href="/tx/{{tx.txid}}">{{tx.txid}}</a>
|
||||
<span class="btn-copy" clip-copy="tx.txid"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6 text-right" data-ng-show="tx.firstSeenTs">
|
||||
first seen at
|
||||
<time>{{tx.firstSeenTs * 1000 | date:'medium'}}</time>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-6 text-right" data-ng-show="tx.time && !tx.firstSeenTs">
|
||||
mined at
|
||||
<time>{{tx.time * 1000 | date:'medium'}}</time>
|
||||
<div class="col-xs-12 col-md-6 text-right">
|
||||
<div data-ng-show="tx.firstSeenTs">
|
||||
first seen at
|
||||
<time>{{tx.firstSeenTs * 1000 | date:'medium'}}</time>
|
||||
</div>
|
||||
<div data-ng-show="tx.time && !tx.firstSeenTs">
|
||||
mined at
|
||||
<time>{{tx.time * 1000 | date:'medium'}}</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row line-mid">
|
||||
|
|
@ -31,7 +34,7 @@
|
|||
<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="pull-right btc-value" data-ng-class="{'text-danger': $root.currentAddr == vin.addr}"><p>{{$root.currency.getConvertion(vin.value)}}</p></div>
|
||||
<div class="pull-right btc-value" data-ng-class="{'text-danger': $root.currentAddr == vin.addr}"><p>{{$root.currency.getConvertion(vin.value) || vin.value + ' BTC'}}</p></div>
|
||||
<div class="ellipsis">
|
||||
<span data-ng-show="vin.notAddr">{{vin.addr}}</span>
|
||||
<span class="text-muted" title="Current Bitcoin Address" data-ng-show="vin.addr == $root.currentAddr">{{vin.addr}}</span>
|
||||
|
|
@ -56,7 +59,7 @@
|
|||
<a href="#" data-ng-show="(from_vin) && tx.vin.length > 1" data-ng-class="{'text-muted': !fromVinCollapsed}" data-ng-click="currentInExpanded=0; sizeInExpanded=tx.vin.length;fromVinCollapsed=0"><small>show all</small></a>
|
||||
<div data-ng-repeat="vin in tx.vin| startFrom:currentInExpanded*sizeInExpanded | limitTo:sizeInExpanded" data-ng-if="fromVinCollapsed ? v_index == vin.n : 1">
|
||||
<div class="col-md-12 transaction-vin-vout">
|
||||
<div class="pull-right btc-value"><p>{{$root.currency.getConvertion(vin.value)}}</p></div>
|
||||
<div class="pull-right btc-value"><p>{{$root.currency.getConvertion(vin.value) || vin.value + ' BTC'}}</p></div>
|
||||
<div class="ellipsis">
|
||||
<a class="glyphicon glyphicon-chevron-right" href="/tx/{{vin.txid}}/>/{{vin.vout}}" title="Outpoint: {{vin.txid}},{{vin.vout}}"></a>
|
||||
<span data-ng-show="vin.notAddr">{{vin.addr}}</span>
|
||||
|
|
@ -104,7 +107,7 @@
|
|||
<div class="pull-right btc-value" data-ng-class="{'text-success': $root.currentAddr == vout.addr}">
|
||||
|
||||
<p>
|
||||
{{$root.currency.getConvertion(vout.value)}}
|
||||
{{$root.currency.getConvertion(vout.value) || vout.value + ' BTC' }}
|
||||
<span class="text-danger" data-ng-show="vout.isSpent" tooltip="Output is spent" tooltip-placement="left">(S)</span>
|
||||
<span class="text-success" data-ng-show="!vout.isSpent" tooltip="Output is unspent" tooltip-placement="left">(U)</span>
|
||||
</p>
|
||||
|
|
@ -130,7 +133,7 @@
|
|||
<div data-ng-repeat="vout in tx.vout| startFrom:currentOutExpanded*sizeOutExpanded | limitTo:sizeOutExpanded" data-ng-if="fromVoutCollapsed ? v_index == vout.n : 1">
|
||||
<div class="col-md-12 transaction-vin-vout">
|
||||
<div class="pull-right btc-value">
|
||||
<p>{{$root.currency.getConvertion(vout.value)}}
|
||||
<p>{{$root.currency.getConvertion(vout.value) || vout.value + ' BTC'}}
|
||||
<span class="text-success" data-ng-show="!vout.spentTxId" tooltip="Output is unspent" tooltip-placement="left">(U)</span>
|
||||
<a class="glyphicon glyphicon-chevron-right" data-ng-show="vout.spentTxId" href="/tx/{{vout.spentTxId}}/</{{vout.spentIndex}}" title="Spent at: {{vout.spentTxId}},{{vout.spentIndex}}"></a>
|
||||
</p>
|
||||
|
|
@ -165,23 +168,18 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default" data-ng-if="itemsExpanded && !block.hash">
|
||||
<div class="panel-body" style="word-wrap:break-word">
|
||||
<small>
|
||||
<strong>BlockHash</strong>
|
||||
<a href="/block/{{tx.blockhash}}">{{tx.blockhash}}</a>
|
||||
<button class="btn-copy" clip-copy="tx.blockhash"></button>
|
||||
</small>
|
||||
</div>
|
||||
<div class="well well-sm bgwhite ellipsis" data-ng-if="itemsExpanded && !block.hash">
|
||||
<strong>BlockHash</strong> <a class="text-muted" href="/block/{{tx.blockhash}}">{{tx.blockhash}}</a>
|
||||
<span class="btn-copy" clip-copy="tx.blockhash"></span>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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) || tx.fees + 'BTC'}} </span>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-8 col-md-8 text-right">
|
||||
<span data-ng-show="tx.confirmations" class="txvalues txvalues-success">{{tx.confirmations}} Confirmations</span>
|
||||
<span data-ng-show="!tx.confirmations" class="txvalues txvalues-danger">Unconfirmed Transaction!</span>
|
||||
<span class="txvalues txvalues-primary">{{$root.currency.getConvertion(tx.valueOut)}}</span>
|
||||
<span class="txvalues txvalues-primary">{{$root.currency.getConvertion(tx.valueOut) || tx.valueOut + ' BTC' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue