zcash-hackworks
/
insight-ui-zcash
mirror of https://github.com/zcash-hackworks/insight-ui-zcash.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #193 from cmgustavo/feature/01tx-page 

Feature/01tx page
This commit is contained in:
Mario Colque 2014-02-07 11:20:12 -02:00
parent 73965f0afb b590cf5c5c
commit 6ecc784969
8 changed files with 89 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
public/css/common.css
View File

@ -196,25 +196,24 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
.block-id {
background-color: #373D42;
border: 3px solid #FFFFFF;
height: 165px;
margin: 10px auto;
margin: 0 auto;
width: 165px;
color: #fff;
text-align: center;
font-size: 80px;
}
.block-id h1 {
.block-id span {
margin-top: 10px;
}
.block-id h2 {
color: #FFFFFF;
font-weight: bold;
line-height: 30px;
text-align: center;
font-size: 24px;
}
.block-id h3 {
color: #FFFFFF;
font-weight: bold;
line-height: 30px;
text-align: center;
font-size: 24px;
margin-top: 0;
margin-bottom: 10px;
}
.icon-block {
@ -278,9 +277,11 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
height: 51px;
overflow: hidden;
}
#footer .currency a.active {
color: #fff;
.currency a.active {
color: #000;
text-decoration: underline;
cursor: default;
}
#footer a.insight {
@ -432,12 +433,18 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
line-height: 26px;
}
.tx-id {
background-color: #373D42;
border: 3px solid #FFFFFF;
margin: 0 auto;
width: 165px;
color: #FFFFFF;
font-size: 80px;
text-align: center;
}
.transaction-vin-vout .ellipsis { margin-bottom: 10px; }
.transaction-vin-vout .btc-value { margin-left: 15px; }
.page-header { margin-top: 0; }
.block_hash {
margin-left: 46px;
text-align: center;
}

4
public/js/controllers/footer.js
View File

