vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

chore: move offline overlay to ready component
continuous-integration/drone/pr Build is passing Details

This commit is contained in:
kolaente 2021-11-10 19:47:06 +01:00
parent ce3a53ad17
commit f0b2d7c59d
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 36 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/App.vue
View File

@ -10,12 +10,6 @@
<content-no-auth v-else/>
<notification/>
</div>
<div class="app offline" v-if="!online">
<div class="offline-message">
<h1>You are offline.</h1>
<p>Please check your network connection and try again.</p>
</div>
</div>
<transition name="fade">
<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
@ -118,29 +112,3 @@ export default defineComponent({
<style lang="scss">
@import '@/styles/global.scss';
</style>
<style lang="scss" scoped>
.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;
}
}
}
</style>

37
src/components/misc/ready.vue
View File

@ -1,5 +1,11 @@
<template>
<template v-if="ready">
<div class="app offline" v-if="!online">
<div class="offline-message">
<h1>You are offline.</h1>
<p>Please check your network connection and try again.</p>
</div>
</div>
<template v-else-if="ready">
<slot/>
</template>
<section v-else-if="error !== ''">
@ -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;
}
}
}
</style>