(add) servers: not found

This commit is contained in:
kakkokari-gtyih 2023-07-10 12:55:57 +09:00
parent 5a692f54e7
commit 771d74f8b6
3 changed files with 19 additions and 13 deletions

View File

@ -1,5 +1,5 @@
<template>
<div :class="['bg-slate-100 dark:bg-gray-900 bg-opacity-80 backdrop-blur-lg sticky top-0 z-[9900]', { 'shadow': scrollPos >= 40 }]">
<div :class="['bg-slate-100 dark:bg-gray-900 bg-opacity-80 backdrop-blur-lg sticky top-0 z-[9900] transition-[box-shadow]', { 'shadow': scrollPos <= -40 }]">
<nav class="container mx-auto max-w-screen-xl h-16 lg:h-20 grid items-center grid-cols-2 md:grid-cols-4 lg:grid-cols-6 p-4">
<div class="">
<GNuxtLink :to="localePath('/')" class="flex items-center space-x-2 hover:opacity-80">
@ -9,7 +9,7 @@
</div>
<ul class="hidden lg:col-span-4 lg:space-x-8 xl:space-x-10 lg:flex justify-center">
<li v-for="item in NavData.center">
<GNuxtLink :to="localePath(item.to)" :class="['rounded-full px-4 py-1.5 hover:bg-slate-300 dark:hover:bg-slate-800 hover:bg-opacity-50 bg-blend-multiply', { 'bg-slate-200 dark:bg-slate-800': path.includes(item.to) }]">
<GNuxtLink :to="localePath(item.to)" :class="['rounded-full px-4 py-1.5 hover:bg-slate-300 dark:hover:bg-slate-800 hover:bg-opacity-50 bg-blend-multiply', { 'bg-slate-200 dark:bg-slate-800': path.replace(/\/$/, '') === localePath(item.to).replace(/\/$/, '') }]">
<component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
<template v-else>
{{ $t(item.i18n) }}
@ -79,20 +79,19 @@ function rotateColorMode() {
const scrollPos = ref(0);
function updatePos() {
scrollPos.value = window.screenY;
async function updatePos() {
scrollPos.value = document.body.getBoundingClientRect().y;
}
if (process.client) {
window.addEventListener('scroll', updatePos);
window.addEventListener('resize', updatePos);
}
onMounted(() => {
if (process.client) {
window.addEventListener('scroll', updatePos());
window.addEventListener('resize', updatePos());
}
});
onUnmounted(() => {
if (process.client) {
window.removeEventListener('scroll', updatePos());
window.removeEventListener('resize', updatePos());
window.removeEventListener('scroll', updatePos);
window.removeEventListener('resize', updatePos);
}
});
</script>

View File

@ -100,4 +100,5 @@ _servers:
public: "開放"
inviteOnly: "招待のみ"
_list:
notFound: "指定された条件に合致するサーバーは見つかりませんでした。"
showMore: "もっと見る"

View File

@ -89,7 +89,13 @@
</aside>
<div>
<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2">
<ServersItem 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">
<div class="mx-auto text-center">
<img src="https://xn--931a.moe/assets/info.jpg" class="rounded mx-auto mb-4" />
<p class="max-w-xs">{{ $t('_servers._list.notFound') }}</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 class="mr-1" />{{ $t('_servers._list.showMore') }}
</button>