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

feat: staking page UI refactor

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-10 13:15:12 +08:00
parent 270c8f5093
commit 7a494e7b59
2 changed files with 124 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/modules/[chain]/ibc/[connection_id].vue
View File

@ -136,7 +136,16 @@ function color(v: string) {
<td>{{ v.version }}</td>
<td>{{ v.ordering }}</td>
<td>
<VChip :color="color(v.state)">{{ v.state }}</VChip>
<div
class="text-xs truncate relative py-2 px-4 rounded-full w-fit"
:class="`text-${color(v.state)}`"
>
<span
class="inset-x-0 inset-y-0 opacity-10 absolute"
:class="`bg-${color(v.state)}`"
></span>
{{ v.state }}
</div>
</td>
</tr>
</tbody>

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

@ -163,12 +163,13 @@ const rank = function (position: number) {
{{ list.length }}/{{ staking.params.max_validators }}
</div>
</div>
<div>
<VCard>
<VTable class="text-no-wrap table-header-bg rounded-0">
<div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr>
<th scope="col" style="width: 3rem">#</th>
<th scope="col" style="width: 3rem;position: relative;">#</th>
<th scope="col">VALIDATOR</th>
<th scope="col" class="text-right">VOTING POWER</th>
<th scope="col" class="text-right">24h CHANGES</th>
@ -262,13 +263,28 @@ const rank = function (position: number) {
</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>
</table>
</div>
<div class="divider"></div>
<div class="flex flex-row">
<div
class="text-xs truncate relative py-2 px-4 rounded-md w-fit text-error mr-2"
>
<span
class="inset-x-0 inset-y-0 opacity-10 absolute bg-error"
></span>
Top 33%
</div>
<div
class="text-xs truncate relative py-2 px-4 rounded-md w-fit text-warning"
>
<span
class="inset-x-0 inset-y-0 opacity-10 absolute bg-warning"
></span>
Top 67%
</div>
</div>
</div>
</div>
</template>