From 6efbede3614fdf3efd20fb25fdb192227bbdde3e Mon Sep 17 00:00:00 2001
From: Bechi <bechilandia@gmail.com>
Date: Mon, 20 Jan 2014 15:31:02 -0300
Subject: [PATCH] fix transaction list

---
 public/css/common.css              | 17 +++++---
 public/views/transaction/list.html | 65 +++++++++++++++++++-----------
 2 files changed, 54 insertions(+), 28 deletions(-)

diff --git a/public/css/common.css b/public/css/common.css
index af3ab74..5747588 100644
--- a/public/css/common.css
+++ b/public/css/common.css
@@ -36,6 +36,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 
 .m10h {margin: 0 10px;}
 .m20h {margin: 0 20px;}
+.m5v {margin: 5px 0;}
 .m20v {margin: 20px 0;}
 .m50v {margin: 50px 0;}
 .m10b {margin-bottom: 10px;}
@@ -107,6 +108,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 }
 
 .ellipsis {
+  width: 100%;
   display: block;
   white-space: nowrap;
   overflow: hidden;
@@ -152,10 +154,15 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 }
 
 .block-tx {
+  overflow: hidden;
   border-radius: 2px;
   background: #F4F4F4;
-  margin: 20px 0;
-  padding: 20px;
+  margin: 20px 0 10px;
+  padding: 15px;
+}
+
+.block-tx p {
+  margin: 0 0 5px;
 }
 
 .btn {
@@ -208,7 +215,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 
 .line-top {
   padding: 10px 0;
-  margin-top: 10px;
+  margin-top: 5px;
   border-top: 1px solid #EAEAEA;
 }
 
@@ -219,9 +226,9 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 #wrap > .container {
   padding: 60px 15px 0;
 }
-.container .text-muted {
+/*.container .text-muted {
   margin: 20px 0;
-}
+}*/
 
 #footer > .container {
   padding-left: 15px;
diff --git a/public/views/transaction/list.html b/public/views/transaction/list.html
index 2012dcd..f8501c9 100644
--- a/public/views/transaction/list.html
+++ b/public/views/transaction/list.html
@@ -8,35 +8,46 @@
 
   <div class="row">
     <div class="col-md-5">
-      <div data-ng-show="tx.isCoinBase" data-ng-repeat="vin in tx.vin">
-        <span>No Inputs (Newly Generated isCoinBasens)</span>
-        <span class="badge">{{vin.reward}} BTC</span>
-      </div>
-      <div data-ng-show="!tx.isCoinBase">
-        <div data-ng-repeat="vin in tx.vin">
-          <a href="/#!/address/{{vin.addr}}" class="ellipsis">{{vin.addr}}</a>
-          <span class="badge">{{vin.value}} BTC</span>
-          <p>
-          Outpoint:
-          <a href="/#!/tx/{{vin.txid}}" class="ellipsis">{{vin.txid}}</a>
-          </p>
+      <div class="ellipsis row" data-ng-show="tx.isCoinBase" data-ng-repeat="vin in tx.vin">
+        <div class="col-md-10">
+          <p class="ellipsis">No Inputs (Newly Generated isCoinBasens)</p>
         </div>
+        <p class="text-muted pull-right"> <small>{{vin.reward}} BTC</small></p>
       </div>
+      <ul class="list-unstyled" data-ng-repeat="vin in tx.vin" data-ng-show="!tx.isCoinBase">
+        <li class="row">
+          <a class="col-md-1 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>
+          <div class="col-md-8">
+            <div class="ellipsis">
+              <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>  
+            </div>
+          </div>
+          <p class="text-right text-muted"><small>{{vin.value}} BTC</small></p>
+        </li>
+      </ul>
     </div>
-    <div class="col-md-2">
+
+    <div class="col-md-1 text-center">
       <span class="glyphicon glyphicon-arrow-right lead">&nbsp;</span>
     </div>
-    <div class="col-md-5">
+
+    <div class="col-md-6">
       <div class="row">
-        <div class="col-md-6">
+        <div class="col-md-3">
           <div data-ng-repeat="vout in tx.vout">
-            <span data-ng-repeat="address in vout.scriptPubKey.addresses">{{vout.scriptPubKey.type}}</span>
+            <small data-ng-repeat="address in vout.scriptPubKey.addresses">{{vout.scriptPubKey.type}}</small>
           </div>
         </div>
-        <div class="col-md-6 text-right">
-          <div data-ng-repeat="vout in tx.vout">
-            <a href="/#!/address/{{address}}" data-ng-repeat="address in vout.scriptPubKey.addresses" class="ellipsis">{{address}}</a>
-            <span class="badge">{{vout.value}} BTC</span>
+        <div data-ng-repeat="vout in tx.vout">
+          <div class="col-md-6">
+            <div class="ellipsis">
+              <a href="/#!/address/{{address}}" data-ng-repeat="address in vout.scriptPubKey.addresses" class="ellipsis">{{address}}</a>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <p class="text-right text-muted"> <small>{{vout.value}} BTC</small></p>
           </div>
         </div>
       </div>
@@ -44,9 +55,17 @@
   </div>
 
   <div class="line-top">
-    <small data-ng-show="!tx.isCoinBase" class="text-muted">Feeds: {{tx.feeds}}</small>
-    <div class="btn btn-primary pull-right">
-      {{tx.valueOut}}
+    <div class="m5v">
+      <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>
+      <small data-ng-show="!tx.isCoinBase" class="text-muted">Feeds: {{tx.feeds}}</small>
     </div>
   </div>
 </div>