Merge pull request #357 from bechi/feature/layout-details

Feature/layout details

public/src/css/common.css

@@ -59,6 +59,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 .m10v { margin: 10px 0; }
 .m50v { margin: 50px 0; }
 .m10b { margin-bottom: 10px; }
+.m10l { margin-left: 10px; }
 
 .vm { vertical-align: middle; }
 
@@ -190,6 +191,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 }
 
 .col-gray-fixed {
+  margin-top: 15px;
   position: fixed;
   width: 250px;
   border: 1px solid #eee;
@@ -239,11 +241,11 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   width: 165px;
   color: #fff;
   text-align: center;
-  font-size: 80px;
 }
 
 .block-id span {
-  margin-top: 10px;
+  font-size: 40px;
+  margin: 30px 0;
 }
 
 .block-id h2 {
@@ -295,9 +297,12 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   color: #373D42;
 }
 
+.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
+  background-color: #fff;
+}
+
 .btn-default {
   background-color: #E7E7E7;
-  border: 2px solid #DCDCDC;
 }
 
 .btn-success {
@@ -358,12 +363,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   overflow: hidden;
 }
 
-.currency a.active {
-  color: #000;
-  text-decoration: underline;
-  cursor: default;
-}
-
 #footer a.insight {
   font-size: 20px;
   text-decoration: none;
@@ -491,6 +490,11 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   text-align: center;
   width: 30px;
 }
+
+.btn-copy:hover, .btn-expand:hover {
+  background-color: #f2f2f2;
+}
+
 .btn-copy {
   background: #fff url('/img/icons/copy.png') center center no-repeat;
   margin-left: 5px;
@@ -521,10 +525,14 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   margin: 0 auto;
   width: 165px;
   color: #FFFFFF;
-  font-size: 80px;
   text-align: center;
 }
 
+.tx-id span { 
+  font-size: 40px;
+  margin: 30px 0;
+}
+
 .transaction-vin-vout .ellipsis { margin-bottom: 10px; }
 .transaction-vin-vout .btc-value { margin-left: 15px; }
 

public/views/address.html

@@ -5,6 +5,7 @@
       <h1 class="text-center">Address</h1>
       <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>

public/views/block.html

@@ -4,7 +4,7 @@
     <div class="col-xs-12 col-gray col-gray-fixed">
       <h1 class="text-center">Block</h1>
       <div class="block-id">
-        <span class="glyphicon glyphicon-list-alt"></span>
+        <span class="glyphicon glyphicon-th"></span>
         <h2 data-ng-if="block">#{{block.height}}</h2>
       </div>
       <div class="m10v">

public/views/includes/currency.html

@@ -1,8 +1,9 @@
-<div class="currency text-center m10t" data-ng-controller="CurrencyController">
-  <small>
-    Currency:
-    <a href="#" data-ng-click="setCurrency('USD')" data-ng-class="{active: currency.symbol == 'USD'}" tooltip="Change to USD: Bitstamp ${{currency.bitstamp}}">USD</a> ·
-    <a href="#" data-ng-click="setCurrency('BTC')" data-ng-class="{active: currency.symbol == 'BTC'}" tooltip="Change to BTC">BTC</a> ·
-    <a href="#" data-ng-click="setCurrency('mBTC')" data-ng-class="{active: currency.symbol == 'mBTC'}" tooltip="Change to mBTC">mBTC</a>
-  </small>
-</div>
+<div class="text-center">
+	<small class="text-muted">Currency:</small>
+	<div class="btn-group m10l" data-ng-controller="CurrencyController">
+	    
+	    <a href="#" type="button" class="small btn btn-default btn-sm" data-ng-click="setCurrency('USD')" data-ng-class="{active: currency.symbol == 'USD'}" tooltip="Change to USD: Bitstamp ${{currency.bitstamp}}"> <small>USD </small></a>
+	    <a href="#" type="button" class="btn btn-default btn-sm" data-ng-click="setCurrency('BTC')" data-ng-class="{active: currency.symbol == 'BTC'}" tooltip="Change to BTC"><small>BTC</small></a>
+	    <a href="#" type="button" class="btn btn-default btn-sm" data-ng-click="setCurrency('mBTC')" data-ng-class="{active: currency.symbol == 'mBTC'}" tooltip="Change to mBTC"><small>mBTC</small></a>
+	</div>
+</div>

public/views/transaction.html

@@ -4,7 +4,7 @@
   <div class="col-xs-12 col-gray col-gray-fixed">
     <h1 class="text-center">Transaction</h1>
     <div class="tx-id">
-      <span class="glyphicon glyphicon-retweet"></span>
+      <span class="glyphicon glyphicon-transfer"></span>
     </div>
     <div class="m10v">
       <button class="btn-copy pull-right" clip-copy="tx.txid"></button>