@ -4,9 +4,7 @@ angular.module('insight.system').controller('FooterController',
function($rootScope, $scope, Version, Currency) {
var _roundFloat = function(x, n) {
if(!parseInt(n, 10)) n = 0;
if(!parseFloat(x)) return false;
if(!parseInt(n, 10) || !parseFloat(x)) n = 0;
return Math.round(x * Math.pow(10, n)) / Math.pow(10, n);
};

15
public/views/address.html
View File

@ -5,10 +5,10 @@
<h1 class="text-center">Address</h1>
<div class="text-center">
<qrcode size="160" data="{{address.addrStr}}"></qrcode>
<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>
<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>
@ -16,15 +16,15 @@
<tbody>
<tr>
<td class="small">Total Received</td>
<td class="address ellipsis text-right">{{address.totalReceived}} BTC</td>
<td class="address ellipsis text-right">{{$root.currency.getConversion(address.totalReceived)}}</td>
</tr>
<tr>
<td class="small">Total Sent</td>
<td class="address ellipsis text-right">{{address.totalSent}} BTC</td>
<td class="address ellipsis text-right">{{$root.currency.getConversion(address.totalSent)}}</td>
</tr>
<tr>
<td class="small">Final Balance</td>
<td class="address ellipsis text-right">{{address.balance}} BTC</td>
<td class="address ellipsis text-right">{{$root.currency.getConversion(address.balance)}}</td>
</tr>
<tr>
<td class="small">No. Transactions</td>
@ -33,6 +33,7 @@
</tbody>
</table>
</div> <!-- END OF TRANSACTIONS TABLE -->
<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')">

10
public/views/block.html
View File

@ -2,15 +2,14 @@
<section data-ng-controller="BlocksController" data-ng-init="findOne()">
<div class="row">
<div class="col-xs-12 col-gray col-gray-fixed">
<h1 class="text-center">Block</h1>
<div class="block-id">
<div class="icon-block text-center">
<span class="glyphicon glyphicon-list-alt"></span>
</div>
<h1 data-ng-if="block">Block #{{ block.height }}</h1>
<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 block_hash" href="/address/{{block.hash}}">{{block.hash}}</a>
<a class="ellipsis" href="/address/{{block.hash}}">{{block.hash}}</a>
</div>
<div class="m20v" data-ng-show="!tx.isCoinBase">
<h4>Hashes</h4>
@ -31,6 +30,7 @@
</tbody>
</table>
</div> <!-- END OF TRANSACTIONS TABLE -->
<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">

8
public/views/includes/currency.html Normal file
View File

@ -0,0 +1,8 @@
<div class="currency text-center m10t" data-ng-controller="FooterController">
<small>
Currency:
<a href="#" data-ng-click="setCurrency('USD')" data-ng-class="{active: $root.currency.symbol == 'USD'}" tooltip="Change to USD: Bitstamp ${{$root.currency.bitstamp}}">USD</a> ·
<a href="#" data-ng-click="setCurrency('BTC')" data-ng-class="{active: $root.currency.symbol == 'BTC'}" tooltip="Change to BTC">BTC</a> ·
<a href="#" data-ng-click="setCurrency('mBTC')" data-ng-class="{active: $root.currency.symbol == 'mBTC'}" tooltip="Change to mBTC">mBTC</a>
</small>
</div>

8
public/views/includes/footer.html
View File

@ -1,11 +1,3 @@
<div class="container" data-ng-controller="FooterController">
<div class="pull-left m10v currency">
<small>
Currency:
<a href="#" data-ng-click="setCurrency('USD')" data-ng-class="{active: $root.currency.symbol == 'USD'}" tooltip="Change to USD: Bitstamp ${{$root.currency.bitstamp}}">USD</a> ·
<a href="#" data-ng-click="setCurrency('BTC')" data-ng-class="{active: $root.currency.symbol == 'BTC'}" tooltip="Change to BTC">BTC</a> ·
<a href="#" data-ng-click="setCurrency('mBTC')" data-ng-class="{active: $root.currency.symbol == 'mBTC'}" tooltip="Change to mBTC">mBTC</a>
</small>
</div>
<a class="insight m10v pull-right" href="/">Insight <small>API v{{version}}</small></a>
</div>

75
public/views/transaction.html
View File

@ -1,55 +1,62 @@
<div data-ng-include src="'/views/includes/connection.html'"></div>
<section data-ng-controller="transactionsController" data-ng-init="findThis()">
<h1>
Transaction
<small>View information about a bitcoin transaction</small>
</h1>
<div class="block-tx">
<div data-ng-include src="'/views/transaction/tx.html'"></div>
</div><!-- END OF BLOCK-TX -->
<div class="row">
<div data-ng-class="{'col-md-6':!tx.isCoinBase}">
<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 class="text-muted text-right">{{tx.time * 1000|date:'medium'}}</td>
</tr>
<tr>
<td><strong>Block </strong>
<td class="text-right">
<button class="btn-copy pull-right" clip-copy="tx.blockhash"></button>
<a href="/block/{{tx.blockhash}}" class=" ellipsis">{{tx.blockhash}}</a>
</tbody>
</table>
<div class="row">
<div class="col-xs-12 col-gray col-gray-fixed">
<h1 class="text-center">Transaction</h1>
<div class="tx-id">
<span class="glyphicon glyphicon-retweet"></span>
</div>
<div class="col-md-6" data-ng-show="!tx.isCoinBase">
<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 class="text-muted text-right">{{tx.time * 1000|date:'medium'}}</td>
</tr>
</tbody>
</table>
<div data-ng-include src="'/views/includes/currency.html'"></div>
</div>
<div class="col-xs-12 col-md-9 col-md-offset-3">
<h2>
Details
<small>View information about a bitcoin transaction</small>
</h2>
<div class="block-tx">
<div data-ng-include src="'/views/transaction/tx.html'"></div>
</div>
<div data-ng-show="!tx.isCoinBase">
<h2>Inputs and Outputs</h2>
<table class="table">
<tbody>
<tr>
<td><strong>Total Input</strong></td>
<td class="text-muted text-right">{{tx.valueIn}} BTC</td>
<td class="text-muted text-right">{{$root.currency.getConversion(tx.valueIn)}}</td>
</tr>
<tr>
<td><strong>Total Output</strong></td>
<td class="text-muted text-right">{{tx.valueOut}} BTC</td>
<td class="text-muted text-right">{{$root.currency.getConversion(tx.valueOut)}}</td>
</tr>
<tr>
<td><strong>Fees</strong></td>
<td class="text-muted text-right">{{tx.fees}} BTC</td>
<td class="text-muted text-right">{{$root.currency.getConversion(tx.fees)}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>

2
public/views/transaction/tx.html
View File

@ -109,7 +109,7 @@
</div>
<div class="line-top row">
<div class="col-xs-4 col-md-6">
<button data-ng-show="!tx.isCoinBase" class="btn btn-default">Fees: {{tx.fees}}</button>
<button data-ng-show="!tx.isCoinBase" class="btn btn-default">Fees: {{$root.currency.getConversion(tx.fees)}}</button>
</div>
<div class="col-xs-8 col-md-6 text-right">
<button data-ng-show="tx.confirmations" class="btn btn-success">{{tx.confirmations}} Confirmations</button>