From 96775ebcf3ad0c2fccad47ef6493f4d74338d354 Mon Sep 17 00:00:00 2001
From: Alex <49969959+alexzhang1030@users.noreply.github.com>
Date: Thu, 1 Dec 2022 11:08:09 +0800
Subject: [PATCH] feat: add offline check (#247)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 components/common/OfflineChecker.vue | 17 +++++++++++++++++
 components/nav/NavBottom.vue         |  2 +-
 layouts/default.vue                  |  9 +++++++--
 locales/en-US.json                   |  3 ++-
 locales/zh-CN.json                   |  3 ++-
 styles/vars.css                      |  4 +++-
 6 files changed, 32 insertions(+), 6 deletions(-)
 create mode 100644 components/common/OfflineChecker.vue

diff --git a/components/common/OfflineChecker.vue b/components/common/OfflineChecker.vue
new file mode 100644
index 00000000..71c299a3
--- /dev/null
+++ b/components/common/OfflineChecker.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  smallScreen: boolean
+}>()
+const online = useOnline()
+</script>
+
+<template>
+  <div
+    v-if="!online"
+    w-full min-h-30px px4 py3 text-primary bg-base
+    border="t base" flex="~ gap-2 center"
+  >
+    <div i-ri:wifi-off-line />
+    {{ $t('common.offline_desc') }}
+  </div>
+</template>
diff --git a/components/nav/NavBottom.vue b/components/nav/NavBottom.vue
index ea6fbbe2..3fedd35b 100644
--- a/components/nav/NavBottom.vue
+++ b/components/nav/NavBottom.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <nav h-14 fixed bottom-0 left-0 right-0 z-10 border="t base" bg-base flex flex-row>
+  <nav h-14 border="t base" flex flex-row>
     <template v-if="currentUser">
       <NuxtLink to="/home" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
         <div i-ri:home-5-line />
diff --git a/layouts/default.vue b/layouts/default.vue
index 5f7c1d1c..c3406029 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -13,9 +13,14 @@
           </slot>
         </div>
       </aside>
-      <NavBottom v-if="isSmallScreen" />
       <div class="w-full mb14 md:(w-3/4 mb0) lg:(w-2/4 mb0) min-h-screen" border="l r base">
-        <slot />
+        <div min-h-screen>
+          <slot />
+        </div>
+        <div sticky left-0 right-0 bottom-0 z-10 bg-base>
+          <CommonOfflineChecker :small-screen="isSmallScreen" />
+          <NavBottom v-if="isSmallScreen" />
+        </div>
       </div>
       <aside class="hidden md:none lg:block w-1/4 zen-hide">
         <div sticky top-0 h-screen flex="~ col">
diff --git a/locales/en-US.json b/locales/en-US.json
index 54f43ff2..b0f26f8f 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -37,7 +37,8 @@
   "common": {
     "end_of_list": "End of the list",
     "error": "ERROR",
-    "not_found": "404 Not Found"
+    "not_found": "404 Not Found",
+    "offline_desc": "Seems like you are offline. Please check your network connection."
   },
   "error": {
     "account_not_found": "Account {0} not found"
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 6718fa9a..6a41dec8 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -37,7 +37,8 @@
   "common": {
     "end_of_list": "列表到底啦",
     "error": "错误",
-    "not_found": "无法找到相关内容"
+    "not_found": "无法找到相关内容",
+    "offline_desc": "您目前已离线，请检查网络连接。"
   },
   "error": {
     "account_not_found": "未找到用户 {0}"
diff --git a/styles/vars.css b/styles/vars.css
index 5c77856e..b213ff4b 100644
--- a/styles/vars.css
+++ b/styles/vars.css
@@ -1,7 +1,7 @@
 :root {
   --c-primary: #EA9E44;
   --c-primary-active: #C16929;
-  --c-border: #88888820;
+  --c-border: #eee;
 
   --c-bg-base: #fff;
   --c-bg-active: #f6f6f6;
@@ -19,6 +19,8 @@
 }
 
 .dark {
+  --c-border: #222;
+
   --c-bg-base: #111;
   --c-bg-active: #191919;
   --c-bg-code: #ffffff06;