From b385ab73079ed35038f63da1c3ba43bfec330ac3 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 5 May 2023 09:09:04 +0800
Subject: [PATCH] fix: layout one div

---
 src/modules/[chain]/block/index.vue   | 142 +++++++--------
 src/modules/[chain]/gov/index.vue     |  42 ++---
 src/modules/[chain]/staking/index.vue | 238 +++++++++++++-------------
 3 files changed, 214 insertions(+), 208 deletions(-)

diff --git a/src/modules/[chain]/block/index.vue b/src/modules/[chain]/block/index.vue
index 00b7ef7e..61bbbcf0 100644
--- a/src/modules/[chain]/block/index.vue
+++ b/src/modules/[chain]/block/index.vue
@@ -11,78 +11,80 @@ const tab = ref('blocks');
 const format = useFormatter();
 </script>
 <template>
-  <div class="tabs tabs-boxed bg-transparent mb-4">
-    <a
-      class="tab text-gray-400 uppercase"
-      :class="{ 'tab-active': tab === 'blocks' }"
-      @click="tab = 'blocks'"
-      >Blocks</a
-    >
-    <a
-      class="tab text-gray-400 uppercase"
-      :class="{ 'tab-active': tab === 'transactions' }"
-      @click="tab = 'transactions'"
-      >Transactions</a
-    >
-  </div>
+  <div>
+    <div class="tabs tabs-boxed bg-transparent mb-4">
+      <a
+        class="tab text-gray-400 uppercase"
+        :class="{ 'tab-active': tab === 'blocks' }"
+        @click="tab = 'blocks'"
+        >Blocks</a
+      >
+      <a
+        class="tab text-gray-400 uppercase"
+        :class="{ 'tab-active': tab === 'transactions' }"
+        @click="tab = 'transactions'"
+        >Transactions</a
+      >
+    </div>
 
-  <div v-if="tab === 'blocks'" class="bg-base-100 rounded">
-    <VTable>
-      <thead>
-        <tr>
-          <th>Height</th>
-          <th>Hash</th>
-          <th>Proposer</th>
-          <th>Txs</th>
-          <th>Time</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="item in store.recents">
-          <td class="text-sm text-primary">
-            <RouterLink
-              :to="`/${props.chain}/block/${item.block?.header?.height}`"
-              >{{ item.block?.header?.height }}</RouterLink
-            >
-          </td>
-          <td>{{ item.block_id?.hash }}</td>
-          <td>
-            {{ format.validator(item.block?.header?.proposer_address) }}
-          </td>
-          <td>{{ item.block?.data?.txs.length }}</td>
-          <td>{{ format.toDay(item.block?.header?.time, 'from') }}</td>
-        </tr>
-      </tbody>
-    </VTable>
-  </div>
+    <div v-if="tab === 'blocks'" class="bg-base-100 rounded">
+      <VTable>
+        <thead>
+          <tr>
+            <th>Height</th>
+            <th>Hash</th>
+            <th>Proposer</th>
+            <th>Txs</th>
+            <th>Time</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in store.recents">
+            <td class="text-sm text-primary">
+              <RouterLink
+                :to="`/${props.chain}/block/${item.block?.header?.height}`"
+                >{{ item.block?.header?.height }}</RouterLink
+              >
+            </td>
+            <td>{{ item.block_id?.hash }}</td>
+            <td>
+              {{ format.validator(item.block?.header?.proposer_address) }}
+            </td>
+            <td>{{ item.block?.data?.txs.length }}</td>
+            <td>{{ format.toDay(item.block?.header?.time, 'from') }}</td>
+          </tr>
+        </tbody>
+      </VTable>
+    </div>
 
-  <div class="bg-base-100 rounded" v-if="tab === 'transactions'">
-    <VTable>
-      <thead>
-        <tr>
-          <th>Hash</th>
-          <th>Messages</th>
-          <th>Fees</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="item in store.txsInRecents">
-          <td>
-            <RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
-              item.hash
-            }}</RouterLink>
-          </td>
-          <td>{{ format.messages(item.tx.body.messages) }}</td>
-          <td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
-        </tr>
-      </tbody>
-    </VTable>
-    <div class="p-4">
-      <v-alert
-        type="info"
-        text="Only show txs in recent blocks"
-        variant="tonal"
-      ></v-alert>
+    <div class="bg-base-100 rounded" v-if="tab === 'transactions'">
+      <VTable>
+        <thead>
+          <tr>
+            <th>Hash</th>
+            <th>Messages</th>
+            <th>Fees</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in store.txsInRecents">
+            <td>
+              <RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
+                item.hash
+              }}</RouterLink>
+            </td>
+            <td>{{ format.messages(item.tx.body.messages) }}</td>
+            <td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
+          </tr>
+        </tbody>
+      </VTable>
+      <div class="p-4">
+        <v-alert
+          type="info"
+          text="Only show txs in recent blocks"
+          variant="tonal"
+        ></v-alert>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/modules/[chain]/gov/index.vue b/src/modules/[chain]/gov/index.vue
index 5c5cedf7..4769cd01 100644
--- a/src/modules/[chain]/gov/index.vue
+++ b/src/modules/[chain]/gov/index.vue
@@ -15,27 +15,29 @@ const changeTab = (val: '2' | '3' | '4') => {
 };
 </script>
 <template>
