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

feat: proposal item

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-15 23:42:45 +08:00
parent a478949bdd
commit 8be8ee5746
2 changed files with 80 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/ProposalListItem.vue
View File

@ -26,10 +26,10 @@ const statusMap: Record<string, string> = {
</script>
<template>
<div class="bg-white dark:bg-[#28334e] rounded text-sm">
<table class="table w-full">
<table class="table-compact w-full table-fixed hidden lg:table">
<tbody>
<tr v-for="(item, index) in proposals?.proposals" :key="index">
<td class="px-4 w-10">
<td class="px-4 w-20">
<RouterLink
class="text-main text-base hover:text-indigo-400"
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
@ -37,29 +37,29 @@ const statusMap: Record<string, string> = {
#{{ item?.proposal_id }}
</RouterLink>
</td>
<td class="w-[40%]">
<td class="w-[35%]">
<div>
<RouterLink
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
class="text-main text-base mb-1 block hover:text-indigo-400"
class="text-main text-base mb-1 block hover:text-indigo-400 truncate"
>
{{ item?.content?.title }}
</RouterLink>
<div
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs"
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
>
{{ showType(item.content['@type']) }}
</div>
</div>
</td>
<td class="w-[30%]">
<td class="w-[25%]">
<ProposalProcess
:pool="staking.pool"
:tally="item.final_tally_result"
></ProposalProcess>
</td>
<td>
<div>
<div class="pl-4">
<div
class="flex items-center"
:class="
@ -103,5 +103,75 @@ const statusMap: Record<string, string> = {
</tr>
</tbody>
</table>
<div class="lg:hidden">
<div
v-for="(item, index) in proposals?.proposals"
:key="index"
class="px-4 py-4"
>
<RouterLink
:to="`/${chain.chainName}/gov/${item?.proposal_id}`"
class="text-main text-base mb-1 flex justify-between hover:text-indigo-400 truncate"
>
<div>{{ item?.content?.title }}</div>
<div>#{{ item?.proposal_id }}</div>
</RouterLink>
<div class="grid grid-cols-4 mt-2 mb-2">
<div class="col-span-2">
<div
class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
>
{{ showType(item.content['@type']) }}
</div>
</div>
<div
class="flex items-center"
:class="
statusMap?.[item?.status] === 'PASSED'
? 'text-yes'
: statusMap?.[item?.status] === 'REJECTED'
? 'text-no'
: 'text-info'
"
>
<div
class="w-1 h-1 rounded-full mr-2"
:class="
statusMap?.[item?.status] === 'PASSED'
? 'bg-yes'
: statusMap?.[item?.status] === 'REJECTED'
? 'bg-no'
: 'bg-info'
"
></div>
<div class="text-xs flex items-center">
{{ statusMap?.[item?.status] || item?.status }}
</div>
</div>
<div
class="truncate text-xs text-gray-500 dark:text-gray-400 flex items-center justify-end"
>
{{ format.toDay(item.voting_end_time, 'from') }}
</div>
</div>
<div>
<ProposalProcess
:pool="staking.pool"
:tally="item.final_tally_result"
></ProposalProcess>
</div>
<div class="mt-4">
<button class="btn btn-xs btn-primary rounded-sm mr-3 px-4">
Detail
</button>
<button class="btn btn-xs btn-primary rounded-sm px-4">Vote</button>
</div>
</div>
</div>
</div>
</template>

6
src/components/ProposalProcess.vue
View File

@ -39,21 +39,21 @@ const veto = computed(() =>
{{ yes }}
</div>
<div
class="h-7 bg-no flex items-center overflow-hidden"
class="h-7 bg-no flex items-center text-white overflow-hidden"
:style="`width: ${no}`"
:title="no"
>
{{ no }}
</div>
<div
class="h-7 bg-[#B71C1C] flex items-center overflow-hidden"
class="h-7 bg-[#B71C1C] flex items-center text-white overflow-hidden"
:style="`width: ${veto};`"
:title="veto"
>
{{ veto }}
</div>
<div
class="h-7 bg-secondary flex items-center overflow-hidden"
class="h-7 bg-secondary flex items-center text-white overflow-hidden"
:style="`width: ${abstain}`"
:title="abstain"
>