From 1bc87207b4a1e37868aab3216bb7693097acd22c Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Mon, 16 Aug 2021 23:03:32 +0800
Subject: [PATCH] Improve UI

---
 src/views/GovernanceProposalView.vue | 103 +++++++++++---------
 src/views/Home.vue                   |   2 +-
 src/views/ObjectFieldComponent.vue   | 105 +++++++++++----------
 src/views/Transaction.vue            | 135 ++++++++++++++-------------
 4 files changed, 187 insertions(+), 158 deletions(-)

diff --git a/src/views/GovernanceProposalView.vue b/src/views/GovernanceProposalView.vue
index 8b89f8d4..3bc2ad40 100644
--- a/src/views/GovernanceProposalView.vue
+++ b/src/views/GovernanceProposalView.vue
@@ -1,6 +1,8 @@
 <template>
   <section>
-    <b-card>
+    <b-card
+      no-body
+    >
       <b-card-header>
         <b-card-title>
           <b-badge
@@ -39,47 +41,58 @@
         </b-card-title>
       </b-card-header>
       <b-card-body>
-        <b-table-simple>
-          <b-tr>
-            <b-td style="width:200px">
-              {{ $t('proposal_id') }}
-            </b-td><b-td>{{ proposal.id }}</b-td>
-          </b-tr>
-          <b-tr>
-            <b-td>
-              {{ $t('proposal_proposer') }}
-            </b-td><b-td>{{ formatAddress(proposer.proposer) }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td>
-              {{ $t('proposal_total_deposit') }}
-            </b-td><b-td>{{ proposal.total_deposit }} </b-td>
-          </b-tr>
-          <b-tr>
-            <b-td>
-              {{ $t('proposal_submit_time') }}
-            </b-td><b-td>{{ proposal.submit_time }}</b-td>
-          </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>
-          </b-tr>
-          <b-tr>
-            <b-td>
-              {{ $t('proposal_type') }}
-            </b-td><b-td>{{ proposal.type }}</b-td>
-          </b-tr>
+        <b-table-simple
+          stacked="sm"
+          hover
+          striped
+        >
+          <tbody>
+            <b-tr>
+              <b-td
+                style="text-transform: capitalize; vertical-align: top; width:200px"
+              >
+                {{ $t('proposal_id') }}
+              </b-td><b-td>{{ proposal.id }}</b-td>
+            </b-tr>
+            <b-tr>
+              <b-td>
+                {{ $t('proposal_proposer') }}
+              </b-td><b-td>{{ formatAddress(proposer.proposer) }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td>
+                {{ $t('proposal_total_deposit') }}
+              </b-td><b-td>{{ proposal.total_deposit }} </b-td>
+            </b-tr>
+            <b-tr>
+              <b-td>
+                {{ $t('proposal_submit_time') }}
+              </b-td><b-td>{{ proposal.submit_time }}</b-td>
+            </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>
+            </b-tr>
+            <b-tr>
+              <b-td>
+                {{ $t('proposal_type') }}
+              </b-td><b-td>
+                {{ proposal.type }}
+              </b-td>
+            </b-tr>
+          </tbody>
         </b-table-simple>
-        <object-field-component
-          :tablefield="proposal.contents"
-          :small="false"
-        />
+        <div>
+          <object-field-component
+            :tablefield="proposal.contents"
+            :small="false"
+          /></div>
       </b-card-body>
       <b-card-footer>
         <router-link :to="`../gov`">
@@ -99,7 +112,7 @@
       </b-card-footer>
     </b-card>
 
-    <b-card>
+    <b-card no-body>
       <b-card-header>
         <b-card-title>
           Votes
@@ -158,12 +171,14 @@
           {{ proposal.tally.abstain }}% voted Abstain
         </b-tooltip>
         <b-table
+          stacked="sm"
           :fields="votes_fields"
           :items="votes"
+          striped
         />
       </b-card-body>
     </b-card>
-    <b-card>
+    <b-card no-body>
       <b-card-header>
         <b-card-title>
           Deposits ({{ proposal.total_deposit }})
@@ -171,8 +186,10 @@
       </b-card-header>
       <b-card-body>
         <b-table
+          stacked="sm"
           :items="deposits"
           :fields="deposit_fields"
+          striped
         />
       </b-card-body>
       <b-card-footer>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 9f183556..2c875e40 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -132,7 +132,7 @@ export default {
   },
   created() {
     this.chains = JSON.parse(localStorage.getItem('chains'))
-    this.timer = setInterval(this.fetch, 12000)
+    this.timer = setInterval(this.fetch, 120000)
   },
   beforeDestroy() {
     clearInterval(this.timer)
diff --git a/src/views/ObjectFieldComponent.vue b/src/views/ObjectFieldComponent.vue
index 54ea3668..ae61b989 100644
--- a/src/views/ObjectFieldComponent.vue
+++ b/src/views/ObjectFieldComponent.vue
@@ -4,63 +4,67 @@
     hover
     :small="small"
     striped
-    responsive
+    stacked="sm"
+    responsive="sm"
   >
-    <b-tr
-      v-for="(value, name) in tablefield"
-      :key="name"
-    >
-      <b-td
-        style="text-transform: capitalize; vertical-align: top; width:200px"
+    <b-tbody>
+      <b-tr
+        v-for="(value, name) in tablefield"
+        :key="name"
       >
-        {{ name }}
-      </b-td>
-      <b-td v-if="isTokenField(value)">
-        {{ formatTokens( value ) }}
-      </b-td>
-      <b-td v-else-if="isArrayText(value)">
-        {{ value.join(', ') }}
-      </b-td>
-      <b-td v-else-if="isHex(value)">
-        {{ formatHexAddress(value) }}
-      </b-td>
-      <b-td v-else-if="Array.isArray(value)">
-        <array-field-component :tablefield="value" />
-      </b-td>
-      <b-td
-        v-else-if="typeof (value) ==='object'"
-        hover
-        class="overflow-hidden"
-      >
-        <b-tabs>
-          <b-tab
-            v-for="key in Object.keys(value)"
-            :key="key"
-            :title="key"
-            variant="danger"
-          >
-            <array-field-component
-              v-if="Array.isArray(value[key])"
-              :tablefield="value[key]"
-            />
-            <object-field-component
-              v-else-if="typeof value[key] === 'object'"
-              :tablefield="value[key]"
-            />
-            <span v-else>{{ formatText(value[key]) }} </span>
-          </b-tab>
-        </b-tabs>
-      </b-td>
-      <b-td v-else>
-        {{ value }}
-      </b-td>
-    </b-tr>
+        <b-td
+          style="text-transform: capitalize; vertical-align: top;"
+        >
+          {{ name }}
+        </b-td>
+        <b-td v-if="isTokenField(value)">
+          {{ formatTokens( value ) }}
+        </b-td>
+        <b-td v-else-if="isArrayText(value)">
+          {{ value.join(', ') }}
+        </b-td>
+        <b-td v-else-if="isHex(value)">
+          {{ formatHexAddress(value) }}
+        </b-td>
+        <b-td v-else-if="Array.isArray(value)">
+          <array-field-component :tablefield="value" />
+        </b-td>
+        <b-td
+          v-else-if="typeof (value) ==='object'"
+          hover
+          class="overflow-hidden"
+        >
+          <b-tabs pills>
+            <b-tab
+              v-for="key in Object.keys(value)"
+              :key="key"
+              :title="key"
+              class="pl-0 pr-0"
+              title-item-class="bg-light-primary"
+            >
+              <array-field-component
+                v-if="Array.isArray(value[key])"
+                :tablefield="value[key]"
+              />
+              <object-field-component
+                v-else-if="typeof value[key] === 'object'"
+                :tablefield="value[key]"
+              />
+              <span v-else>{{ formatText(value[key]) }} </span>
+            </b-tab>
+          </b-tabs>
+        </b-td>
+        <b-td v-else>
+          {{ value }}
+        </b-td>
+      </b-tr>
+    </b-tbody>
   </b-table-simple>
 </template>
 
 <script>
 import {
-  BTableSimple, BTr, BTd, BTabs, BTab,
+  BTableSimple, BTr, BTd, BTabs, BTab, BTbody,
 } from 'bootstrap-vue'
 import {
   abbr, getStakingValidatorByHex, isHexAddress, isStringArray, isToken, tokenFormatter,
@@ -75,6 +79,7 @@ export default {
     BTd,
     BTabs,
     BTab,
+    BTbody,
     ArrayFieldComponent,
   },
   props: {
diff --git a/src/views/Transaction.vue b/src/views/Transaction.vue
index a8f222d6..e11124de 100644
--- a/src/views/Transaction.vue
+++ b/src/views/Transaction.vue
@@ -5,76 +5,83 @@
         v-if="!tx.std"
         :tablefield="tx.raw"
       />
-      <b-table-simple v-else>
-        <b-tr>
-          <b-td style="width:200px">
-            {{ 'txhash' }}
-          </b-td><b-td>{{ tx.txhash }}</b-td>
-        </b-tr>
-        <b-tr>
-          <b-td>
-            {{ 'status' }}
-          </b-td><b-td> <b-badge
-            v-if="tx.code===0"
-            variant="light-success"
-          >
-            Success
-          </b-badge><b-badge
-            v-else
-            variant="light-danger"
-          >
-            Failed
-          </b-badge><b v-if="tx.code > 0"> {{ tx.raw_log }}</b> </b-td>
-        </b-tr>
-        <b-tr>
-          <b-td>
-            {{ 'height' }}
-          </b-td><b-td>
-            <router-link :to="`../blocks/${tx.height}`">
-              {{ tx.height }}
-            </router-link></b-td>
-        </b-tr>
-        <b-tr>
-          <b-td>
-            {{ '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-tr>
-        <b-tr>
-          <b-td>
-            {{ 'fee' }}
-          </b-td><b-td>{{ formattoken(tx.tx.fee) }}</b-td>
-        </b-tr>
-        <b-tr>
-          <b-td>
-            {{ 'memo' }}
-          </b-td><b-td>{{ tx.tx.memo }}</b-td>
-        </b-tr>
-        <b-tr>
-          <b-td>
-            {{ 'timeout_height' }}
-          </b-td><b-td>{{ tx.tx.timeout_height }}</b-td>
-        </b-tr>
+      <b-table-simple
+        v-else
+        striped
+        stacked="sm"
+      >
+        <tbody>
+          <b-tr>
+            <b-td style="width:200px">
+              {{ 'txhash' }}
+            </b-td><b-td>{{ tx.txhash }}</b-td>
+          </b-tr>
+          <b-tr>
+            <b-td>
+              {{ 'status' }}
+            </b-td><b-td> <b-badge
+              v-if="tx.code===0"
+              variant="light-success"
+            >
+              Success
+            </b-badge><b-badge
+              v-else
+              variant="light-danger"
+            >
+              Failed
+            </b-badge><b v-if="tx.code > 0"> {{ tx.raw_log }}</b> </b-td>
+          </b-tr>
+          <b-tr>
+            <b-td>
+              {{ 'height' }}
+            </b-td><b-td>
+              <router-link :to="`../blocks/${tx.height}`">
+                {{ tx.height }}
+              </router-link></b-td>
+          </b-tr>
+          <b-tr>
+            <b-td>
+              {{ '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-tr>
+          <b-tr>
+            <b-td>
+              {{ 'fee' }}
+            </b-td><b-td>{{ formattoken(tx.tx.fee) }}</b-td>
+          </b-tr>
+          <b-tr>
+            <b-td>
+              {{ 'memo' }}
+            </b-td><b-td>{{ tx.tx.memo }}</b-td>
+          </b-tr>
+          <b-tr>
+            <b-td>
+              {{ 'timeout_height' }}
+            </b-td><b-td>{{ tx.tx.timeout_height }}</b-td>
+          </b-tr>
+        </tbody>
       </b-table-simple>
     </b-card>
 
     <b-card
       v-if="tx.tx.messages"
       :title="`Messages (total: ${tx.tx.messages.length})`"
+      no-body
     >
       <b-card-body
         v-for="(item, i) in tx.tx.messages "