-  <div class="tabs tabs-boxed bg-transparent mb-4">
-    <a
-      class="tab text-gray-400 uppercase"
-      :class="{ 'tab-active': tab === '2' }"
-      @click="changeTab('2')"
-      >Voting</a
-    >
-    <a
-      class="tab text-gray-400 uppercase"
-      :class="{ 'tab-active': tab === '3' }"
-      @click="changeTab('3')"
-      >Passed</a
-    >
-    <a
-      class="tab text-gray-400 uppercase"
-      :class="{ 'tab-active': tab === '4' }"
-      @click="changeTab('4')"
-      >Rejected</a
-    >
+  <div>
+    <div class="tabs tabs-boxed bg-transparent mb-4">
+      <a
+        class="tab text-gray-400 uppercase"
+        :class="{ 'tab-active': tab === '2' }"
+        @click="changeTab('2')"
+        >Voting</a
+      >
+      <a
+        class="tab text-gray-400 uppercase"
+        :class="{ 'tab-active': tab === '3' }"
+        @click="changeTab('3')"
+        >Passed</a
+      >
+      <a
+        class="tab text-gray-400 uppercase"
+        :class="{ 'tab-active': tab === '4' }"
+        @click="changeTab('4')"
+        >Rejected</a
+      >
+    </div>
+    <ProposalListItem :proposals="store?.proposals[tab]" />
   </div>
-  <ProposalListItem :proposals="store?.proposals[tab]" />
 </template>
 <route>
   {
diff --git a/src/modules/[chain]/staking/index.vue b/src/modules/[chain]/staking/index.vue
index 2aa42c88..e782db81 100644
--- a/src/modules/[chain]/staking/index.vue
+++ b/src/modules/[chain]/staking/index.vue
@@ -142,132 +142,134 @@ const rank = function (position: number) {
 };
 </script>
 <template>
-  <div class="flex items-center justify-between">
-    <div class="tabs tabs-boxed bg-transparent mb-4">
-      <a
-        class="tab text-gray-400"
-        :class="{ 'tab-active': tab === 'active' }"
-        @click="tab = 'active'"
-        >Active</a
-      >
-      <a
-        class="tab text-gray-400"
-        :class="{ 'tab-active': tab === 'inactive' }"
-        @click="tab = 'inactive'"
-        >Inactive</a
-      >
-    </div>
-
-    <div class="text-lg font-semibold">
-      {{ list.length }}/{{ staking.params.max_validators }}
-    </div>
-  </div>
   <div>
-    <VCard>
-      <VTable class="text-no-wrap table-header-bg rounded-0">
-        <thead>
-          <tr>
-            <th scope="col" style="width: 3rem">#</th>
-            <th scope="col">VALIDATOR</th>
-            <th scope="col" class="text-right">VOTING POWER</th>
-            <th scope="col" class="text-right">24h CHANGES</th>
-            <th scope="col" class="text-right">COMMISSION</th>
-            <th scope="col">ACTIONS</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(v, i) in list" :key="v.operator_address">
-            <!-- 👉 rank -->
-            <td>
-              <VChip label :color="rank(i)">
-                {{ i + 1 }}
-              </VChip>
-            </td>
+    <div class="flex items-center justify-between">
+      <div class="tabs tabs-boxed bg-transparent mb-4">
+        <a
+          class="tab text-gray-400"
+          :class="{ 'tab-active': tab === 'active' }"
+          @click="tab = 'active'"
+          >Active</a
+        >
+        <a
+          class="tab text-gray-400"
+          :class="{ 'tab-active': tab === 'inactive' }"
+          @click="tab = 'inactive'"
+          >Inactive</a
+        >
+      </div>
 
-            <!-- 👉 Validator -->
-            <td>
-              <div
-                class="d-flex align-center overflow-hidden"
-                style="max-width: 400px"
-              >
-                <VAvatar
-                  variant="tonal"
-                  class="me-3"
-                  size="34"
-                  icon="mdi-help-circle-outline"
-                  :image="logo(v.description?.identity)"
-                />
+      <div class="text-lg font-semibold">
+        {{ list.length }}/{{ staking.params.max_validators }}
+      </div>
+    </div>
+    <div>
+      <VCard>
+        <VTable class="text-no-wrap table-header-bg rounded-0">
+          <thead>
+            <tr>
+              <th scope="col" style="width: 3rem">#</th>
+              <th scope="col">VALIDATOR</th>
+              <th scope="col" class="text-right">VOTING POWER</th>
+              <th scope="col" class="text-right">24h CHANGES</th>
+              <th scope="col" class="text-right">COMMISSION</th>
+              <th scope="col">ACTIONS</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(v, i) in list" :key="v.operator_address">
+              <!-- 👉 rank -->
+              <td>
+                <VChip label :color="rank(i)">
+                  {{ i + 1 }}
+                </VChip>
+              </td>
+
+              <!-- 👉 Validator -->
+              <td>
+                <div
+                  class="d-flex align-center overflow-hidden"
+                  style="max-width: 400px"
+                >
+                  <VAvatar
+                    variant="tonal"
+                    class="me-3"
+                    size="34"
+                    icon="mdi-help-circle-outline"
+                    :image="logo(v.description?.identity)"
+                  />
+                  <div class="d-flex flex-column">
+                    <h6 class="text-sm text-primary">
+                      <RouterLink
+                        :to="{
+                          name: 'chain-staking-validator',
+                          params: { validator: v.operator_address },
+                        }"
+                        class="font-weight-medium user-list-name"
+                      >
+                        {{ v.description?.moniker }}
+                      </RouterLink>
+                    </h6>
+                    <span class="text-xs">{{
+                      v.description?.website || v.description?.identity || '-'
+                    }}</span>
+                  </div>
+                </div>
+              </td>
+
+              <!-- 👉 Voting Power -->
+              <td class="text-right">
                 <div class="d-flex flex-column">
