diff --git a/src/App.vue b/src/App.vue
index 34b975aa7..b503a531d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,12 +10,6 @@
-
-
-
You are offline.
-
Please check your network connection and try again.
-
-
@@ -118,29 +112,3 @@ export default defineComponent({
-
-
\ No newline at end of file
diff --git a/src/components/misc/ready.vue b/src/components/misc/ready.vue
index c1a63bf00..fcc7ae03a 100644
--- a/src/components/misc/ready.vue
+++ b/src/components/misc/ready.vue
@@ -1,5 +1,11 @@
-
+
+
+
You are offline.
+
Please check your network connection and try again.
+
+
+
@@ -36,6 +42,8 @@
import logoUrl from '@/assets/logo.svg'
import ApiConfig from '@/components/misc/api-config'
import NoAuthWrapper from '@/components/misc/no-auth-wrapper'
+import {mapState} from 'vuex'
+import {ONLINE} from '@/store/mutation-types'
const ERROR_NO_API_URL = 'noApiUrlProvided'
@@ -62,6 +70,9 @@ export default {
showLoading() {
return !this.ready && this.error === ''
},
+ ...mapState({
+ online: ONLINE,
+ }),
},
methods: {
load() {
@@ -108,4 +119,28 @@ export default {
}
}
}
+
+.offline {
+ background: url('@/assets/llama-nightscape.jpg') no-repeat center;
+ background-size: cover;
+ height: 100vh;
+
+ .offline-message {
+ text-align: center;
+ position: absolute;
+ width: 100vw;
+ bottom: 5vh;
+ color: $white;
+ padding: 0 1rem;
+
+ h1 {
+ font-weight: bold;
+ font-size: 1.5rem;
+ text-align: center;
+ color: $white;
+ font-weight: 700 !important;
+ font-size: 1.5rem;
+ }
+ }
+}