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

feat: dashboard layout

Browse Source
This commit is contained in:
alisa 2023-05-04 23:46:20 +08:00
parent dbddd6beb6
commit aac687cd0d
2 changed files with 37 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/ChainSummary.vue
View File

@ -10,7 +10,7 @@ const props = defineProps({
});
const dashboardStore = useDashboard()
const conf = computed(()=> dashboardStore.chains[props.name] || {})
const conf = computed(() => dashboardStore.chains[props.name] || {})
</script>
<template>
@ -19,7 +19,7 @@ const conf = computed(()=> dashboardStore.chains[props.name] || {})
<VListItem :to="`/${name}`">
<template #prepend>
<VAvatar rounded size="45" variant="tonal" class="me-3">
<VImg :src="conf.logo" height="22"/>
<VImg :src="conf.logo" height="22" />
</VAvatar>
</template>
@ -28,22 +28,14 @@ const conf = computed(()=> dashboardStore.chains[props.name] || {})
</VListItemTitle>
<VListItemSubtitle class="text-xs">
{{conf?.chainId || ''}}
{{ conf?.chainId || '' }}
</VListItemSubtitle>
<template #append>
<VListItemAction @click="(e:Event)=>{e.stopPropagation()}">
<VCheckbox
v-model="dashboardStore.favorite"
true-icon="mdi-star"
false-icon="mdi-star"
color="warning"
:value="props.name"
/>
<VTooltip
activator="parent"
location="top"
>
<VListItemAction @click="(e: Event) => { e.stopPropagation() }">
<VCheckbox v-model="dashboardStore.favorite" true-icon="mdi-star" false-icon="mdi-star" color="warning"
:value="props.name" />
<VTooltip activator="parent" location="top">
{{ $t('index.add_to_favorite') }}
</VTooltip>
</VListItemAction>

18
src/pages/index.vue
View File

@ -23,13 +23,13 @@ const chain = useBlockchain()
<template>
<div class="">
<div class="flex items-center justify-center mb-6 mt-10">
<div class="w-16 rounded-full mr-3">
<div class="w-8 md:w-16 rounded-full mr-3">
<img src="/logo.svg" />
</div>
<h1 class="text-primary text-6xl font-bold mr-2">
<h1 class="text-primary text-3xl md:text-6xl font-bold mr-2">
Ping dashboard
</h1>
<div class="badge badge-info badge-outline mt-5">Beta</div>
<div class="badge badge-info badge-outline mt-1 text-sm md:mt-5">Beta</div>
</div>
<div class="text-center text-base">
<p class="mb-1">
@ -48,12 +48,10 @@ const chain = useBlockchain()
{{ chains.length }}/{{ dashboard.length }}
</template>
</VTextField>
<VRow class="my-auto">
<VCol v-for="k in chains" md="3">
<VLazy min-height="40" min-width="200" transition="fade-transition">
<ChainSummary :name="k.chainName" />
</VLazy>
</VCol>
</VRow>
<div class="grid grid-cols-2 gap-4 mt-6 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5">
<ChainSummary v-for="(chain, index) in chains" :key="index" :name="chain.chainName" />
</div>
</div>
</template>