skillbox/client/src/App.vue

89 lines
2.7 KiB
Vue

<template>
<div :class="{'no-scroll': showModal || showMobileNavigation}" class="app" id="app">
<component :is="showModal" v-if="showModal"></component>
<component :is="layout"></component>
<mobile-navigation v-if="showMobileNavigation"></mobile-navigation>
</div>
</template>
<script>
import DefaultLayout from '@/layouts/DefaultLayout';
import SimpleLayout from '@/layouts/SimpleLayout';
import BlankLayout from '@/layouts/BlankLayout';
import FullScreenLayout from '@/layouts/FullScreenLayout';
import PublicLayout from '@/layouts/PublicLayout';
import Modal from '@/components/Modal';
import MobileNavigation from '@/components/MobileNavigation';
import NewContentBlockWizard from '@/components/content-block-form/NewContentBlockWizard';
import EditContentBlockWizard from '@/components/content-block-form/EditContentBlockWizard';
import NewRoomEntryWizard from '@/components/rooms/room-entries/NewRoomEntryWizard';
import EditRoomEntryWizard from '@/components/rooms/room-entries/EditRoomEntryWizard';
import NewObjectiveGroupWizard from '@/components/objective-groups/NewObjectiveGroupWizard';
import EditObjectiveGroupWizard from '@/components/objective-groups/EditObjectiveGroupWizard';
import NewProjectEntryWizard from '@/components/portfolio/NewProjectEntryWizard';
import EditProjectEntryWizard from '@/components/portfolio/EditProjectEntryWizard';
import NewObjectiveWizard from '@/components/objective-groups/NewObjectiveWizard';
import FullscreenImage from '@/components/FullscreenImage';
import FullscreenInfographic from '@/components/FullscreenInfographic';
import FullscreenVideo from '@/components/FullscreenVideo';
import {mapGetters} from 'vuex';
export default {
name: 'App',
components: {
DefaultLayout,
SimpleLayout,
BlankLayout,
FullScreenLayout,
PublicLayout,
Modal,
MobileNavigation,
NewContentBlockWizard,
EditContentBlockWizard,
NewRoomEntryWizard,
EditRoomEntryWizard,
// todo: remove
NewObjectiveGroupWizard,
EditObjectiveGroupWizard,
NewProjectEntryWizard,
EditProjectEntryWizard,
NewObjectiveWizard,
FullscreenImage,
FullscreenInfographic,
FullscreenVideo
},
computed: {
layout() {
return (this.$route.meta.layout || 'default') + '-layout';
},
...mapGetters(['showModal', 'showMobileNavigation'])
},
mounted() {
}
}
</script>
<style lang="scss">
@import "styles/main.scss";
body {
overflow-y: auto;
height: 100vh;
}
.app {
/*overflow-y: auto;*/
min-height: 100vh;
/*for IE10+*/
display: flex;
}
.no-scroll {
overflow-y: hidden;
}
</style>