zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

fix: layout one div

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-05 09:09:04 +08:00
parent 728d8bf02d
commit b385ab7307
3 changed files with 214 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,78 +11,80 @@ const tab = ref('blocks');
const format = useFormatter(); const format = useFormatter();
</script> </script>
<template> <template>
<div class="tabs tabs-boxed bg-transparent mb-4"> <div>
<a <div class="tabs tabs-boxed bg-transparent mb-4">
class="tab text-gray-400 uppercase" <a
:class="{ 'tab-active': tab === 'blocks' }" class="tab text-gray-400 uppercase"
@click="tab = 'blocks'" :class="{ 'tab-active': tab === 'blocks' }"
>Blocks</a @click="tab = 'blocks'"
> >Blocks</a
<a >
class="tab text-gray-400 uppercase" <a
:class="{ 'tab-active': tab === 'transactions' }" class="tab text-gray-400 uppercase"
@click="tab = 'transactions'" :class="{ 'tab-active': tab === 'transactions' }"
>Transactions</a @click="tab = 'transactions'"
> >Transactions</a
</div> >
</div>
<div v-if="tab === 'blocks'" class="bg-base-100 rounded"> <div v-if="tab === 'blocks'" class="bg-base-100 rounded">
<VTable> <VTable>
<thead> <thead>
<tr> <tr>
<th>Height</th> <th>Height</th>
<th>Hash</th> <th>Hash</th>
<th>Proposer</th> <th>Proposer</th>
<th>Txs</th> <th>Txs</th>
<th>Time</th> <th>Time</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="item in store.recents"> <tr v-for="item in store.recents">
<td class="text-sm text-primary"> <td class="text-sm text-primary">
<RouterLink <RouterLink
:to="`/${props.chain}/block/${item.block?.header?.height}`" :to="`/${props.chain}/block/${item.block?.header?.height}`"
>{{ item.block?.header?.height }}</RouterLink >{{ item.block?.header?.height }}</RouterLink
> >
</td> </td>
<td>{{ item.block_id?.hash }}</td> <td>{{ item.block_id?.hash }}</td>
<td> <td>
{{ format.validator(item.block?.header?.proposer_address) }} {{ format.validator(item.block?.header?.proposer_address) }}
</td> </td>
<td>{{ item.block?.data?.txs.length }}</td> <td>{{ item.block?.data?.txs.length }}</td>
<td>{{ format.toDay(item.block?.header?.time, 'from') }}</td> <td>{{ format.toDay(item.block?.header?.time, 'from') }}</td>
</tr> </tr>
</tbody> </tbody>
</VTable> </VTable>
</div> </div>
<div class="bg-base-100 rounded" v-if="tab === 'transactions'"> <div class="bg-base-100 rounded" v-if="tab === 'transactions'">
<VTable> <VTable>
<thead> <thead>
<tr> <tr>
<th>Hash</th> <th>Hash</th>
<th>Messages</th> <th>Messages</th>
<th>Fees</th> <th>Fees</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="item in store.txsInRecents"> <tr v-for="item in store.txsInRecents">
<td> <td>
<RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{ <RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
item.hash item.hash
}}</RouterLink> }}</RouterLink>
</td> </td>
<td>{{ format.messages(item.tx.body.messages) }}</td> <td>{{ format.messages(item.tx.body.messages) }}</td>
<td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td> <td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
</tr> </tr>
</tbody> </tbody>
</VTable> </VTable>
<div class="p-4"> <div class="p-4">
<v-alert <v-alert
type="info" type="info"
text="Only show txs in recent blocks" text="Only show txs in recent blocks"
variant="tonal" variant="tonal"
></v-alert> ></v-alert>
</div>
</div> </div>
</div> </div>
</template> </template>

42
src/modules/[chain]/gov/index.vue
View File

