Merge pull request #162 from cmgustavo/feature/01responsive-all-pages

fix route for status page. update all page with responsive support
This commit is contained in:
Mario Colque 2014-01-27 13:51:07 -08:00
commit 9d4052f096
7 changed files with 218 additions and 213 deletions

View File

@ -7,6 +7,7 @@ module.exports = function(app, historicSync) {
app.get('/', index.render);
app.get('/blocks', index.render);
app.get('/status', index.render);
app.get('/blocks-date/*', index.render);
app.get('/block-index/*', index.render);
app.get('/block/*', index.render);

View File

@ -20,7 +20,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
/* Negative indent footer by its height */
margin: 0 auto -51px;
/* Pad bottom by footer height */
padding: 0 0 60px;
padding: 0 0 75px;
}
.m10h { margin: 0 10px; }
@ -134,14 +134,37 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-webkit-border-radius: 5px;
background-color: #F4F4F4;
border-radius: 5px;
padding: 15px;
width: 267px;
padding: 14px;
}
.col-gray-responsive {
width: auto;
}
.col-gray-fixed {
position: fixed;
width: 250px;
}
@media (max-width: 768px) {
.col-gray-fixed {
width:100%;
}
}
@media (max-width: 995px) {
.col-gray-fixed {
position:static;
width: 100%;
}
}
@media (min-width: 1200px) {
.col-gray-fixed {
width: 280px;
}
}
.ellipsis {
display: block;
overflow: hidden;
@ -159,11 +182,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
margin: 10px 0;
}
.col-gray .address {
line-height: 20px;
width: 125px;
}
.block-id {
background-color: #373D42;
border: 3px solid #FFFFFF;
@ -197,7 +215,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
.btn {
border-radius: 2px;
margin: 0 5px;
}
.btn-primary {
background-color: #8DC429;
@ -213,7 +230,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
background-color: #fff;
border: 2px solid #ccc;
color: #373D42;
font-weight: 500;
}
.btn-default {
@ -231,8 +247,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
border: 2px solid #6C0000;
}
#status .table { margin-bottom: 45px; }
.progress-bar-info { background-color: #8DC429; }
/* Set the fixed height of the footer here */

View File

@ -1,8 +1,8 @@
<section data-ng-controller="AddressController" data-ng-init="findOne()">
<div class="row">
<div class="col-md-3">
<div class="bs-sidebar hidden-print affix col-gray">
<div class="text-center m20v">
<div class="col-xs-12 col-gray col-gray-fixed">
<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"><span class="glyphicon glyphicon-paperclip"></span></button>
@ -32,9 +32,8 @@
</tbody>
</table>
</div> <!-- END OF TRANSACTIONS TABLE -->
</div>
</div> <!-- END OF COL-MD-3 -->
<div class="col-md-9">
<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>

View File

@ -1,7 +1,6 @@
<section data-ng-controller="BlocksController" data-ng-init="findOne()">
<div class="row">
<div class="col-md-3">
<div class="bs-sidebar affix col-gray">
<div class="col-xs-12 col-gray col-gray-fixed">
<div class="block-id">
<div class="icon-block text-center">
<span class="glyphicon glyphicon-list-alt"></span>
@ -10,7 +9,7 @@
</div>
<div class="m50v" data-ng-show="!tx.isCoinBase">
<h4>Hashes</h4>
<table class="table">
<table class="table" style="table-layout: fixed">
<tbody>
<tr>
<td class="small"> Hash </td>
@ -31,12 +30,10 @@
</tbody>
</table>
</div> <!-- END OF TRANSACTIONS TABLE -->
</div>
</div> <!-- END OF COL-GRAY -->
<div class="col-md-9">
<h3>Summary</h3>
<div class="col-xs-12 col-md-9 col-md-offset-3">
<h2>Summary</h2>
<div class="row">
<div class="col-md-6">
<table class="table">

View File

@ -1,7 +1,6 @@
<section data-ng-controller="BlocksController" data-ng-init="list()">
<div class="row">
<div class="col-md-3">
<div class="bs-sidebar affix col-gray">
<div class="col-xs-12 col-gray col-gray-fixed">
<div class="block-id">
<div class="icon-block text-center">
<span class="glyphicon glyphicon-list"></span>
@ -9,13 +8,12 @@
</div>
</div>
<p class="lead text-center m20v">{{pagination.current}}</p>
<div class="m50v">
<div class="m50v text-center">
<a class="btn btn-primary" href="/blocks-date/{{pagination.prev}}"><small>&larr; {{pagination.prev}}</small></a>
<a class="btn btn-primary" href="/blocks-date/{{pagination.next}}" data-ng-disabled="pagination.isToday"><small>{{pagination.next}} &rarr;</small></a>
</div>
</div>
</div>
<div class="col-md-9">
<div class="col-xs-12 col-md-9 col-md-offset-3">
<div class="page-header">
<h1>
Blocks

View File

@ -35,11 +35,10 @@
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt tempora fugiat dolorem cupiditate perspiciatis praesentium.</p>
</div>
<div class="col-xs-12 col-md-4">
<div class="col-gray col-gray-responsive">
<div class="col-xs-12 col-md-4 col-gray">
<h3>Latest Transactions</h3>
<table class="table" style="table-layout: fixed">
<table class="table" style="table-layout: fixed;">
<thead>
<tr>
<th>Hash</th>
@ -85,7 +84,6 @@
<small> - Addresses which have received the most payments</small>
</li>
</ul>
</div>
</div> <!-- END OF COL-3 -->
</div>
</div>

View File

@ -5,8 +5,8 @@
</h1>
</div>
<div id="status" class="row">
<div class="col-md-9">
<div class="col-xs-12 col-md-8">
<h4>Sync Status</h4>
<table class="table" data-ng-controller="StatusController" data-ng-init="getSync()">
<tbody>
@ -41,7 +41,7 @@
</table>
<h4>Transaction Output Set Information</h4>
<table class="table" data-ng-controller="StatusController" data-ng-init="getStatus('TxOutSetInfo')">
<table class="table" style="table-layout: fixed" data-ng-controller="StatusController" data-ng-init="getStatus('TxOutSetInfo')">
<thead data-ng-include src="'/views/infoStatus.html'"> </thead>
<tbody>
<tr>
@ -50,7 +50,7 @@
</tr>
<tr>
<td>Best Block</td>
<td class="text-right"><a href="/block/{{txoutsetinfo.bestblock}}">{{txoutsetinfo.bestblock}}</a></td>
<td class="text-right ellipsis"><a href="/block/{{txoutsetinfo.bestblock}}">{{txoutsetinfo.bestblock}}</a></td>
</tr>
<tr>
<td>Transactions</td>
@ -66,7 +66,7 @@
</tr>
<tr>
<td>Hash Serialized</td>
<td class="text-right">{{txoutsetinfo.hash_serialized}}</td>
<td class="text-right ellipsis">{{txoutsetinfo.hash_serialized}}</td>
</tr>
<tr>
<td>Total Amount</td>
@ -76,18 +76,17 @@
</table>
<h4>Last Block</h4>
<table class="table" data-ng-controller="StatusController" data-ng-init="getStatus('LastBlockHash')">
<table class="table" style="table-layout: fixed" data-ng-controller="StatusController" data-ng-init="getStatus('LastBlockHash')">
<thead data-ng-include src="'/views/infoStatus.html'"> </thead>
<tr>
<td>Last Block Hash</td>
<td class="text-right"><a href="/block/{{lastblockhash}}">{{lastblockhash}}</a></td>
<td class="text-right ellipsis"><a href="/block/{{lastblockhash}}">{{lastblockhash}}</a></td>
</tr>
</tbody>
</table>
</div> <!-- END OF COL-8 -->
<div class="col-md-3">
<div class="col-gray">
<div class="col-xs-12 col-md-4 col-gray">
<h4>Bitcoin node information</h4>
<table class="table" data-ng-controller="StatusController" data-ng-init="getStatus('Info')">
<thead data-ng-include src="'/views/infoStatus.html'"> </thead>
@ -154,7 +153,6 @@
</tbody>
</table>
</div> <!-- END OF COL-GRAY -->
</div> <!-- END OF COL-3 -->
</div>
</section>