(add) servers: add fallback text

This commit is contained in:
kakkokari-gtyih 2023-07-15 18:53:53 +09:00
parent 6bd5bb9469
commit 579ebc3fb6
2 changed files with 17 additions and 8 deletions

View file

@ -59,12 +59,17 @@
<div>
<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2">
<ServersItem v-if="filteredInstances.length > 0" v-for="item in filteredInstances.slice(0, f_limit)" :instance="item" />
<div v-else class="rounded-lg p-6 min-h-[40vh] flex items-center sm:col-span-2 md:col-span-2 lg:col-span-2 bg-slate-100 dark:bg-slate-800">
<div v-else-if="data" class="rounded-lg p-6 min-h-[40vh] flex items-center sm:col-span-2 md:col-span-2 lg:col-span-2 bg-slate-100 dark:bg-slate-800">
<div class="mx-auto text-center">
<img src="https://xn--931a.moe/assets/info.jpg" class="rounded-lg mx-auto mb-4" />
<p class="max-w-xs">{{ $t('_servers._list.notFound') }}</p>
</div>
</div>
<div v-else class="rounded-lg p-6 min-h-[40vh] flex items-center sm:col-span-2 md:col-span-2 lg:col-span-2 bg-slate-100 dark:bg-slate-800">
<div class="mx-auto text-center">
<p class="max-w-xs">{{ $t('loading') }}</p>
</div>
</div>
<button v-if="f_limit < filteredInstances.length" @click="f_limit += 20" class="btn btn-outline-primary btn-lg hover:!text-white block sm:col-span-2 md:col-span-2 lg:col-span-2 px-4">
<ArrowIco />{{ $t('_servers._list.showMore') }}
</button>
@ -218,5 +223,9 @@ function switchOrder() {
</script>
<style scoped>
@screen lg {
.server-list {
grid-template-columns: 300px 1fr;
}
}
</style>

View file

@ -29,9 +29,14 @@
</div>
</template>
</GHero>
<div class="pb-12 lg:mt-12 pt-6 bg-white dark:bg-slate-950">
<div class="pb-12 lg:mt-12 pt-6 bg-white dark:bg-slate-950 min-h-screen">
<ClientOnly>
<ServersFinder @load="setServerStats" />
<template #fallback>
<div class="container mx-auto max-w-screen-xl p-6">
<p class="text-center">{{ $t('loading') }}</p>
</div>
</template>
</ClientOnly>
</div>
</div>
@ -57,9 +62,4 @@ route.meta.title = t('_servers.title');
</script>
<style scoped>
@screen lg {
.server-list {
grid-template-columns: 300px 1fr;
}
}
</style>