From 8710ce410d1b96ca09b4124a66c3474716623585 Mon Sep 17 00:00:00 2001
From: Gustavo Cortez <cmgustavo83@gmail.com>
Date: Tue, 18 Feb 2014 12:48:43 -0300
Subject: [PATCH] limit list of addr to 6 with a show more link.

---
 public/views/transaction/tx.html | 109 ++++++++++++++++---------------
 1 file changed, 57 insertions(+), 52 deletions(-)

diff --git a/public/views/transaction/tx.html b/public/views/transaction/tx.html
index d84c8954..8fd3b588 100644
--- a/public/views/transaction/tx.html
+++ b/public/views/transaction/tx.html
@@ -26,8 +26,8 @@
       </div>
     </div>
     <div class="row" data-ng-show="!tx.isCoinBase">
-      <div data-ng-repeat="vin in tx.vinSimple" data-ng-show="!itemsExpanded">
-        <div class="col-md-12 transaction-vin-vout">
+      <div data-ng-repeat="vin in tx.vinSimple" data-ng-class="{ 'hidden': itemsExpanded}">
+        <div class="col-md-12 transaction-vin-vout" data-ng-class="{ 'hidden': $index > 5 && !showMoreIn }">
           <div class="text-muted pull-right btc-value" data-ng-class="{'text-danger': $root.currentAddr == vin.addr}"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
           <div class="ellipsis">
             <span data-ng-show="vin.notAddr">{{vin.addr}}</span>
@@ -41,32 +41,38 @@
           </div>
         </div>
       </div>
-      <div data-ng-repeat="vin in tx.vin" data-ng-show="itemsExpanded">
-        <div class="col-md-12 transaction-vin-vout">
-          <div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
-          <div class="ellipsis">
-            <a class="glyphicon glyphicon-chevron-right" href="/#!/tx/{{vin.txid}}" title="Outpoint: {{vin.txid}},{{vin.vout}}"></a>&nbsp;&nbsp;
-            <span data-ng-show="vin.notAddr">{{vin.addr}}</span>
-            <a href="/address/{{vin.addr}}" data-ng-show="!vin.notAddr">{{vin.addr}}</a>
-          </div>
-          <div data-ng-show="vin.unconfirmedInput" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> (Input unconfirmed)</div>
-          <div data-ng-show="vin.dbError" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Incoherence in levelDB detected, please resync</div>
-          <div data-ng-show="vin.doubleSpentTxID" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Double spent attempt detected. From tx:
+      <div data-ng-repeat="vin in tx.vin" data-ng-class="{ 'hidden': !itemsExpanded }">
+        <div data-ng-class="{ 'hidden': $index > 5 && !showMoreIn }">
+          <div class="col-md-12 transaction-vin-vout">
+            <div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
+            <div class="ellipsis">
+              <a class="glyphicon glyphicon-chevron-right" href="/tx/{{vin.txid}}" title="Outpoint: {{vin.txid}},{{vin.vout}}"></a>&nbsp;&nbsp;
+              <span data-ng-show="vin.notAddr">{{vin.addr}}</span>
+              <a href="/address/{{vin.addr}}" data-ng-show="!vin.notAddr">{{vin.addr}}</a>
+            </div>
+            <div data-ng-show="vin.unconfirmedInput" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> (Input unconfirmed)</div>
+            <div data-ng-show="vin.dbError" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Incoherence in levelDB detected, please resync</div>
+            <div data-ng-show="vin.doubleSpentTxID" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Double spent attempt detected. From tx:
               <a href="/tx/{{vin.doubleSpentTxID}}">{{vin.doubleSpentTxID}},{{vin.doubleSpentIndex}}</a>
-          </div>
+            </div>
 
-        </div>
-        <div class="col-md-12">
-          <div class="panel panel-default">
-            <div class="panel-body" style="word-wrap:break-word">
-              <small>
-                <strong>scriptSig</strong>
-                {{vin.scriptSig.asm}}
-              </small>
+          </div>
+          <div class="col-md-12">
+            <div class="panel panel-default">
+              <div class="panel-body" style="word-wrap:break-word">
+                <small>
+                  <strong>scriptSig</strong>
+                  {{vin.scriptSig.asm}}
+                </small>
+              </div>
             </div>
           </div>
         </div>
       </div>
