From 4a664f71237acf283802dd455ed0dc5f9b474409 Mon Sep 17 00:00:00 2001
From: Bechi <bechilandia@gmail.com>
Date: Fri, 17 Jan 2014 16:18:27 -0300
Subject: [PATCH] transaction page

---
 public/css/common.css         |  53 ++++++++--
 public/views/transaction.html | 183 +++++++++++++++-------------------
 2 files changed, 130 insertions(+), 106 deletions(-)

diff --git a/public/css/common.css b/public/css/common.css
index 3fc2670..b069739 100644
--- a/public/css/common.css
+++ b/public/css/common.css
@@ -34,6 +34,16 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   padding: 0 0 60px;
 }
 
+.m10h {margin: 0 10px;}
+.m20h {margin: 0 20px;}
+.m20v {margin: 20px 0;}
+.m50v {margin: 50px 0;}
+.m10b {margin-bottom: 10px;}
+
+.vm {
+  vertical-align: middle;
+}
+
 .navbar-default {
   background-color: #8DC429;
   border-bottom: 4px solid #64920F;
@@ -145,22 +155,45 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   border-radius: 2px;
   background: #F4F4F4;
   margin: 20px 0;
-  padding: 15px;
+  padding: 20px;
 }
 
-.btn-primary {
+.btn {
+  margin: 0 5px;
   border-radius: 2px;
-  background: #64920F;
-  border: 2px solid #557F08;
+}
+.btn-primary {
+  background: #8DC429;
+  border: 2px solid #76AF0F;
 }
 
-.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
+.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
+.btn-primary.active, .open .dropdown-toggle.btn-primary,
+.btn-success:hover, .btn-success:focus, .btn-success:active,
+.btn-success.active, .open .dropdown-toggle.btn-success,
+.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
+.btn-danger.active, .open .dropdown-toggle.btn-danger {
   background: #fff;
   border: 2px solid #ccc;
   color: #373D42;
   font-weight: 500;
 }
 
+.btn-default {
+  background: #E7E7E7;
+  border: 2px solid #DCDCDC;
+}
+
+.btn-success {
+  background: #2FA4D7;
+  border: 2px solid #237FA7;
+}
+
+.btn-danger {
+  background: #AC0015;
+  border: 2px solid #6C0000;
+}
+
 /* Set the fixed height of the footer here */
 #footer {
   height: 60px;
@@ -217,7 +250,15 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   opacity: 1;
 }
 
