From 97ca499308c504892a91535ced56b2995f2eb8a2 Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Mon, 29 Sep 2014 15:42:46 -0300
Subject: [PATCH] fix copayer list in small devices

---
 css/src/mobile.css              | 10 +++-
 views/includes/transaction.html | 89 +++++++++++++++++----------------
 2 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/css/src/mobile.css b/css/src/mobile.css
index 62fe6f668..158b9f5b4 100644
--- a/css/src/mobile.css
+++ b/css/src/mobile.css
@@ -157,7 +157,15 @@
     padding: 0 5px;
   }
 
-  table .icon-status { 
+  table.last-transactions-content td {
+    text-align: center;
+  }
+
+  table.last-transactions-content td.copayer-name {
+    text-align: left;
+  }
+
+  table.last-transactions-content .icon-status { 
     border-radius: 0;
     padding: 0.1rem 0.3rem;
     margin-bottom: 0;
diff --git a/views/includes/transaction.html b/views/includes/transaction.html
index 047627147..75155adbf 100644
--- a/views/includes/transaction.html
+++ b/views/includes/transaction.html
@@ -49,7 +49,7 @@
 <table class="last-transactions-content show-for-small-only" summary="{{tx.createdTs | amCalendar}}">
   <tbody>
   <tr ng-repeat="c in tx.actionList">
-    <td width="100%">{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}
+    <td class="copayer-name" width="100%">{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}
     </td>
     <td>
       <i ng-if="c.actions.create" class="fi-crown icon-status icon-active"></i>
@@ -105,55 +105,58 @@
 </div>
 
 <div class="last-transactions-footer">
-  <div class="large-5 medium-7 small-12 columns" ng-show="!tx.sentTs">
-    <div ng-show="!tx.signedByUs && !tx.rejectedByUs  && !tx.finallyRejected && tx.missingSignatures">
-      <div class="hide-for-small-only">
-        <button class="primary m15r"  ng-click="sign(tx.ntxid)" ng-disabled="loading">
-          <i class="fi-check"></i> <span translate>Sign</span>
-        </button>
-        <button class="warning" ng-click="reject(tx.ntxid)" ng-disabled="loading">
-          <i class="fi-x" ></i> <span translate>Reject</span>
-        </button>
+  <div class="row collapse">
+    <div class="large-5 medium-7 small-12 columns" ng-show="!tx.sentTs">
+      <div ng-show="!tx.signedByUs && !tx.rejectedByUs  && !tx.finallyRejected && tx.missingSignatures">
+        <div class="hide-for-small-only">
+          <button class="primary m15r"  ng-click="sign(tx.ntxid)" ng-disabled="loading">
+            <i class="fi-check"></i> <span translate>Sign</span>
+          </button>
+          <button class="warning" ng-click="reject(tx.ntxid)" ng-disabled="loading">
+            <i class="fi-x" ></i> <span translate>Reject</span>
+          </button>
+        </div>
+        <div class="show-for-small-only row m10b">
+          <button class="primary small-5 columns"  ng-click="sign(tx.ntxid)" ng-disabled="loading">
+            <i class="fi-check"></i> <span translate>Sign</span>
+          </button>
+          <button class="warning small-5 columns" ng-click="reject(tx.ntxid)" ng-disabled="loading">
+            <i class="fi-x" ></i> <span translate>Reject</span>
+          </button>
+        </div>
       </div>
-      <div class="show-for-small-only row m10b">
-        <button class="primary small-5 columns"  ng-click="sign(tx.ntxid)" ng-disabled="loading">
-          <i class="fi-check"></i> <span translate>Sign</span>
-        </button>
-        <button class="warning small-5 columns" ng-click="reject(tx.ntxid)" ng-disabled="loading">
-          <i class="fi-x" ></i> <span translate>Reject</span>
+      <div ng-show="!tx.missingSignatures && !tx.sentTs">
+        <button class="primary"  ng-click="send(tx.ntxid)" ng-disabled="loading"> <i class=".fi-upload-cloud"></i>
+          <span translate>Broadcast Transaction</span>
         </button>
       </div>
     </div>
-    <div ng-show="!tx.missingSignatures && !tx.sentTs">
-      <button class="primary"  ng-click="send(tx.ntxid)" ng-disabled="loading"> <i class=".fi-upload-cloud"></i>
-        <span translate>Broadcast Transaction</span>
-      </button>
-    </div>
-  </div>
 
-  <div class="large-7 medium-5 small-12 columns text-right">
-    <div translate ng-show="tx.finallyRejected" class="has-error m10b">
-      Transaction finally rejected
-    </div>
-    <div ng-show="!tx.missingSignatures && tx.sentTs">
-      <div class="is-valid m10b">
-        <strong translate>Sent</strong>  <span class="text-gray" am-time-ago="tx.sentTs"></span>
+    <div class="large-7 medium-5 small-12 columns text-right">
+      <div translate ng-show="tx.finallyRejected" class="has-error">
+        Transaction finally rejected
       </div>
-      <div class="ellipsis small">
-        <span translate>Transaction ID</span>:
-        <a href="http://{{getShortNetworkName()}}.insight.is/tx/{{tx.sentTxid}}" target="_blank">
-          {{tx.sentTxid}}
-        </a>
+      <div ng-show="!tx.missingSignatures && tx.sentTs">
+        <div class="is-valid">
+          <strong translate>Sent</strong>  <span class="text-gray" am-time-ago="tx.sentTs"></span>
+        </div>
+        <div class="ellipsis small m10t">
+          <span translate>Transaction ID</span>:
+          <a href="http://{{getShortNetworkName()}}.insight.is/tx/{{tx.sentTxid}}" target="_blank">
+            {{tx.sentTxid}}
+          </a>
+        </div>
+      </div>
+      <div translate class="text-gray" ng-show="!tx.finallyRejected && tx.missingSignatures==1">
+        One signature missing
+      </div>
+      <div translate class="text-gray" ng-show="!tx.finallyRejected && tx.missingSignatures>1">
+        {{tx.missingSignatures}} signatures missing
+      </div>
+      <div class="ellipsis small text-gray show-for-large-up m5t">
+        <strong translate>Fee</strong>: {{tx.fee|noFractionNumber}} {{$root.wallet.settings.unitName}}
+        <strong translate>Proposal ID</strong>: {{tx.ntxid}}
       </div>
-    </div>
-    <p translate class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures==1">
-      One signature missing
-    </p>
-    <p translate class="text-gray m5b" ng-show="!tx.finallyRejected && tx.missingSignatures>1">
-      {{tx.missingSignatures}} signatures missing</p>
-    <div class="ellipsis small text-gray show-for-large-up">
-      <strong translate>Fee</strong>: {{tx.fee|noFractionNumber}} {{$root.wallet.settings.unitName}}
-      <strong translate>Proposal ID</strong>: {{tx.ntxid}}
     </div>
   </div>
 </div>