Improve UI

src/views/ArrayFieldComponent.vue

@@ -5,6 +5,7 @@
     :sticky-header="true"
     :no-border-collapse="true"
     responsive
+    class="ml-0 mr-0"
   >
     <template #cell()="data">
       <span v-if="isTokenField(data.value)">{{ formatTokens(data.value) }}</span>
@@ -26,7 +27,7 @@ import { BTable } from 'bootstrap-vue'
 // import fetch from 'node-fetch'
 
 import {
-  abbr, getStakingValidatorByHex, isHexAddress, isToken, toDay, tokenFormatter,
+  getStakingValidatorByHex, isHexAddress, isToken, toDay, tokenFormatter,
 } from '@/libs/data/data'
 // import { Proposal, Proposer } from '@/libs/data'
 // import { formatToken } from '@/libs/data/data'
@@ -61,7 +62,7 @@ export default {
       if (reg.test(value)) {
         return toDay(value)
       }
-      return abbr(value, 40)
+      return value
     },
     formatTokens(value) {
       return tokenFormatter(value)

src/views/Blocks.vue

@@ -2,6 +2,7 @@
   <div>
     <b-card
       no-body
+      class="text-truncate"
     >
       <b-card-header>
         <b-card-title>
@@ -15,7 +16,6 @@
         sort-by="tokens"
         striped
         hover
-        responsive
         stacked="sm"
       >
         <!-- Column: Height -->
@@ -75,7 +75,7 @@ export default {
         {
           key: 'hash',
           thClass: 'd-none d-lg-block',
-          tdClass: 'd-none d-lg-block',
+          tdClass: 'd-none d-lg-block text-truncate',
         },
         {
           key: 'proposer',

src/views/Governance.vue

@@ -9,8 +9,8 @@
       <b-card>
         <b-card-title
           class="mb-0"
-          style="height:40px;"
         >
+          #{{ p.id }}.
           <b-badge
             v-if="p.status == 1"
             pill
@@ -43,7 +43,6 @@
           >
             Rejected
           </b-badge>
-          #{{ p.id }}.
           <router-link
             :to="`./gov/${p.id}`"
           >

src/views/GovernanceProposalView.vue

@@ -5,6 +5,7 @@
     >
       <b-card-header>
         <b-card-title>
+          #{{ proposal.id }}
           <b-badge
             v-if="proposal.status == 1"
             pill
@@ -37,7 +38,7 @@
           >
             Rejected
           </b-badge>
-          #{{ proposal.id }} {{ proposal.title }}
+          {{ proposal.title }}
         </b-card-title>
       </b-card-header>
       <b-card-body>
@@ -71,13 +72,8 @@
             </b-tr>
             <b-tr>
               <b-td>
-                {{ $t('proposal_voting_start_time') }}
-              </b-td><b-td>{{ proposal.voting_start_time }}</b-td>
-            </b-tr>
-            <b-tr>
-              <b-td>
-                {{ $t('proposal_voting_end_time') }}
-              </b-td><b-td>{{ proposal.voting_end_time }}</b-td>
+                {{ $t('voting_time') }}
+              </b-td><b-td>{{ proposal.voting_start_time }} - {{ proposal.voting_end_time }}</b-td>
             </b-tr>
             <b-tr>
               <b-td>
@@ -88,7 +84,7 @@
             </b-tr>
           </tbody>
         </b-table-simple>
-        <div>
+        <div style="white-space: pre-line">
           <object-field-component
             :tablefield="proposal.contents"
             :small="false"

src/views/ObjectFieldComponent.vue

@@ -124,6 +124,8 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang='css'>
+@media (min-width: 768px) {
+  td:first-child { width: 20% ;}
+}
 </style>

src/views/Transaction.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <b-card title="Baisc">
+    <b-card
+      title="Baisc"
+      class="text-truncate"
+    >
       <object-field-component
         v-if="!tx.std"
         :tablefield="tx.raw"
@@ -14,7 +17,9 @@
           <b-tr>
             <b-td style="width:200px">
               {{ 'txhash' }}
-            </b-td><b-td>{{ tx.txhash }}</b-td>
+            </b-td><b-td
+              class="text-truncate"
+            >{{ tx.txhash }}</b-td>
           </b-tr>
           <b-tr>
             <b-td>
@@ -44,20 +49,10 @@
               {{ 'timestamp' }}
             </b-td><b-td>{{ formatTime(tx.timestamp) }}</b-td>
           </b-tr>
-          <b-tr>
-            <b-td>
-              {{ 'gas_used' }}
-            </b-td><b-td>{{ tx.gas_used }}</b-td>
-          </b-tr>
-          <b-tr>
-            <b-td>
-              {{ 'gas_wanted' }}
-            </b-td><b-td>{{ tx.gas_wanted }}</b-td>
-          </b-tr>
           <b-tr>
             <b-td>
               {{ 'gas' }}
-            </b-td><b-td>{{ tx.tx.gas }}</b-td>
+            </b-td><b-td>{{ tx.gas_used }} / {{ tx.gas_wanted }}</b-td>
           </b-tr>
           <b-tr>
             <b-td>