-
+.tx-bg {
+  background-color: #F4F4F4;
+  width: 100%;
+  min-height: 340px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -9999;
+}
 
 .badge {
   padding: 1px 9px 2px;
diff --git a/public/views/transaction.html b/public/views/transaction.html
index 7ba4744..8bca73b 100644
--- a/public/views/transaction.html
+++ b/public/views/transaction.html
@@ -1,35 +1,26 @@
 <section data-ng-controller="transactionsController" data-ng-init="findOne()">
-  <div class="page-header">
     <h1>
-      Transaction 
+      Transaction
       <small>View information about a bitcoin transaction</small>
     </h1>
-  </div>
 
-  <div class="well well-sm">
-    {{tx.txid}} 
-  </div>  
+  <div class="block-tx">
+    <div class="line-bot">
+      <a href="/#!/tx/{{tx.txid}}">{{tx.txid}}</a>
+    </div> 
 
-  <table class="table table-striped">
-    <thead>
-      <tr>
-        <th>Input</th>
-        <th>&nbsp;</th>
-        <th>Output</th>
-      </tr>
-    </thead>
-    <tbody>
-    <tr>
-      <td width="45%"> 
+    <div class="row m10b">
+
+      <div class="col-md-5">
         <ul class="list-unstyled" data-ng-repeat="vin in tx.vin" data-ng-show="!tx.isCoinBase">
           <li>
-          <span data-ng-show="!vin.addr">Address could not be parsed</span>  
-          <a data-ng-show="vin.addr" href="/#!/address/{{vin.addr}}">{{vin.addr}}</a>  
-          <span class="pull-right badge">{{vin.value}} BTC</span>
+            <a class="m10h vm lead glyphicon glyphicon-circle-arrow-left" href="/#!/tx/{{vin.txid}}" alt="Outpoint: {{vin.txid}},{{vin.vout}}" data-toggle="tooltip" title="Outpoint: {{vin.txid}},{{vin.vout}}">
+            </a>
+            <span data-ng-show="!vin.addr">Address could not be parsed</span>  
+            <a data-ng-show="vin.addr" href="/#!/address/{{vin.addr}}">{{vin.addr}}</a>  
+            <span class="pull-right badge">{{vin.value}} BTC</span>
           </li>
 
-          <li>
-          Outpoint: <a href="/#!/tx/{{vin.txid}}">{{vin.txid}},{{vin.vout}}</a>
         </ul>
         <div data-ng-show="tx.isCoinBase">
           <ul class="list-unstyled" data-ng-repeat="vinn in tx.vin">
@@ -39,89 +30,81 @@
             </li>
           </ul>
         </div>
-      </td>
-      <td width="10%" style="text-align: center;"><span class="glyphicon glyphicon-chevron-right">&nbsp;</span></td>
-      <td width="45%">
-        <table class="table table-condensed">
-          <tbody>
-          <tr data-ng-repeat="vout in tx.vout">
-            <td><b>{{vout.scriptPubKey.type}}</b></td>
-            <td>
-              <ul class="list-unstyled" data-ng-repeat="addr in vout.scriptPubKey.addresses">
-                <li><a href="/#!/address/{{addr}}">{{addr}}</a> <span class="pull-right badge">{{vout.value}} BTC</span></li>
-              </ul>
-            </td>
-          </tr>
-          </tbody>
-        </table>
-      </td>
-    </tr>
-    </tbody>
-    <tfoot>
-      <tr>
-        <td colspan="3" style="text-align: right;">
-          <button data-ng-show="tx.confirmations" type="button" class="btn btn-primary">
-            {{tx.confirmations}} Confirmations
-          </button>
-          <button data-ng-show="!tx.confirmations"  type="button" class="btn btn-danger">
-            Unconfirmed Transaction!
-          </button>
-          <button type="button" class="btn btn-success">{{tx.valueOut}} BTC</button>
-        </td>
-      </tr>
-    </tfoot>
-  </table>
+      </div>
 
-  <div class="row">
-    <div class="col-md-6">
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          <h3 class="panel-title">Summary</h3>
-        </div>
-        <div class="panel-body">
-          <table class="table table-striped">
-            <tbody>
-            <tr>
-              <td>Size</td>
-              <td>{{tx.size}} (bytes)</td>
-            </tr>
-            <tr>
-              <td>Received Time</td>
-              <td>{{tx.time * 1000|date:'medium'}}</td>
-            </tr>
-            <tr>
-              <td>Block</td>
-              <td><a href="/#!/block/{{tx.blockhash}}">Block</a></td>
-            </tr>
-            </tbody>
-          </table>
+      <div class="col-md-2 text-center">
+        <span class="glyphicon glyphicon-chevron-right lead"></span>
+      </div>
+
+      <div class="col-md-5" data-ng-repeat="vout in tx.vout">
+        <div class="row m10b">
+          <div class="col-md-3">
+            <b>{{vout.scriptPubKey.type}}</b>
+          </div>
+          <div class="col-md-9">
+            <ul class="list-unstyled" data-ng-repeat="addr in vout.scriptPubKey.addresses">
+              <li>
+                <a class="ellipsis pull-left" style="width:200px;" href="/#!/address/{{addr}}">{{addr}}</a>
+                <span class="pull-right badge">{{vout.value}} BTC</span>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
-    <div class="col-md-6">
-      <div class="panel panel-default" data-ng-show="!tx.isCoinBase">
-        <div class="panel-heading">
-          <h3 class="panel-title">Inputs and Outputs</h3>
-        </div>
-        <div class="panel-body">
-          <table class="table table-striped">
-            <tbody>
-            <tr>
-              <td>Total Input</td>
-              <td>{{tx.valueIn}} BTC</td>
-            </tr>
-            <tr>
-              <td>Total Output</td>
-              <td>{{tx.valueOut}} BTC</td>
-            </tr>
-            <tr>
-              <td>Fees</td>
-              <td>{{tx.feeds}} BTC</td>
-            </tr>
-            </tbody>
-          </table>
-        </div>
+
+    <div class="line-top">
+      <small class="text-muted">Feeds: {{tx.feeds}}</small>
+      <div class="pull-right">
+        <button data-ng-show="tx.confirmations" type="button" class="btn btn-success">
+          {{tx.confirmations}} Confirmations
+        </button>
+        <button data-ng-show="!tx.confirmations"  type="button" class="btn btn-danger">
+          Unconfirmed Transaction!
+        </button>
+        <button type="button" class="btn btn-primary">{{tx.valueOut}} BTC</button>
       </div>
+    </div> 
+  </div><!--  END OF BLOCK-TX -->
+
+  <div class="row m50v">
+    <div data-ng-class="{'col-md-6':!tx.isCoinBase}">
+      <h3>Summary</h3>
+      <table class="table">
+        <tbody>
+        <tr>
+          <td><strong> Size </strong></td>
+          <td class="text-muted text-right">{{tx.size}} (bytes)</td>
+        </tr>
+        <tr>
+          <td><strong>Received Time </strong></td>
+          <td class="text-muted text-right">{{tx.time * 1000|date:'medium'}}</td>
+        </tr>
+        <tr>
+          <td><strong>Block </strong></td>
+          <td class="text-muted text-right"><a href="/#!/block/{{tx.blockhash}}">Block</a></td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="col-md-6"  data-ng-show="!tx.isCoinBase">
+      <h3>Inputs and Outputs</h3>
+        <table class="table">
+          <tbody>
+          <tr>
+            <td><strong>Total Input</strong></td>
+            <td class="text-muted text-right">{{tx.valueIn}} BTC</td>
+          </tr>
+          <tr>
+            <td><strong>Total Output</strong></td>
+            <td class="text-muted text-right">{{tx.valueOut}} BTC</td>
+          </tr>
+          <tr>
+            <td><strong>Fees</strong></td>
+            <td class="text-muted text-right">{{tx.feeds}} BTC</td>
+          </tr>
+          </tbody>
+        </table>
     </div>
   </div>
 </section>