zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions 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

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

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

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

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