161sh/jointrashposs
1
0
Fork 0
mirror of https://iceshrimp.dev/Crimekillz/jointrashposs.git synced 2024-11-22 08:53:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

(add) servers: add fallback text

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/servers/Finder.vue
View File

@ -59,12 +59,17 @@
<div> <div>
<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2"> <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" /> <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"> <div class="mx-auto text-center">
<img src="https://xn--931a.moe/assets/info.jpg" class="rounded-lg mx-auto mb-4" /> <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> <p class="max-w-xs">{{ $t('_servers._list.notFound') }}</p>
</div> </div>
</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"> <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') }} <ArrowIco />{{ $t('_servers._list.showMore') }}
</button> </button>
@ -218,5 +223,9 @@ function switchOrder() {
</script> </script>
<style scoped> <style scoped>
@screen lg {
.server-list {
grid-template-columns: 300px 1fr;
}
}
</style> </style>

12
pages/servers.vue
View File

@ -29,9 +29,14 @@
</div> </div>
</template> </template>
</GHero> </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> <ClientOnly>
<ServersFinder @load="setServerStats" /> <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> </ClientOnly>
</div> </div>
</div> </div>
@ -57,9 +62,4 @@ route.meta.title = t('_servers.title');
</script> </script>
<style scoped> <style scoped>
@screen lg {
.server-list {
grid-template-columns: 300px 1fr;
}
}
</style> </style>