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

fix route for status page. update all page with responsive support

config/routes.js

@@ -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);

public/css/common.css

@@ -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;
+  padding: 14px;
-  width: 267px;
 }
 
 .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 */

public/views/address.html

@@ -1,8 +1,8 @@
 <section data-ng-controller="AddressController" data-ng-init="findOne()">
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-xs-12 col-gray col-gray-fixed">
-      <div class="bs-sidebar hidden-print affix col-gray">
+      <h1 class="text-center">Address</h1>
-        <div class="text-center m20v">
+      <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>

public/views/block.html

@@ -1,7 +1,6 @@
 <section data-ng-controller="BlocksController" data-ng-init="findOne()">
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-xs-12 col-gray col-gray-fixed">
-      <div class="bs-sidebar affix  col-gray">
       <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">
+    <div class="col-xs-12 col-md-9 col-md-offset-3">
-      <h3>Summary</h3>
+      <h2>Summary</h2>
       <div class="row">
         <div class="col-md-6">
           <table class="table">

public/views/blocks/list.html

@@ -1,7 +1,6 @@
 <section data-ng-controller="BlocksController" data-ng-init="list()">
   <div class="row">
-    <div class="col-md-3">
+    <div class="col-xs-12 col-gray col-gray-fixed">
-      <div class="bs-sidebar affix col-gray">
       <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-xs-12 col-md-9 col-md-offset-3">
-    <div class="col-md-9">
       <div class="page-header">
         <h1>
           Blocks

public/views/index.html

@@ -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-xs-12 col-md-4 col-gray">
-        <div class="col-gray col-gray-responsive">
         <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>

public/views/status.html

@@ -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-xs-12 col-md-4 col-gray">
-      <div class="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>