-                  <h6 class="text-sm text-primary">
-                    <RouterLink
-                      :to="{
-                        name: 'chain-staking-validator',
-                        params: { validator: v.operator_address },
-                      }"
-                      class="font-weight-medium user-list-name"
-                    >
-                      {{ v.description?.moniker }}
-                    </RouterLink>
+                  <h6 class="text-sm font-weight-medium">
+                    {{
+                      format.formatToken(
+                        {
+                          amount: parseInt(v.tokens).toString(),
+                          denom: staking.params.bond_denom,
+                        },
+                        true,
+                        '0,0'
+                      )
+                    }}
                   </h6>
                   <span class="text-xs">{{
-                    v.description?.website || v.description?.identity || '-'
+                    format.calculatePercent(
+                      v.delegator_shares,
+                      staking.totalPower
+                    )
                   }}</span>
                 </div>
-              </div>
-            </td>
-
-            <!-- 👉 Voting Power -->
-            <td class="text-right">
-              <div class="d-flex flex-column">
-                <h6 class="text-sm font-weight-medium">
-                  {{
-                    format.formatToken(
-                      {
-                        amount: parseInt(v.tokens).toString(),
-                        denom: staking.params.bond_denom,
-                      },
-                      true,
-                      '0,0'
-                    )
-                  }}
-                </h6>
-                <span class="text-xs">{{
-                  format.calculatePercent(
-                    v.delegator_shares,
-                    staking.totalPower
+              </td>
+              <!-- 👉 24h Changes -->
+              <td
+                class="text-right text-xs"
+                :class="change24Color(v.consensus_pubkey)"
+              >
+                {{ change24Text(v.consensus_pubkey) }}
+                <VChip label v-if="v.jailed" color="error">Jailed</VChip>
+              </td>
+              <!-- 👉 commission -->
+              <td class="text-right">
+                {{
+                  format.formatCommissionRate(
+                    v.commission?.commission_rates?.rate
                   )
-                }}</span>
-              </div>
-            </td>
-            <!-- 👉 24h Changes -->
-            <td
-              class="text-right text-xs"
-              :class="change24Color(v.consensus_pubkey)"
-            >
-              {{ change24Text(v.consensus_pubkey) }}
-              <VChip label v-if="v.jailed" color="error">Jailed</VChip>
-            </td>
-            <!-- 👉 commission -->
-            <td class="text-right">
-              {{
-                format.formatCommissionRate(
-                  v.commission?.commission_rates?.rate
-                )
-              }}
-            </td>
-            <!-- 👉 Action -->
-            <td>
-              {{ 2 }}
-            </td>
-          </tr>
-        </tbody>
-      </VTable>
-      <VDivider />
-      <VCardActions class="py-2">
-        <VChip label color="error">Top 33%</VChip>
-        <VChip label color="warning" class="mx-2">Top 67%</VChip>
-      </VCardActions>
-    </VCard>
+                }}
+              </td>
+              <!-- 👉 Action -->
+              <td>
+                {{ 2 }}
+              </td>
+            </tr>
+          </tbody>
+        </VTable>
+        <VDivider />
+        <VCardActions class="py-2">
+          <VChip label color="error">Top 33%</VChip>
+          <VChip label color="warning" class="mx-2">Top 67%</VChip>
+        </VCardActions>
+      </VCard>
+    </div>
   </div>
 </template>