+      <div class="showmore_collapse text-center" data-ng-show="tx.vin.length > 6">
+        <a href="#" data-ng-show="!showMoreIn" data-ng-click="showMoreIn = !showMoreIn">more...</a>
+        <a href="#" data-ng-show="showMoreIn" data-ng-click="showMoreIn = !showMoreIn">...less</a>
+      </div>
     </div>
   </div>
   <div class="col-md-1 text-center hidden-xs hidden-sm">
@@ -77,8 +83,8 @@
   </div>
   <div class="col-md-6">
     <div class="row">
-      <div data-ng-repeat="vout in tx.voutSimple" data-ng-show="!itemsExpanded">
-        <div class="col-md-12 transaction-vin-vout">
+      <div data-ng-repeat="vout in tx.voutSimple" data-ng-class="{ 'hidden': itemsExpanded}">
+        <div class="col-md-12 transaction-vin-vout" data-ng-class="{ 'hidden': $index > 5 && !showMoreOut }">
           <div class="text-muted pull-right btc-value" data-ng-class="{'text-success': $root.currentAddr == vout.addr}">
 
           <small>
@@ -97,46 +103,45 @@
 
         </div>
       </div>
-      <div data-ng-repeat="vout in tx.vout" data-ng-show="itemsExpanded">
-        <div class="col-md-12 transaction-vin-vout">
-          <div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vout.value)}}
-<<<<<<< HEAD
-            <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}}" title="Spent at: {{vout.spentTxId}},{{vout.spentIndex}}"></a>&nbsp;&nbsp;
-=======
-            <span class="text-success" data-ng-show="!vout.spendTxId"  tooltip="Output is unspent" tooltip-placement="left">(U)</span>
-            <a class="glyphicon glyphicon-chevron-right" data-ng-show="vout.spendTxId" href="/#!/tx/{{vout.spendTxId}}" title="Spent at: {{vout.spendTxId}},{{vout.spendIndex}}"></a>&nbsp;&nbsp;
->>>>>>> 8e733340d31053254750053c5ca686eac87c5139
- 
-
-          </small>
-
+      <div data-ng-repeat="vout in tx.vout" data-ng-class="{ 'hidden': !itemsExpanded}">
+        <div data-ng-class="{ 'hidden': $index > 5 && !showMoreOut }">
+          <div class="col-md-12 transaction-vin-vout">
+            <div class="text-muted pull-right btc-value">
+              <small>{{$root.currency.getConvertion(vout.value)}}
+                <span class="text-success" data-ng-show="!vout.spendTxId" tooltip="Output is unspent" tooltip-placement="left">(U)</span>
+                <a class="glyphicon glyphicon-chevron-right" data-ng-show="vout.spendTxId" href="/tx/{{vout.spendTxId}}" title="Spent at: {{vout.spendTxId}},{{vout.spendIndex}}"></a>&nbsp;&nbsp;
+              </small>
+            </div>
+            <div class="ellipsis">
+              <a href="/address/{{address}}" data-ng-repeat="address in vout.scriptPubKey.addresses">{{address}}</a>
+            </div>
           </div>
-          <div class="ellipsis">
-            <a href="/address/{{address}}" data-ng-repeat="address in vout.scriptPubKey.addresses">{{address}}</a>
-          </div>
-        </div>
-        <div class="col-md-12">
-          <div class="panel panel-default">
-            <div class="panel-body" style="word-wrap:break-word">
-              <small>
-                <p>
+          <div class="col-md-12">
+            <div class="panel panel-default">
+              <div class="panel-body" style="word-wrap:break-word">
+                <small>
+                  <p>
                   <strong>Type</strong>
                   {{vout.scriptPubKey.type}}
-                </p>
-                <p>
+                  </p>
+                  <p>
                   <strong>scriptPubKey</strong>
                   {{vout.scriptPubKey.asm}}
-                </p>
-              </small>
+                  </p>
+                </small>
+              </div>
             </div>
           </div>
         </div>
       </div>
+      <div class="showmore_collapse text-center" data-ng-show="tx.vout.length > 6">
+        <a href="#" data-ng-show="!showMoreOut" data-ng-click="showMoreOut = !showMoreOut">more...</a>
+        <a href="#" data-ng-show="showMoreOut" data-ng-click="showMoreOut = !showMoreOut">...less</a>
+      </div>
     </div>
   </div>
 </div>
-<div class="panel panel-default" data-ng-show="itemsExpanded && tx.blockhash">
+<div class="panel panel-default" data-ng-class="{ 'hidden': !itemsExpanded && !tx.blockhash}">
   <div class="panel-body" style="word-wrap:break-word">
     <small>
       <strong>BlockHash</strong>