fix layout of transaction page. fix icons expand and copy/paste
This commit is contained in:
Gustavo Cortez
parent
f603657165
commit
b86f199c56
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -511,38 +515,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 {
|
||||
|
|
|
|||
|
|
@ -1,61 +1,44 @@
|
|||
<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>
|
||||
<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>
|
||||
<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 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>
|
||||
</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>
|
||||
</h1>
|
||||
<div class="well well-sm ellipsis">
|
||||
<span class="txid text-muted">{{tx.txid}}</span>
|
||||
<span class="btn-copy" clip-copy="tx.txid"></span>
|
||||
</div>
|
||||
<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>
|
||||
<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 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