Stackedit/src/components/App.vue
2017-10-02 01:34:48 +01:00

57 lines
1.1 KiB
Vue

<template>
<splash-screen v-if="!ready"></splash-screen>
<div v-else class="app" :class="{'app--loading': loading}">
<layout></layout>
<modal v-if="showModal"></modal>
<notification></notification>
</div>
</template>
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import Layout from './Layout';
import Modal from './Modal';
import Notification from './Notification';
import SplashScreen from './SplashScreen';
// Global directives
Vue.directive('focus', {
inserted(el) {
el.focus();
},
});
export default {
components: {
Layout,
Modal,
Notification,
SplashScreen,
},
computed: {
...mapState([
'ready',
]),
loading() {
return !this.$store.getters['content/current'].id;
},
showModal() {
return !!this.$store.getters['modal/config'];
},
},
};
</script>
<style lang="scss">
@import 'common/app';
.app__spash-screen {
margin: 0 auto;
max-width: 600px;
height: 100%;
background: no-repeat center url('../assets/logo.svg');
background-size: contain;
}
</style>