Multiple operations table layout

ArtemKo7v · ArtemKo7v · commit ccc66bf0aaba · 2016-12-15T18:23:24.000+07:00
diff --git a/css/ethplorer.css b/css/ethplorer.css
@@ -210,6 +210,31 @@ td.list-field {
     max-width: 85px;    
 }
 
+.multiop tr td:nth-child(2) {
+    max-width: 50vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.multiop tr td:nth-child(2),
+.multiop tr td:nth-child(3),
+.multiop tr td:nth-child(4)
+{
+    min-width: 65px;
+}
+
+.multiop tr td:nth-child(4) {
+    max-width: 65px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.multiop tr td:nth-child(5){
+    display: none;
+    max-width: 4px;
+}
+
 .multiop tr.selectable:hover td span {
     text-decoration: underline;
 }
@@ -310,6 +335,10 @@ small {
             animation: hrhand 8s linear infinite;
 }
 
+.cuttable-address {
+    white-space: nowrap;
+}
+
 @media screen and (max-width: 640px) {
     .footer {
         line-height: 12px;
@@ -403,6 +432,15 @@ small {
 }
 
 @media screen and (max-width: 767px) {
+
+    .multiop tr td:nth-child(3),
+    .multiop tr td:nth-child(4)
+    {
+        display: none;
+    }
+    .multiop tr td:nth-child(5){
+        display: table-cell;
+    }
     
     #address-token-transfers .block {
         max-width: 100vw;
diff --git a/js/ethplorer.js b/js/ethplorer.js
@@ -234,28 +234,46 @@ Ethplorer = {
                     var opToken = Ethplorer.prepareToken(op.token);
                     if('undefined' !== typeof(op.value)){
                         op.value = Ethplorer.Utils.toBig(op.value).div(Math.pow(10, opToken.decimals));
-                        op.value = Ethplorer.Utils.formatNum(op.value, true, opToken.decimals, true) + ' ' + opToken.symbol;
+                        op.value = Ethplorer.Utils.formatNum(op.value, true, opToken.decimals, true);
+                        op.symbol = opToken.symbol;
                     }
                     var opParties = '';
                     if(op.address){
                         op.to = op.address;
                         var address = op.address; // Ethplorer.Utils.getEthplorerLink(op.address, op.address, false);
                         opParties = 'for ' + address;
                     }else if(op.from && op.to){
-                        var from = op.from; // Ethplorer.Utils.getEthplorerLink(op.from, op.from, false);
-                        var to = op.to; // Ethplorer.Utils.getEthplorerLink(op.to, op.to, false);
-                        opParties = 'from ' + from + '<br class="show_small"> to ' + to;
+                        var from = '<span class="cuttable-address">from ' + op.from + '</span>';
+                        var to = '<span class="cuttable-address">to ' + op.to + '</span>';
+                        opParties = from + '<br class="show_small"> ' + to;
                     }
                     if(multiop){
-                        var row = $('<tr data-op-idx="' + idx + '"><td><a class="dashed">Details</a></td><td><span>' + op.type + '<br class="show_small"> ' + opParties + '</span></td><td class="text-right"><span>' + op.value + '</span></td></tr>');
+                        var row = $(
+                            '<tr data-op-idx="' + idx + '">' + 
+                            '<td><a class="dashed">Details</a></td>' +
+                            '<td><span>' + op.type +
+                            '<span class="show_small"> ' + op.value + ' ' + op.symbol + '</span>' +
+                            '<br class="show_small"> ' + opParties + '</span></td>' + 
+                            '<td class="text-right"><span>' + op.value + '</span></td>' +
+                            '<td><span>' + op.symbol + '</span></td>' +
+                            '<td></td>' +
+                            '</tr>'
+                        );
                         row.click(function(_tx, _op){
                             return function(){
                                 if($(this).hasClass('selectable')){
                                     $(this).removeClass('selectable');
                                     $('.multiop .blue').addClass('selectable');
                                     $('.multiop .blue').removeClass('blue');
                                     $(this).addClass('blue');
-                                    Ethplorer.showOpDetails(_tx, _op);
+                                    $('.token-related').animate({opacity:0.1}, 250, function(){
+                                        $('.token-related').animate({opacity:1}, 250);
+                                    });
+                                    setTimeout(function(__tx, __op){
+                                        return function(){
+                                            Ethplorer.showOpDetails(__tx, __op);
+                                        };
+                                    }(_tx, _op), 250);
                                     document.location.hash = _op.index;
                                 }
                             };
