[fix] Revision of comments + addition of "view_tx"

www/css/style.css

@@ -236,6 +236,7 @@
 .item-tx .vertical-center{
   position: absolute;
   top: 30%;
+  width: 40%;
 }
 
 .expert-mode .item-tx .item-note {

www/templates/wallet/view_tx.html

+<i class="icon item-image "
+   ng-if="::!tx.avatar"
+   ng-class="::{'ion-arrow-up-c': tx.isUD, 'ion-person': tx.uid, 'ion-card': !tx.uid && !tx.isUD}"></i>
+<i class="avatar" ng-if="::tx.avatar" style="background-image: url({{::tx.avatar.src}})"></i>
+
+<div class="row no-padding">
+  <div class="col no-padding">
+    <a class="positive" ui-sref="app.wot_identity({pubkey:tx.pubkey, uid:tx.uid})" ng-if="tx.uid">
+      {{::tx.name||tx.uid}}
+    </a>
+    <a class="dark" ui-sref="app.wot_identity({pubkey:tx.pubkey, uid:tx.uid})" ng-if="!tx.uid">
+      <i class="ion-key gray"></i>
+      {{::tx.pubkey | formatPubkey}}
+    </a>
+    <h3 class="dark visible-xs item-text-wrap">
+      <i class="ion-ios-chatbubble-outline"></i>
+      {{::tx.comment}}<br/>
+    </h3>
+    <h4>
+      <span class="gray" >
+        {{::tx.time | formatFromNow}} | {{::tx.time | formatDate}}
+      </span>
+    </h4>
+  </div>
+  <div class="col col-50 no-padding" ng-if="tx.comment">
+    <p class="vertical-center gray text-italic hidden-xs"
+       data-toggle="tooltip"
+       title="{{::tx.comment}}">{{::tx.comment}}</p>
+  </div>
+  <div class="col col-10 no-padding">
+    <!-- not locked TX -->
+    <span ng-if="::!tx.lockedOutputs" class="badge item-note" ng-class="{'badge-balanced': tx.amount > 0}">
+      <span ng-bind-html=":rebind:tx.amount| formatAmount"></span>
+      <span ng-bind-html=":rebind:unit"></span>
+    </span>
+
+    <!-- Locked TX -->
+    <a ng-if="::tx.lockedOutputs"
+       class="badge item-note"
+       ng-class="{'badge-balanced': tx.amount > 0}"
+       ng-click="showLockedOutputsPopover(tx, $event)">
+      <i class="icon ion-locked" ></i>
+      <span ng-bind-html=":rebind:tx.amount| formatAmount"></span>
+      <span ng-bind-html=":rebind:unit"></span>
+    </a>
+
+    <div class="badge badge-secondary" ng-if="$root.settings.expertMode">
+      (<ng-bind-html ng-bind-html=":rebind:tx.amount| formatAmount:{useRelative: !$root.settings.useRelative}">
+    </ng-bind-html>
+      <span ng-bind-html=":rebind:secondaryUnit"></span>)
+    </div>
+  </div>
+</div>

www/templates/wallet/view_wallet_tx.html

@@ -54,6 +54,8 @@
 
     <div class="row no-padding">
 
+      <div class="col col-15 no-padding hidden-xs"></div>
+
       <div class="col">
 
         <div class="list" ng-class="::motion.ionListClass">
@@ -75,46 +77,9 @@
             </div>
           </span>
 
-          <span class="item item-pending item-avatar item-badge-right ink" ng-repeat="tx in formData.tx.pendings">
-            <i class="item-image avatar"
-               ng-if="!tx.avatar"
-               ng-class="{'ion-arrow-up-c': tx.isUD, 'ion-person': tx.uid, 'ion-card': !tx.uid && !tx.isUD}"></i>
-            <i ng-if="tx.avatar" class="item-image avatar" style="background-image: url({{::tx.avatar.src}})"></i>
-
-            <h2 class="col-80">
-              <i class="icon ion-clock"> </i>
-              <a ui-sref="app.wot_identity({pubkey:tx.pubkey, uid:tx.name||tx.uid})" class="positive">
-                <span ng-if="tx.uid">
-                  {{::tx.name||tx.uid}}
-                </span>
-                <span ng-if="!tx.uid" class="gray">
-                  <i class="icon ion-key gray"></i>
-                  {{::tx.pubkey | formatPubkey}}
-                </span>
-              </a>
-              <span ng-if="tx.comment" class="dark hidden-xs item-text-wrap">
-                <smaller>{{::tx.comment}}</smaller>
-              </span>
-            </h2>
-            <h3 ng-if="tx.comment" class="dark visible-xs item-text-wrap">
-              <i class="icon ion-ios-chatbubble-outline"></i>
-              {{::tx.comment}}<br/>
-            </h3>
-            <h3 class="dark" ng-if="tx.time">
-              {{::tx.time | formatFromNow}}
-              <span class="gray hidden-xs">|
-                {{::tx.time | formatDate}}
-              </span>
-            </h3>
-            <span class="badge badge-pending item-note"
-                  ng-class="{'badge-balanced': tx.amount > 0}">
-              <span ng-bind-html=":rebind:tx.amount| formatAmount"></span>
-              <span ng-bind-html=":rebind:unit"></span>
-            </span>
-            <div class="badge badge-secondary" ng-if="$root.settings.expertMode">
-              (<ng-bind-html ng-bind-html=":rebind:tx.amount| formatAmount:{useRelative: !$root.settings.useRelative}"></ng-bind-html>
-              <span ng-bind-html=":rebind:secondaryUnit"></span>)
-            </div>
+          <span class="item item-pending item-avatar item-badge-right ink"
+                ng-repeat="tx in formData.tx.pendings"
+                ng-include="'templates/wallet/view_tx.html'">
           </span>
 
           <!-- Last Transactions -->
@@ -131,63 +96,8 @@
 
           <div ng-repeat="tx in formData.tx.history"
                class="item item-tx item-icon-left"
-               ng-class="::ionItemClass">
-
-            <i class="icon item-image "
-               ng-if="::!tx.avatar"
-               ng-class="::{'ion-arrow-up-c': tx.isUD, 'ion-person': tx.uid, 'ion-card': !tx.uid && !tx.isUD}"></i>
-            <i class="avatar" ng-if="::tx.avatar" style="background-image: url({{::tx.avatar.src}})"></i>
-
-            <div class="row no-padding">
-              <div class="col no-padding">
-                <a class="positive" ui-sref="app.wot_identity({pubkey:tx.pubkey, uid:tx.uid})" ng-if="tx.uid">
-                  {{::tx.name||tx.uid}}
-                </a>
-                <a class="dark" ui-sref="app.wot_identity({pubkey:tx.pubkey, uid:tx.uid})" ng-if="!tx.uid">
-                  <i class="ion-key gray"></i>
-                  {{::tx.pubkey | formatPubkey}}
-                </a>
-                <h3 class="dark visible-xs item-text-wrap">
-                  <i class="ion-ios-chatbubble-outline"></i>
-                  {{::tx.comment}}<br/>
-                </h3>
-                <h4>
-                  <span class="gray" >
-                       {{::tx.time | formatFromNow}} | {{::tx.time | formatDate}}
-                   </span>
-                </h4>
-              </div>
-
-              <div class="col col-50 no-padding text-left hidden-xs">
-                <span ng-if="tx.comment" class="gray item-text-wrap">
-                  <span class="vertical-center">{{::tx.comment}}</span>
-                </span>
-              </div>
-
-              <div class="col col-10 no-padding">
-                  <!-- not locked TX -->
-                  <span ng-if="::!tx.lockedOutputs" class="badge item-note" ng-class="{'badge-balanced': tx.amount > 0}">
-                    <span ng-bind-html=":rebind:tx.amount| formatAmount"></span>
-                    <span ng-bind-html=":rebind:unit"></span>
-                  </span>
-
-                  <!-- Locked TX -->
-                  <a ng-if="::tx.lockedOutputs"
-                    class="badge item-note"
-                    ng-class="{'badge-balanced': tx.amount > 0}"
-                    ng-click="showLockedOutputsPopover(tx, $event)">
-                    <i class="icon ion-locked" ></i>
-                    <span ng-bind-html=":rebind:tx.amount| formatAmount"></span>
-                    <span ng-bind-html=":rebind:unit"></span>
-                  </a>
-
-                  <div class="badge badge-secondary" ng-if="$root.settings.expertMode">
-                    (<ng-bind-html ng-bind-html=":rebind:tx.amount| formatAmount:{useRelative: !$root.settings.useRelative}">
-                    </ng-bind-html>
-                    <span ng-bind-html=":rebind:secondaryUnit"></span>)
-                  </div>
-              </div>
-            </div>
+               ng-class="::ionItemClass"
+               ng-include="'templates/wallet/view_tx.html'">
           </div>
           <div class="item item-text-wrap text-center" ng-if="formData.tx.fromTime > 0">
             <p>
@@ -199,6 +109,9 @@
           </div>
         </div>
       </div>
+
+      <div class="col col-15 no-padding hidden-xs"></div>
+
     </div>