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

64
src/components/ChainSummary.vue
View File

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { getLogo, useDashboard, } from '@/stores/useDashboard';
import { getLogo, useDashboard, } from '@/stores/useDashboard';
import { computed } from 'vue';
const props = defineProps({
@ -10,45 +10,37 @@ const props = defineProps({
});
const dashboardStore = useDashboard()
const conf = computed(()=> dashboardStore.chains[props.name] || {})
const conf = computed(() => dashboardStore.chains[props.name] || {})
</script>
<template>
<VCard outlined class="p-1">
<VList class="card-list">
<VListItem :to="`/${name}`">
<template #prepend>
<VAvatar rounded size="45" variant="tonal" class="me-3">
<VImg :src="conf.logo" height="22"/>
</VAvatar>
</template>
<VCard outlined class="p-1">
<VList class="card-list">
<VListItem :to="`/${name}`">
<template #prepend>
<VAvatar rounded size="45" variant="tonal" class="me-3">
<VImg :src="conf.logo" height="22" />
</VAvatar>
</template>
<VListItemTitle class="font-weight-semibold text-sm mb-1">
{{ conf?.prettyName || props.name }}
</VListItemTitle>
<VListItemTitle class="font-weight-semibold text-sm mb-1">
{{ conf?.prettyName || props.name }}
</VListItemTitle>
<VListItemSubtitle class="text-xs">
{{conf?.chainId || ''}}
</VListItemSubtitle>
<VListItemSubtitle class="text-xs">
{{ 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"
>
{{ $t('index.add_to_favorite') }}
</VTooltip>
</VListItemAction>
</template>
</VListItem>
</VList>
</VCard>
<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">
{{ $t('index.add_to_favorite') }}
</VTooltip>
</VListItemAction>
</template>
</VListItem>
</VList>
</VCard>
</template>

20
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">
@ -41,19 +41,17 @@ const chain = useBlockchain()
</div>
<div v-if="dashboard.status !== LoadingStatus.Loaded" class="flex justify-center"><progress
class="progress progress-info w-80 h-1"></progress></div>
<VTextField v-model="keywords" variant="underlined" :placeholder="$t('index.search_placeholder')"
style="max-width: 300px;" app>
<template #append-inner>
{{ 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>