Merge pull request #530 from khaihkd/master

Optimze UI

Author: khaihkd

client/assets/scss/components/_table.scss

@@ -23,7 +23,7 @@
         padding: 0 20px;
       }
     }
-  
+
     @include media-breakpoint-up(xl) {
       tr {
         padding: 0 30px;
@@ -40,7 +40,7 @@
       box-shadow: 8px 8px 40px 0 rgba(0, 0, 0, .07);
       padding: 17px 20px 16px;
       margin-bottom: 20px;
-  
+
       @include media-breakpoint-up(lg) {
         display: grid;
         align-items: center;
@@ -173,11 +173,11 @@
   tbody tr {
 
     @include media-breakpoint-up(lg) {
-      grid-template-columns: 10% 40% 40% 10%;
+      grid-template-columns: 15% 45% 40%;
     }
 
     @include media-breakpoint-up(xl) {
-      grid-template-columns: 10% 40% 42% 8%;
+      grid-template-columns: 15% 45% 40%;
     }
   }
 
@@ -245,7 +245,7 @@
   i.tx-failed {
     vertical-align: middle;
   }
-  
+
   thead tr,
   tbody tr {
 
@@ -264,15 +264,15 @@
 
   .text-truncate {
     max-width: 8.75rem;
-    
+
     @include media-breakpoint-up(lg) {
       max-width: 7rem;
     }
-    
+
     @include media-breakpoint-up(xl) {
       max-width: 9rem;
     }
-    
+
     @include media-breakpoint-up(2xl) {
       max-width: 11rem;
     }
@@ -299,15 +299,15 @@
 
   .text-truncate {
     max-width: 8.75rem;
-    
+
     @include media-breakpoint-up(lg) {
       max-width: 7rem;
     }
-    
+
     @include media-breakpoint-up(xl) {
       max-width: 9rem;
     }
-    
+
     @include media-breakpoint-up(2xl) {
       max-width: 11rem;
     }
@@ -391,7 +391,7 @@
 
   thead tr,
   tbody tr {
-    
+
     @include media-breakpoint-up(lg) {
       grid-template-columns: 10% 40% 40% 10%;
     }
@@ -413,16 +413,16 @@
 }
 
 .tomo-table--follow {
-  
+
   thead tr,
   tbody tr {
-    
+
     @include media-breakpoint-up(lg) {
       grid-template-columns: 30% 30% 30% 10%;
     }
 
     @include media-breakpoint-up(xl) {
-      grid-template-columns: 31% 33% 30% 6%; 
+      grid-template-columns: 31% 33% 30% 6%;
     }
   }
 
@@ -564,15 +564,15 @@
   tbody tr {
 
     @include media-breakpoint-up(lg) {
-      grid-template-columns: 25% 15% 22% 20% 8% 10%;
+      grid-template-columns: 35% 20% 22% 8% 15%;
     }
 
     @include media-breakpoint-up(xl) {
-      grid-template-columns: 25% 15% 20% 20% 10% 10%;
+      grid-template-columns: 35% 20% 20% 10% 15%;
     }
 
     @include media-breakpoint-up(2xl) {
-      grid-template-columns: 28% 12% 20% 20% 10% 10%;
+      grid-template-columns: 38% 17% 20% 10% 15%;
     }
   }
 

client/components/TableTx.vue

@@ -108,7 +108,7 @@
 
             <template
                 slot="txFee"
-                slot-scope="props">{{ formatUnit(toTomo(props.item.gasPrice * props.item.gasUsed)) }}</template>
+                slot-scope="props">{{ formatUnit(toTomo(props.item.gasPrice * props.item.gasUsed, 8)) }}</template>
         </table-base>
 
         <b-pagination-nav

client/layouts/default.vue

@@ -179,7 +179,7 @@
                         class="tomo-footer__copyright">
                         <p>TomoScan 2018 - Running on TomoChain
                             <code class="text-muted copyright__code">
-                                tomo/v0.2.2-alpha/linux-amd64/go1.10.3
+                                tomo/v1.1.0-stable/linux-amd64/go1.10.5
                             </code>
                         </p>
                     </b-col>

client/pages/contracts/index.vue

@@ -40,12 +40,6 @@
                 <span>{{ props.item.compiler }}</span>
             </template>
 
-            <template
-                slot="balance"
-                slot-scope="props">
-                <span>{{ formatUnit(toTomo(props.item.balance)) }}</span>
-            </template>
-
             <template
                 slot="txCount"
                 slot-scope="props">
@@ -85,7 +79,6 @@ export default {
                 hash: { label: 'Address' },
                 contractName: { label: 'ContractName' },
                 compiler: { label: 'Compiler' },
-                balance: { label: 'Balance' },
                 txCount: { label: 'TxCount' },
                 createdAt: { label: 'Date Verified' }
             },

client/pages/txs/_slug.vue

@@ -136,11 +136,11 @@
                                         </tr>
                                         <tr>
                                             <td>Gas Price</td>
-                                            <td>{{ formatUnit(toTomo(tx.gasPrice)) }}</td>
+                                            <td>{{ formatUnit(toTomo(tx.gasPrice, 8)) }}</td>
                                         </tr>
                                         <tr>
                                             <td>Actual Tx Cost/Fee</td>
-                                            <td>{{ formatUnit(toTomo(tx.gasPrice * tx.gasUsed)) }}</td>
+                                            <td>{{ formatUnit(toTomo(tx.gasPrice * tx.gasUsed, 8)) }}</td>
                                         </tr>
                                         <tr v-if="tx.tokenTxs && tx.tokenTxs.length">
                                             <td>Token Transfer</td>

client/plugins/mixin.js

@@ -21,11 +21,28 @@ const mixin = {
             return [].concat.apply([], query).join('&')
         },
 
-        formatNumber: (number) => {
+        formatNumber: (number, limitComma = 5) => {
             let seps = number.toString().split('.')
             seps[0] = seps[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+            if (seps[1]) {
+                seps[1] = seps[1].toString().substring(0, limitComma)
+            }
 
-            return seps.join('.')
+            let ret = seps.join('.')
+            let count = limitComma
+            let sCompare = '0.'
+            let str = '0.'
+            while (count > 0) {
+                count--
+                sCompare += '0'
+                if (count >= 1) {
+                    str += '0'
+                }
+            }
+            if (ret === sCompare) {
+                ret = `< ${str}1`
+            }
+            return ret
         },
 
         toLongNumberString: (n) => {
@@ -51,7 +68,7 @@ const mixin = {
             return str + str2
         },
 
-        toTomo: (wei) => {
+        toTomo: (wei, limitComma = 5) => {
             if (isNaN(wei)) {
                 return '0'
             }
@@ -68,7 +85,7 @@ const mixin = {
 
             weiNumber = weiNumber.dividedBy(divided).toString()
 
-            return mixin.methods.formatNumber(weiNumber)
+            return mixin.methods.formatNumber(weiNumber, limitComma)
         },
 
         toEtherNumber: (wei) => web3.utils.fromWei(wei, 'ether'),