Prepared BlockPage (look&feel) for getting info by API

This commit is contained in:
Gustavo Cortez 2014-01-10 10:03:48 -03:00
parent e10e5fa2c0
commit 9db404c7f2
2 changed files with 107 additions and 61 deletions

View File

@ -40,6 +40,11 @@ body {
padding-right: 15px; padding-right: 15px;
} }
code { .code {
font-size: 80%; font-size: 80%;
} }
.address {
font-size: 10px;
}

View File

@ -2,72 +2,113 @@
<div class="page-header"> <div class="page-header">
<h1 data-ng-if="block">Block #{{ block.height }}</h1> <h1 data-ng-if="block">Block #{{ block.height }}</h1>
</div> </div>
<h2>Summary</h2> <div class="row">
<dl class="dl-horizontal"> <div class="col-md-6">
<dt>Number Of Transactions</dt> <div class="panel panel-default">
<dd>--</dd> <div class="panel-heading">
<dt>Output Total</dt> <h3 class="panel-title">Summary</h3>
<dd>--</dd> </div>
<dt>Estimated Transaction Volume</dt> <div class="panel-body">
<dd>--</dd> <table class="table table-striped">
<dt>Transaction Fees</dt> <tbody>
<dd>--</dd> <tr>
<dt>Height</dt> <td>Number Of Transactions</td>
<dd>{{block.height}}</dd> <td>--</td>
<dt>Timestamp</dt> </tr>
<dd>{{block.time}}</dd> <tr>
<dt>Received Time</dt> <td>Output Total</td>
<dd>{{block.time}}</dd> <td>--</td>
<dt>Relayed By</dt> </tr>
<dd>--</dd> <tr>
<dt>Difficulty</dt> <td>Estimated Transaction Volume</td>
<dd>{{block.difficulty}}</dd> <td>--</td>
<dt>Bits</dt> </tr>
<dd>{{block.bits}}</dd> <tr>
<dt>Size</dt> <td>Transaction Fees</td>
<dd>{{block.size}}</dd> <td>--</td>
<dt>Version</dt> </tr>
<dd>{{block.version}}</dd> <tr>
<dt>Nonce</dt> <td>Height</td>
<dd>{{block.nonce}}</dd> <td>{{block.height}}</td>
</dl> </tr>
<tr>
<h2>Hashes</h2> <td>Timestamp</td>
<table class="table table-striped"> <td>{{block.time * 1000 | date:'medium'}}</td>
<thead> </tr>
<th>Hashes</th> <tr>
<th>&nbsp;</th> <td>Received Time</td>
</thead> <td>--<td>
<tbody> </tr>
<tr> <tr>
<td>Hash</td> <td>Relayed By</td>
<td><a href="/#!/block/{{block.hash}}">{{block.hash}}</a></td> <td>--</td>
</tr> </tr>
<tr> <tr>
<td>Previous Block</td> <td>Difficulty</td>
<td><a href="/#!/block/{{block.previousblockhash}}">{{block.previousblockhash}}</a></td> <td>{{block.difficulty}}</td>
</tr> </tr>
<tr> <tr>
<td>Next Block(s)</td> <td>Bits</td>
<td><a href="/#!/block/{{block.nextblockhash}}">{{block.nextblockhash}}</a></td> <td>{{block.bits}}</td>
</tr> </tr>
<tr> <tr>
<td>Merkle Root</td> <td>Size</td>
<td>{{block.merkleroot}}</td> <td>{{block.size}}</td>
</tr> </tr>
</tbody> <tr>
</table> <td>Version</td>
<td>{{block.version}}</td>
</tr>
<tr>
<td>Nonce</td>
<td>{{block.nonce}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default" data-ng-show="!tx.isCoinBase">
<div class="panel-heading">
<h3 class="panel-title">Hashes</h3>
</div>
<div class="panel-body">
<table class="table table-striped">
<tbody>
<tr>
<td>Hash</td>
<td><a class="address" href="/#!/block/{{block.hash}}">{{block.hash}}</a></td>
</tr>
<tr>
<td>Previous Block</td>
<td><a class="address" href="/#!/block/{{block.previousblockhash}}">{{block.previousblockhash}}</a></td>
</tr>
<tr>
<td>Next Block</td>
<td><a class="address" href="/#!/block/{{block.nextblockhash}}">{{block.nextblockhash}}</a></td>
</tr>
<tr>
<td>Merkle Root</td>
<td class="address">{{block.merkleroot}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<h2>Transactions</h2> <h2>Transactions</h2>
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<th>Hash</th> <th>Hash</th>
</thead> </thead>
<tbody> <tbody>
<tr data-ng-repeat="tx in block.tx"> <tr data-ng-repeat="tx in block.tx">
<td><a href="/#!/tx/{{tx}}">{{tx}}</a></td> <td><a href="/#!/tx/{{tx}}">{{tx}}</a></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</section> </section>