improve tx details ui

This commit is contained in:
bechi 2015-09-29 14:54:03 -03:00
commit 526c7155b5
2 changed files with 22 additions and 17 deletions

View file

@ -7,30 +7,33 @@
</section> </section>
<section class="middle tab-bar-section"> <section class="middle tab-bar-section">
<h1 class="title ellipsis" ng-style="{'color':color}"> <h1 class="title ellipsis" ng-style="{'color':color}">
Transaction Details
</h1> </h1>
</section> </section>
</nav> </nav>
<div class="modal-content fix-modals-touch"> <div class="modal-content fix-modals-touch">
<div class="header-modal text-center"> <div class="header-modal bg-gray text-center">
<span class="label tu radius" ng-show="tx.type == 'BUY'" <div class="p20">
ng-style="{'background-color':color}">Bought</span> <i class="icon-buy-btc size-60" ng-show="tx.type == 'BUY'"></i>
<span class="label tu gray radius" ng-show="tx.type == 'SELL'">Sold</span> <i class="icon-sell-btc size-60" ng-show="tx.type == 'SELL'"></i>
<div class="size-42">
{{tx.subtotal|currency:'':2}} {{tx.currency}}
</div> </div>
<div class="size-12 text-gray"> <span ng-show="tx.type == 'BUY'">Bought</span>
<span class="text-success" ng-if="tx.status == 'COMPLETE'">Completed</span> <span ng-show="tx.type == 'SELL'">Sold</span>
<span class="text-info" ng-if="tx.status == 'PROCESSING'">Processing</span> <div class="size-36 m20b">
<span class="text-warning" ng-if="tx.status == 'ERROR'">Error</span> {{tx.subtotal|currency:'':2}} {{tx.currency}}
</div> </div>
</div> </div>
<h4 class="title m0">Details</h4>
<ul class="no-bullet size-14 m0"> <ul class="no-bullet size-14 m0">
<li class="line-b p10 oh">
<span class="text-gray">Status</span>
<span class="text-success right" ng-if="tx.status == 'COMPLETE'">Completed</span>
<span class="text-info right" ng-if="tx.status == 'PROCESSING'">Processing</span>
<span class="text-warning right" ng-if="tx.status == 'ERROR'">Error</span>
</li>
<li ng-show="tx.transactionDate" class="line-b p10 oh"> <li ng-show="tx.transactionDate" class="line-b p10 oh">
<span class="text-gray">Date</span> <span class="text-gray">Date</span>
<span class="right">{{tx.transactionDate | amCalendar}}</span> <span class="right">{{tx.transactionDate | amCalendar}}</span>
@ -39,10 +42,8 @@
<li ng-show="tx.price" class="line-b p10 oh"> <li ng-show="tx.price" class="line-b p10 oh">
<span class="text-gray">Exchange rate</span> <span class="text-gray">Exchange rate</span>
<span class="right">{{tx.price|currency:'':2}} {{tx.currency}}/BTC</span> <span class="right">{{tx.price|currency:'':2}} {{tx.currency}}/BTC</span>
</li> </li>
</ul>
<h4 class="title m0">&nbsp;</h4>
<ul class="no-bullet size-14 m0">
<li ng-show="tx.subtotal" class="line-b p10 oh"> <li ng-show="tx.subtotal" class="line-b p10 oh">
<span class="text-gray">Subtotal</span> <span class="text-gray">Subtotal</span>
<span class="right">{{tx.subtotal|currency:'':2}} {{tx.currency}}</span> <span class="right">{{tx.subtotal|currency:'':2}} {{tx.currency}}</span>

View file

@ -1040,6 +1040,10 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
font-size: 14px; font-size: 14px;
} }
.bg-gray {
background-color: #F1F3F5;
}
.bg-circle { .bg-circle {
background: #253547; background: #253547;
border-radius: 100%; border-radius: 100%;