cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: block page table and card UI refactor

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-06 17:11:08 +08:00
parent 95ff1caed1
commit ebf2b61528
2 changed files with 45 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/modules/[chain]/block/[height].vue
View File

@ -1,4 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Icon } from '@iconify/vue';
import TxsElement from '@/components/dynamic/TxsElement.vue'; import TxsElement from '@/components/dynamic/TxsElement.vue';
import { useBlockModule } from './block'; import { useBlockModule } from './block';
import DynamicComponent from '@/components/dynamic/DynamicComponent.vue'; import DynamicComponent from '@/components/dynamic/DynamicComponent.vue';
@ -20,47 +21,50 @@ onBeforeRouteUpdate(async (to, from, next) => {
next(); next();
} }
}); });
</script> </script>
<template> <template>
<div> <div>
<VCard> <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<VCardTitle class="d-flex justify-space-between"> <h2 class="card-title flex flex-row justify-between">
<span class="mt-2">#{{ store.current.block?.header?.height }}</span> <p class="">#{{ store.current.block?.header?.height }}</p>
<span v-if="props.height" class="mt-2"> <div class="" v-if="props.height">
<VBtn <RouterLink :to="`/${store.blockchain.chainName}/block/${height - 1}`"
size="32" class="btn btn-primary btn-sm p-1 text-2xl mr-2">
:to="`/${store.blockchain.chainName}/block/${height - 1}`" <Icon icon="mdi-arrow-left" class="w-full h-full"/>
class="mr-2" </RouterLink>
><VIcon icon="mdi-arrow-left" <RouterLink :to="`/${store.blockchain.chainName}/block/${height + 1}`"
/></VBtn> class="btn btn-primary btn-sm p-1 text-2xl">
<VBtn <Icon icon="mdi-arrow-right"/>
size="32" </RouterLink>
:to="`/${store.blockchain.chainName}/block/${height + 1}`" </div>
><VIcon icon="mdi-arrow-right" </h2>
/></VBtn> <div>
</span>
</VCardTitle>
<VCardItem class="pt-0">
<DynamicComponent :value="store.current.block_id" /> <DynamicComponent :value="store.current.block_id" />
</VCardItem> </div>
</VCard> </div>
<VCard title="Block Header" class="my-5"> <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<VCardItem class="pt-0"> <h2 class="card-title flex flex-row justify-between">
Block Header
</h2>
<DynamicComponent :value="store.current.block?.header" /> <DynamicComponent :value="store.current.block?.header" />
</VCardItem> </div>
</VCard>
<VCard title="Transactions">
<VCardItem class="pt-0"> <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title flex flex-row justify-between">
Transactions
</h2>
<TxsElement :value="store.current.block?.data?.txs" /> <TxsElement :value="store.current.block?.data?.txs" />
</VCardItem> </div>
</VCard>
<VCard title="Last Commit" class="mt-5">
<VCardItem class="pt-0"> <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title flex flex-row justify-between">
Last Commit
</h2>
<DynamicComponent :value="store.current.block?.last_commit" /> <DynamicComponent :value="store.current.block?.last_commit" />
</VCardItem> </div>
</VCard>
</div> </div>
</template> </template>

12
src/modules/[chain]/block/index.vue
View File

@ -27,8 +27,8 @@ const format = useFormatter();
> >
</div> </div>
<div v-if="tab === 'blocks'" class="bg-base-100 rounded"> <div v-show="tab === 'blocks'" class="bg-base-100 rounded overflow-x-auto">
<VTable> <table class="table w-full">
<thead> <thead>
<tr> <tr>
<th>Height</th> <th>Height</th>
@ -54,11 +54,11 @@ const format = useFormatter();
<td>{{ format.toDay(item.block?.header?.time, 'from') }}</td> <td>{{ format.toDay(item.block?.header?.time, 'from') }}</td>
</tr> </tr>
</tbody> </tbody>
</VTable> </table>
</div> </div>
<div class="bg-base-100 rounded" v-if="tab === 'transactions'"> <div v-show="tab === 'transactions'" class="bg-base-100 rounded overflow-x-auto">
<VTable> <table class="table w-full">
<thead> <thead>
<tr> <tr>
<th>Hash</th> <th>Hash</th>
@ -77,7 +77,7 @@ const format = useFormatter();
<td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td> <td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
</tr> </tr>
</tbody> </tbody>
</VTable> </table>
<div class="p-4"> <div class="p-4">
<v-alert <v-alert
type="info" type="info"