Skip to content

Commit

Permalink
Merge pull request bitpay#399 from cmgustavo/feature/01fix-layout
Browse files Browse the repository at this point in the history
Feature/01fix layout
  • Loading branch information
matiu committed Feb 25, 2014
2 parents a4ec3c0 + ce5ce82 commit 94249a2
Show file tree
Hide file tree
Showing 8 changed files with 317 additions and 269 deletions.
62 changes: 42 additions & 20 deletions public/src/css/common.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -113,7 +117,6 @@ margin-left: 0;
}

.navbar-form {
margin-left: 20px;
width: 35%;
margin-top: 15px;
}
Expand All @@ -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;
}
Expand All @@ -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 {
Expand All @@ -150,7 +154,6 @@ margin-left: 0;

.navbar-default .navbar-brand {
color: #FFFFFF;
margin-right: 20px;
padding: 22px 15px;
}

Expand Down Expand Up @@ -207,6 +210,7 @@ margin-left: 0;
font-size: 12px;
color: #eee;
text-align: center;
margin-right: 10px;
}

.status .tooltip {
Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}

12 changes: 12 additions & 0 deletions public/src/js/directives.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
132 changes: 69 additions & 63 deletions public/views/address.html
Original file line number Diff line number Diff line change
@@ -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 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>
<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 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-2 text-center">
<qrcode size="160" data="{{address.addrStr}}"></qrcode>
</div>
</div>
</div> <!-- END OF ROW -->
<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>

Loading

0 comments on commit 94249a2

Please sign in to comment.