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

improve UI for mobile

Browse Source
This commit is contained in:
liangping 2023-05-22 14:52:47 +08:00
parent e6eb61021d
commit 1cfc49e9a9
4 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/layouts/components/ChainProfile.vue
View File

@ -15,40 +15,49 @@ chainStore.initial();
></div>
</div>
<div
class="dropdown-content menu shadow bg-base-100 rounded-box max-h-[300px] overflow-auto"
class="dropdown-content w-80 menu shadow bg-base-200 rounded-box max-h-[300px] overflow-auto"
>
<div>
<!-- rest -->
<div
class="px-4 py-2 text-sm text-gray-400"
v-if="chainStore.current?.endpoints?.rest"
>
Rest Endpoint
<!-- rest -->
<div class="px-4 py-2 text-sm text-gray-400">
Information
</div>
<div class="w-full hover:bg-gray-100 dark:bg-[#384059]">
<div class="py-2 px-4">
Chain Id: {{ baseStore.latest.block?.header.chain_id }}
</div>
<div tabindex="0">
<div
v-for="(item, index) in chainStore.current?.endpoints?.rest"
@click="chainStore.setRestEndpoint(item)"
class="px-4 py-2 hover:bg-gray-100 dark:bg-[#384059] cursor-pointer"
:key="index"
>
<div class="flex flex-col items-start">
<div class="flex items-center justify-between w-full">
<div class="text-gray-500 dark:text-gray-200 capitalize">
{{ item.provider }}
</div>
<span
v-if="item.address === chainStore.endpoint?.address"
class="bg-yes inline-block h-2 w-2 rounded-full"
/>
</div>
<div class="text-gray-400 text-xs whitespace-nowrap">
{{ item.address }}
</div>
<div class="py-2 px-4">
Height: {{ baseStore.latest.block?.header.height }}
</div>
</div>
<!-- rest -->
<div
class="px-4 py-2 text-sm text-gray-400"
v-if="chainStore.current?.endpoints?.rest"
>
Rest Endpoint
</div>
<div
v-for="(item, index) in chainStore.current?.endpoints?.rest"
@click="chainStore.setRestEndpoint(item)"
class="px-4 py-2 w-full hover:bg-gray-100 dark:bg-[#384059] cursor-pointer"
:key="index"
>
<div class="flex flex-col items-start">
<div class="flex items-center justify-between w-full">
<div class="text-gray-500 dark:text-gray-200 capitalize">
{{ item.provider }}
</div>
<span
v-if="item.address === chainStore.endpoint?.address"
class="bg-yes inline-block h-2 w-2 rounded-full"
/>
</div>
<div class="text-gray-400 text-xs whitespace-nowrap">
{{ item.address }}
</div>
</div>
</div>
<!-- grpc -->
<div
@ -74,13 +83,12 @@ chainStore.initial();
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="flex-1 w-0">
<Transition name="fade" mode="out-in" appear>
<div :key="baseStore.latest?.block?.header?.height || chainStore.chainName || ''"
class="capitalize whitespace-nowrap text-base font-semibold text-gray-600 dark:text-gray-200"
class="capitalize whitespace-nowrap text-base font-semibold text-gray-600 dark:text-gray-200 hidden md:!block"
>
#{{
baseStore.latest?.block?.header?.height || chainStore.chainName || ''
@ -88,7 +96,7 @@ chainStore.initial();
</div>
</Transition>
<div
class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden lg:!block"
class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden md:!block"
>
{{ chainStore.connErr || chainStore.endpoint.address }}
</div>

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

@ -6,7 +6,7 @@ import { useThemeConfig } from '@/plugins/vuetify/@core/composable/useThemeConfi
// Components
import newFooter from '@/layouts/components/NavFooter.vue';
import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue';
import UserProfile from '@/layouts/components/ChainProfile.vue';
import ChainProfile from '@/layouts/components/ChainProfile.vue';
import { useDashboard } from '@/stores/useDashboard';
@ -229,7 +229,7 @@ const showDiscord = window.location.host.search("ping.pub") > -1
<Icon icon="mdi-menu" />
</div>
<UserProfile />
<ChainProfile />
<div class="flex-1 w-0"></div>

16
src/modules/[chain]/index.vue
View File

@ -103,8 +103,8 @@ const color = computed(() => {
v-if="coinInfo && coinInfo.name"
class="bg-base-100 rounded shadow mb-4"
>
<div class="flex p-4">
<div class="">
<div class="grid grid-cols-2 md:grid-cols-3 p-4">
<div class="col-span-2 md:col-span-1">
<div class="text-xl font-semibold text-main">
{{ coinInfo.name }} (<span class="uppercase">{{
coinInfo.symbol
@ -119,7 +119,7 @@ const color = computed(() => {
</div>
</div>
<div class="mt-4 flex items-center">
<div class="my-4 flex flex-wrap items-center">
<a
v-for="(item, index) of comLinks"
:key="index"
@ -133,7 +133,7 @@ const color = computed(() => {
<div>
<div
class="dropdown dropdown-hover w-full md:!w-[400px] mt-[16px] md:!mt-[36px]"
class="dropdown dropdown-hover w-full"
>
<label>
<div
@ -166,7 +166,7 @@ const color = computed(() => {
</label>
<div class="dropdown-content pt-1">
<div
class="h-64 overflow-auto w-full md:!w-[400px] shadow rounded"
class="h-64 overflow-auto w-full shadow rounded"
>
<ul class="menu w-full bg-gray-100 rounded dark:bg-[#384059]">
<li
@ -200,7 +200,7 @@ const color = computed(() => {
<a
:color="store.trustColor"
class="mt-5 !text-white btn !bg-yes !border-yes w-full md:!w-[400px] flex items-center"
class="my-5 !text-white btn !bg-yes !border-yes w-full"
:href="ticker.trade_url"
target="_blank"
>
@ -209,7 +209,7 @@ const color = computed(() => {
</div>
</div>
<div class="flex-1 hidden md:!block">
<div class="col-span-2">
<PriceMarketChart />
</div>
</div>
@ -243,7 +243,7 @@ const color = computed(() => {
<div class="px-4 pb-4">
<ProposalListItem :proposals="store?.proposals" />
</div>
<div class="pl-4 pb-8 py-4" v-if="store.proposals?.length === 0">
<div class="pb-8 text-center" v-if="store.proposals?.proposals?.length === 0">
No active proposals
</div>
</div>

2
src/modules/[chain]/uptime/index.vue
View File

@ -152,7 +152,7 @@ function changeTab(v: string) {
</div>
</div>
<div :class="tab === '3'?'':'hidden'">
<div :class="tab === '3'?'':'hidden'" class=" overflow-hidden">
<table class="table table-compact w-full mt-5">
<thead class=" capitalize">
<tr>