From 771d74f8b6c4613b01e8825f1d731a6d00346cea Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Mon, 10 Jul 2023 12:55:57 +0900
Subject: [PATCH] (add) servers: not found

---
 components/g/Nav.vue | 23 +++++++++++------------
 locales/ja-JP.yml    |  1 +
 pages/servers.vue    |  8 +++++++-
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/components/g/Nav.vue b/components/g/Nav.vue
index 7497b91d..fb00ad46 100644
--- a/components/g/Nav.vue
+++ b/components/g/Nav.vue
@@ -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>
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index b7e4cb7c..45c05fd3 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -100,4 +100,5 @@ _servers:
     public: "開放"
     inviteOnly: "招待のみ"
   _list:
+    notFound: "指定された条件に合致するサーバーは見つかりませんでした。"
     showMore: "もっと見る"    
\ No newline at end of file
diff --git a/pages/servers.vue b/pages/servers.vue
index 5f465756..f3a804ea 100644
--- a/pages/servers.vue
+++ b/pages/servers.vue
@@ -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>