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

imp: improve UI for dynamic components

Browse Source
This commit is contained in:
liangping 2023-06-15 18:47:44 +08:00
parent 4a98482eeb
commit f12c16bb9b
8 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/dynamic/ArrayObjectElement.vue
View File

@ -18,8 +18,8 @@ const header = computed(() => {
});
</script>
<template>
<div class="overflow-auto p-4 " :class=" value.length > 5 ? 'h-[500px]': ''">
<table class="table table-compact table-pin-rows w-full">
<div class="overflow-auto max-h-96 ">
<table class="table table-xs table-compact table-pin-rows w-full">
<thead v-if="thead">
<tr>
<th

5
src/components/dynamic/ObjectElement.vue
View File

@ -15,10 +15,7 @@ const props = defineProps(['value']);
{{ String(k).replaceAll('_', ' ') }}
</td>
<td>
<div
class="overflow-hidden w-auto whitespace-normal"
style="max-width: 1000px"
>
<div class="overflow-hidden w-auto whitespace-normal" >
<Component
v-if="v"
:is="select(v, 'horizontal')"

2
src/components/dynamic/TextElement.vue
View File

@ -25,7 +25,7 @@ function isAddress() {
const text = computed(() => {
if(!props.value) return ""
const v = props.value
const v = String(props.value)
switch(true) {
case v.length === 28 && v.endsWith("="): {
return format.validator(v) || v

6
src/layouts/components/DefaultLayout.vue
View File

@ -147,7 +147,9 @@ function selected(route: any, nav: NavLink) {
<img
v-if="el?.icon?.image"
:src="el?.icon?.image"
class="w-6 h-6 rounded-full mr-3 ml-4"
class="w-6 h-6 rounded-full mr-3 ml-4 " :class="{
'border border-gray-300 bg-white': selected($route, el),
}"
/>
<div
class="text-base capitalize text-gray-500 dark:text-gray-300"
@ -180,7 +182,7 @@ function selected(route: any, nav: NavLink) {
<img
v-if="item?.icon?.image"
:src="item?.icon?.image"
class="w-6 h-6 rounded-full mr-3"
class="w-6 h-6 rounded-full mr-3 border border-blue-100"
/>
<div
class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap"

2
src/libs/utils.ts
View File

@ -106,7 +106,7 @@ export function isHexAddress(v: any) {
export function isBech32Address(v?: string) {
if(!v) return ""
const pattern = /^[a-z\d]+1[a-z\d]{38}$/g
return v.search(pattern) > -1
return String(v).search(pattern) > -1
}
export function hexToRgb(hex: string) {

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

@ -64,11 +64,12 @@ onBeforeRouteUpdate(async (to, from, next) => {
<div>
<div v-if="isFutureBlock" class="text-center pt-28">
<div v-if="remainingBlocks > 0">
<div class="text-primary font-bold text-lg md: my-8">#{{ target }}</div>
<Countdown :time="estimateTime" css="text-5xl font-sans md:mx-5" />
<div class="my-5">Estimated Time: <span class="text-xl font-bold">{{ format.toLocaleDate(estimateDate) }}</span>
</div>
<div class="pt-10 flex justify-center">
<table class="table table-compact rounded-lg">
<table class="table w-max rounded-lg bg-base-100">
<tbody>
<tr class="hover cursor-pointer" @click="edit = !edit">
<td>Countdown For Block:</td>

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

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { computed, ref } from '@vue/reactivity';
import { useBaseStore, useFormatter } from '@/stores';
const props = defineProps(['height', 'chain']);
const props = defineProps(['chain']);
const tab = ref('blocks');
@ -19,7 +19,10 @@ const list = computed(() => {
<div>
<div class="tabs tabs-boxed bg-transparent mb-4">
<a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'blocks' }"
@click="tab = 'blocks'">Blocks</a>
@click="tab = 'blocks'">Recent Blocks</a>
<RouterLink class="tab text-gray-400 uppercase"
:to="`/${chain}/block/${Number(base.latest?.block?.header.height||0) + 10000}`"
>Future blocks</RouterLink>
<a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'transactions' }"
@click="tab = 'transactions'">Transactions</a>
</div>

4
src/modules/wallet/accounts.vue
View File

@ -312,7 +312,7 @@ async function loadBalances(endpoint: string, address: string) {
<li v-if="x.delegation.amount">
<a>
<img :src="x.account.logo" class="w-8 h-8 mr-2" />
<span class="font-bold">{{ format.formatToken(x.delegation, true, '0,0.[000000]', 'all') }} <br><span
<span class="font-bold">{{ format.formatToken(x.delegation, true, '0,0.[00]', 'all') }} <br><span
class="text-xs" :class="format.color(x.delegation.change24h)">{{
format.formatNumber(x.delegation.change24h, '+0.[00]') }}%</span></span>
<span class="float-right text-right">${{ format.formatNumber(x.delegation.value, '0,0.[00]') }}<br><span
@ -331,7 +331,7 @@ async function loadBalances(endpoint: string, address: string) {
<li v-for="x in s.balances">
<a>
<img :src="s.account.logo" class="w-8 h-8 mr-2" />
<span class="font-bold">{{ format.formatToken(x, true, '0,0.[000000]', 'all') }} <br><span
<span class="font-bold">{{ format.formatToken(x, true, '0,0.[00]', 'all') }} <br><span
class="text-xs" :class="format.color(x.change24h)">{{ format.formatNumber(x.change24h, '+0.[00]')
}}%</span></span>
<span class="float-right text-right">${{ format.formatNumber(x.value, '0,0.[00]') }}<br><span