From b86f199c56580b60dd07cb6b4ed422bbd0005209 Mon Sep 17 00:00:00 2001
From: Gustavo Cortez <cmgustavo83@gmail.com>
Date: Mon, 24 Feb 2014 13:42:47 -0300
Subject: [PATCH] fix layout of transaction page. fix icons expand and
 copy/paste

---
 public/src/css/common.css        | 35 ++++++++------
 public/views/transaction.html    | 83 +++++++++++++-------------------
 public/views/transaction/tx.html | 46 +++++++++---------
 3 files changed, 74 insertions(+), 90 deletions(-)

diff --git a/public/src/css/common.css b/public/src/css/common.css
index d93ad04d..5d8c46a1 100644
--- a/public/src/css/common.css
+++ b/public/src/css/common.css
@@ -71,6 +71,10 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 
 .vm { vertical-align: middle; }
 
+.bgwhite {
+  background-color: white;
+}
+
 .btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
 margin-left: 0;
 }
@@ -511,38 +515,37 @@ margin-left: 0;
   color: black;
 }
 
-.btn-copy, .btn-expand {
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  background-color: #FFFFFF;
-  border-radius: 2px;
-  border: 2px solid #E4E4E4;
+.btn-copy {
   color: #9b9b9b;
   display: inline-block;
-  height: 25px;
-  padding: 0;
+  height: 16px;
+  width: 16px;
   outline: none;
-  text-align: center;
-  width: 30px;
+  vertical-align: sub;
+}
+
+.btn-expand {
+  color: #9b9b9b;
+  vertical-align: middle;
 }
 
 .btn-copy:hover, .btn-expand:hover {
-  background-color: #f2f2f2;
+  color: #000;
+  text-decoration: none;
 }
 
 .btn-copy {
-  background: #fff url('/img/icons/copy.png') center center no-repeat;
-  margin-left: 5px;
+  background: transparent url('/img/icons/copy.png') center center no-repeat;
 }
+
 .btn-copy .tooltip {
-  display: inline-block;
-  margin-left: 10px;
+  display: block;
+  margin-left: 20px;
   margin-top: -2px;
   opacity: 0;
 }
 .btn-copy.zeroclipboard-is-hover { color: #2a6496; }
 .btn-copy.zeroclipboard-is-active .tooltip { opacity: 1; }
-.btn-expand { margin-right: 5px; }
 
 @media (max-width: 991px) {
   .btn-copy {
diff --git a/public/views/transaction.html b/public/views/transaction.html
index c0cf9bbd..587e3942 100644
--- a/public/views/transaction.html
+++ b/public/views/transaction.html
@@ -1,61 +1,44 @@
 <div data-ng-include src="'/views/includes/connection.html'"></div>
 <section data-ng-controller="transactionsController" data-ng-init="findThis()">
-  
-  <div class="row ng-cloak" data-ng-cloak data-ng-if="tx.txid">
-    <div class="col-xs-12 col-gray col-gray-fixed">
-      <div class="m20v text-center text-muted" data-ng-if="!tx.txid">
-        <span>Loading Transaction...</span>
-      </div>
-      <div class="ng-cloak" data-ng-cloak data-ng-if="tx.txid">
-        <div class="tx-id">
-          <span class="glyphicon glyphicon-retweet"></span>
-        </div>
-        <div class="m10v">
-          <button class="btn-copy pull-right" clip-copy="tx.txid"></button>
-          <div class="ellipsis">
-            <a class="txid" href="/tx/{{tx.txid}}">{{tx.txid}}</a>
-          </div>
-        </div>
-        <h4>Summary</h4>
-        <table class="table" style="table-layout: fixed">
-          <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 data-ng-show="tx.firstSeenTs" class="text-muted text-right">{{tx.firstSeenTs * 1000|date:'medium'}}</td>
-            <td data-ng-show="!tx.firstSeenTs" class="text-muted text-right">N/A</td>
-          </tr>
-          <tr>
-            <td><strong>Mined Time </strong></td>
-            <td data-ng-show="tx.time" class="text-muted text-right">{{tx.time * 1000|date:'medium'}}</td>
-            <td data-ng-show="!tx.time" class="text-muted text-right">N/A</td>
-          </tr>
-
-          </tbody>
-        </table>
-      </div>
-      <div data-ng-include src="'/views/includes/currency.html'"></div>
-    </div>
-    <div class="col-xs-12 col-md-9 col-md-offset-3">
-      <h1>Transaction
+  <div class="ng-cloak" data-ng-cloak data-ng-if="tx.txid">
+    <h1>Transaction 
       <small data-ng-show="from_vin || from_vout">
         <span data-ng-show="from_vin">Input</span> 
         <span data-ng-show="from_vout">Output</span> 
-        <span>{{v_index}}</span> 
+        <span>{{v_index}}</span>
       </small>
-      </h1>
-      <div class="progress progress-striped active" data-ng-if="!tx.txid">
-        <div class="progress-bar progress-bar-info" style="width: 100%">
-          <span>Loading Transaction Details...</span>
-        </div>
-      </div>
-      <div class="block-tx ng-cloak" data-ng-cloak data-ng-if="tx.txid">
-        <div data-ng-include src="'/views/transaction/tx.html'"></div>
+    </h1>
+    <div class="well well-sm ellipsis">
+      <span class="txid text-muted">{{tx.txid}}</span>
+      <span class="btn-copy" clip-copy="tx.txid"></span>
+    </div>
+    <div class="progress progress-striped active" data-ng-if="!tx.txid">
+      <div class="progress-bar progress-bar-info" style="width: 100%">
+        <span>Loading Transaction Details...</span>
       </div>
     </div>
+    <h2>Summary</h2>
+    <table class="table" style="table-layout: fixed">
+      <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 data-ng-show="tx.firstSeenTs" class="text-muted text-right">{{tx.firstSeenTs * 1000|date:'medium'}}</td>
+        <td data-ng-show="!tx.firstSeenTs" class="text-muted text-right">N/A</td>
+      </tr>
+      <tr>
+        <td><strong>Mined Time </strong></td>
+        <td data-ng-show="tx.time" class="text-muted text-right">{{tx.time * 1000|date:'medium'}}</td>
+        <td data-ng-show="!tx.time" class="text-muted text-right">N/A</td>
+      </tr>
+      </tbody>
+    </table>
+    <div class="block-tx ng-cloak" data-ng-cloak data-ng-if="tx.txid">
+      <div data-ng-include src="'/views/transaction/tx.html'"></div>
+    </div>
   </div>
 </section>
 
diff --git a/public/views/transaction/tx.html b/public/views/transaction/tx.html
index 81a0bdc7..f3812057 100644
--- a/public/views/transaction/tx.html
+++ b/public/views/transaction/tx.html
@@ -1,19 +1,22 @@
 <div class="line-bot row ng-cloak" data-ng-hide="!tx" data-ng-cloak>
   <div class="col-xs-12 col-md-6">
-    <button class="btn-expand pull-left" data-ng-click="itemsExpanded = !itemsExpanded"><span class="glyphicon glyphicon-plus-sign" data-ng-class="{'glyphicon-minus-sign': itemsExpanded}" tooltip="Show/Hide items details" tooltip-placement="right"></span></button>
-    <button class="btn-copy pull-right" clip-copy="tx.txid"></button>
     <div class="ellipsis">
+      <a class="btn-expand" href="#" title="Show/Hide items details" data-ng-click="itemsExpanded = !itemsExpanded">
+        <span class="glyphicon glyphicon-plus-sign" data-ng-class="{'glyphicon-minus-sign': itemsExpanded}"></span>
+      </a>
       <a class="txid" href="/tx/{{tx.txid}}">{{tx.txid}}</a>
+      <span class="btn-copy" clip-copy="tx.txid"></span>
     </div>
   </div>
-
-  <div class="col-xs-12 col-md-6 text-right" data-ng-show="tx.firstSeenTs">
-    first seen at 
-    <time>{{tx.firstSeenTs * 1000 | date:'medium'}}</time>
-  </div>
-  <div class="col-xs-12 col-md-6 text-right" data-ng-show="tx.time && !tx.firstSeenTs">
-    mined at
-    <time>{{tx.time * 1000 | date:'medium'}}</time>
+  <div class="col-xs-12 col-md-6 text-right">
+    <div data-ng-show="tx.firstSeenTs">
+      first seen at 
+      <time>{{tx.firstSeenTs * 1000 | date:'medium'}}</time>
+    </div>
+    <div data-ng-show="tx.time && !tx.firstSeenTs">
+      mined at
+      <time>{{tx.time * 1000 | date:'medium'}}</time>
+    </div>
   </div>
 </div>
 <div class="row line-mid">
@@ -31,7 +34,7 @@
       <div data-ng-if="!itemsExpanded" data-ng-init="currentInNoExpanded=0; sizeInNoExpanded=5">
         <div data-ng-repeat="vin in tx.vinSimple| startFrom:currentInNoExpanded*sizeInNoExpanded | limitTo:sizeInNoExpanded">
           <div class="col-md-12 transaction-vin-vout">
-            <div class="pull-right btc-value" data-ng-class="{'text-danger': $root.currentAddr == vin.addr}"><p>{{$root.currency.getConvertion(vin.value)}}</p></div>
+            <div class="pull-right btc-value" data-ng-class="{'text-danger': $root.currentAddr == vin.addr}"><p>{{$root.currency.getConvertion(vin.value) || vin.value + ' BTC'}}</p></div>
             <div class="ellipsis">
               <span data-ng-show="vin.notAddr">{{vin.addr}}</span>
               <span class="text-muted" title="Current Bitcoin Address" data-ng-show="vin.addr == $root.currentAddr">{{vin.addr}}</span>
@@ -56,7 +59,7 @@
         <a href="#" data-ng-show="(from_vin) && tx.vin.length > 1" data-ng-class="{'text-muted': !fromVinCollapsed}" data-ng-click="currentInExpanded=0; sizeInExpanded=tx.vin.length;fromVinCollapsed=0"><small>show all</small></a>
         <div data-ng-repeat="vin in tx.vin| startFrom:currentInExpanded*sizeInExpanded | limitTo:sizeInExpanded" data-ng-if="fromVinCollapsed ? v_index == vin.n : 1">
           <div class="col-md-12 transaction-vin-vout">
-            <div class="pull-right btc-value"><p>{{$root.currency.getConvertion(vin.value)}}</p></div>
+            <div class="pull-right btc-value"><p>{{$root.currency.getConvertion(vin.value) || vin.value + ' BTC'}}</p></div>
             <div class="ellipsis">
               <a class="glyphicon glyphicon-chevron-right" href="/tx/{{vin.txid}}/>/{{vin.vout}}" title="Outpoint: {{vin.txid}},{{vin.vout}}"></a>&nbsp;&nbsp;
               <span data-ng-show="vin.notAddr">{{vin.addr}}</span>
@@ -104,7 +107,7 @@
             <div class="pull-right btc-value" data-ng-class="{'text-success': $root.currentAddr == vout.addr}">
 
               <p>
-              {{$root.currency.getConvertion(vout.value)}}
+              {{$root.currency.getConvertion(vout.value) || vout.value + ' BTC' }}
               <span class="text-danger" data-ng-show="vout.isSpent" tooltip="Output is spent" tooltip-placement="left">(S)</span>
               <span class="text-success" data-ng-show="!vout.isSpent"  tooltip="Output is unspent" tooltip-placement="left">(U)</span>
               </p>
@@ -130,7 +133,7 @@
         <div data-ng-repeat="vout in tx.vout| startFrom:currentOutExpanded*sizeOutExpanded | limitTo:sizeOutExpanded" data-ng-if="fromVoutCollapsed ? v_index == vout.n : 1">
           <div class="col-md-12 transaction-vin-vout">
             <div class="pull-right btc-value">
-              <p>{{$root.currency.getConvertion(vout.value)}}
+              <p>{{$root.currency.getConvertion(vout.value) || vout.value + ' BTC'}}
                 <span class="text-success" data-ng-show="!vout.spentTxId" tooltip="Output is unspent" tooltip-placement="left">(U)</span>
                 <a class="glyphicon glyphicon-chevron-right" data-ng-show="vout.spentTxId" href="/tx/{{vout.spentTxId}}/</{{vout.spentIndex}}" title="Spent at: {{vout.spentTxId}},{{vout.spentIndex}}"></a>&nbsp;&nbsp;
               </p>
@@ -165,23 +168,18 @@
   </div>
 </div>
 
-<div class="panel panel-default" data-ng-if="itemsExpanded && !block.hash">
-  <div class="panel-body" style="word-wrap:break-word">
-    <small>
-      <strong>BlockHash</strong>
-      <a href="/block/{{tx.blockhash}}">{{tx.blockhash}}</a>
-      <button class="btn-copy" clip-copy="tx.blockhash"></button>
-    </small>
-  </div>
+<div class="well well-sm bgwhite ellipsis" data-ng-if="itemsExpanded && !block.hash">
+  <strong>BlockHash</strong> <a class="text-muted" href="/block/{{tx.blockhash}}">{{tx.blockhash}}</a>
+  <span class="btn-copy" clip-copy="tx.blockhash"></span>
 </div>
 
 <div class="line-top row ng-cloak" data-ng-hide="!tx" data-ng-cloak>
   <div class="col-xs-12 col-sm-4 col-md-4">
-    <span data-ng-show="!tx.isCoinBase &&  !isNaN(parseFloat(tx.fees))" class="txvalues txvalues-default">Fees: {{$root.currency.getConvertion(tx.fees)}} </span>
+    <span data-ng-show="!tx.isCoinBase &&  !isNaN(parseFloat(tx.fees))" class="txvalues txvalues-default">Fees: {{$root.currency.getConvertion(tx.fees) || tx.fees + 'BTC'}} </span>
   </div>
   <div class="col-xs-12 col-sm-8 col-md-8 text-right">
     <span data-ng-show="tx.confirmations" class="txvalues txvalues-success">{{tx.confirmations}} Confirmations</span>
     <span data-ng-show="!tx.confirmations" class="txvalues txvalues-danger">Unconfirmed Transaction!</span>
-    <span class="txvalues txvalues-primary">{{$root.currency.getConvertion(tx.valueOut)}}</span>
+    <span class="txvalues txvalues-primary">{{$root.currency.getConvertion(tx.valueOut) || tx.valueOut + ' BTC' }}</span>
   </div>
 </div>