@ -15,27 +15,29 @@ const changeTab = (val: '2' | '3' | '4') => {
}; };
</script> </script>
<template> <template>
<div class="tabs tabs-boxed bg-transparent mb-4"> <div>
<a <div class="tabs tabs-boxed bg-transparent mb-4">
class="tab text-gray-400 uppercase" <a
:class="{ 'tab-active': tab === '2' }" class="tab text-gray-400 uppercase"
@click="changeTab('2')" :class="{ 'tab-active': tab === '2' }"
>Voting</a @click="changeTab('2')"
> >Voting</a
<a >
class="tab text-gray-400 uppercase" <a
:class="{ 'tab-active': tab === '3' }" class="tab text-gray-400 uppercase"
@click="changeTab('3')" :class="{ 'tab-active': tab === '3' }"
>Passed</a @click="changeTab('3')"
> >Passed</a
<a >
class="tab text-gray-400 uppercase" <a
:class="{ 'tab-active': tab === '4' }" class="tab text-gray-400 uppercase"
@click="changeTab('4')" :class="{ 'tab-active': tab === '4' }"
>Rejected</a @click="changeTab('4')"
> >Rejected</a
>
</div>
<ProposalListItem :proposals="store?.proposals[tab]" />
</div> </div>
<ProposalListItem :proposals="store?.proposals[tab]" />
</template> </template>
<route> <route>
{ {

238
src/modules/[chain]/staking/index.vue
View File

@ -142,132 +142,134 @@ const rank = function (position: number) {
}; };
</script> </script>
<template> <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> <div>
<VCard> <div class="flex items-center justify-between">
<VTable class="text-no-wrap table-header-bg rounded-0"> <div class="tabs tabs-boxed bg-transparent mb-4">
<thead> <a
<tr> class="tab text-gray-400"
<th scope="col" style="width: 3rem">#</th> :class="{ 'tab-active': tab === 'active' }"
<th scope="col">VALIDATOR</th> @click="tab = 'active'"
<th scope="col" class="text-right">VOTING POWER</th> >Active</a
<th scope="col" class="text-right">24h CHANGES</th> >
<th scope="col" class="text-right">COMMISSION</th> <a
<th scope="col">ACTIONS</th> class="tab text-gray-400"
</tr> :class="{ 'tab-active': tab === 'inactive' }"
</thead> @click="tab = 'inactive'"
<tbody> >Inactive</a
<tr v-for="(v, i) in list" :key="v.operator_address"> >
<!-- 👉 rank --> </div>
<td>
<VChip label :color="rank(i)">
{{ i + 1 }}
</VChip>
</td>
<!-- 👉 Validator --> <div class="text-lg font-semibold">
<td> {{ list.length }}/{{ staking.params.max_validators }}
<div </div>
class="d-flex align-center overflow-hidden" </div>
style="max-width: 400px" <div>
> <VCard>
<VAvatar <VTable class="text-no-wrap table-header-bg rounded-0">
variant="tonal" <thead>
class="me-3" <tr>
size="34" <th scope="col" style="width: 3rem">#</th>
icon="mdi-help-circle-outline" <th scope="col">VALIDATOR</th>
:image="logo(v.description?.identity)" <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"> <div class="d-flex flex-column">
<h6 class="text-sm text-primary"> <h6 class="text-sm font-weight-medium">
<RouterLink {{
:to="{ format.formatToken(
name: 'chain-staking-validator', {
params: { validator: v.operator_address }, amount: parseInt(v.tokens).toString(),
}" denom: staking.params.bond_denom,
class="font-weight-medium user-list-name" },
> true,
{{ v.description?.moniker }} '0,0'
</RouterLink> )
}}
</h6> </h6>
<span class="text-xs">{{ <span class="text-xs">{{
v.description?.website || v.description?.identity || '-' format.calculatePercent(
v.delegator_shares,
staking.totalPower
)
}}</span> }}</span>
</div> </div>
</div> </td>
</td> <!-- 👉 24h Changes -->
<td
<!-- 👉 Voting Power --> class="text-right text-xs"
<td class="text-right"> :class="change24Color(v.consensus_pubkey)"
<div class="d-flex flex-column"> >
<h6 class="text-sm font-weight-medium"> {{ change24Text(v.consensus_pubkey) }}
{{ <VChip label v-if="v.jailed" color="error">Jailed</VChip>
format.formatToken( </td>
{ <!-- 👉 commission -->
amount: parseInt(v.tokens).toString(), <td class="text-right">
denom: staking.params.bond_denom, {{
}, format.formatCommissionRate(
true, v.commission?.commission_rates?.rate
'0,0'
)
}}
</h6>
<span class="text-xs">{{
format.calculatePercent(
v.delegator_shares,
staking.totalPower
) )
}}</span> }}
</div> </td>
</td> <!-- 👉 Action -->
<!-- 👉 24h Changes --> <td>
<td {{ 2 }}
class="text-right text-xs" </td>
:class="change24Color(v.consensus_pubkey)" </tr>
> </tbody>
{{ change24Text(v.consensus_pubkey) }} </VTable>
<VChip label v-if="v.jailed" color="error">Jailed</VChip> <VDivider />
</td> <VCardActions class="py-2">
<!-- 👉 commission --> <VChip label color="error">Top 33%</VChip>
<td class="text-right"> <VChip label color="warning" class="mx-2">Top 67%</VChip>
{{ </VCardActions>
format.formatCommissionRate( </VCard>
v.commission?.commission_rates?.rate </div>
)
}}
</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> </template>