skillbox/client/src/App.vue

104 lines
2.9 KiB
Vue

<template>
<div
:class="{'no-scroll': showModal || showMobileNavigation}"
class="app"
id="app">
<scroll-up/>
<component
:is="showModalDeprecated"
v-if="showModalDeprecated"/>
<component
:is="showModal"
v-if="showModal"/>
<component :is="layout"/>
</div>
</template>
<script>
import DefaultLayout from '@/layouts/DefaultLayout';
import SimpleLayout from '@/layouts/SimpleLayout';
import FullScreenLayout from '@/layouts/FullScreenLayout';
import PublicLayout from '@/layouts/PublicLayout';
import Modal from '@/components/Modal';
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 NewProjectEntryWizard from '@/components/portfolio/NewProjectEntryWizard';
import EditProjectEntryWizard from '@/components/portfolio/EditProjectEntryWizard';
import NewObjectiveWizard from '@/components/objective-groups/NewObjectiveWizard';
import NewNoteWizard from '@/components/notes/NewNoteWizard';
import EditNoteWizard from '@/components/notes/EditNoteWizard';
import EditClassNameWizard from '@/components/school-class/EditClassNameWizard';
import FullscreenImage from '@/components/FullscreenImage';
import FullscreenInfographic from '@/components/FullscreenInfographic';
import FullscreenVideo from '@/components/FullscreenVideo';
import DeactivatePerson from '@/components/profile/DeactivatePerson';
import {mapGetters} from 'vuex';
import ScrollUp from '@/components/ScrollUp';
export default {
name: 'App',
components: {
ScrollUp,
DefaultLayout,
SimpleLayout,
FullScreenLayout,
PublicLayout,
Modal,
NewContentBlockWizard,
EditContentBlockWizard,
NewRoomEntryWizard,
EditRoomEntryWizard,
NewProjectEntryWizard,
EditProjectEntryWizard,
NewObjectiveWizard,
NewNoteWizard,
EditNoteWizard,
EditClassNameWizard,
FullscreenImage,
FullscreenInfographic,
FullscreenVideo,
DeactivatePerson
},
computed: {
layout() {
return (this.$route.meta.layout || 'default') + '-layout';
},
...mapGetters({
showModalDeprecated: 'showModal', // don't use this any more todo: remove this
showMobileNavigation: 'showMobileNavigation'
}),
showModal() {
return this.$modal.state.component;
}
},
}
</script>
<style lang="scss">
@import "styles/main.scss";
body {
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
}
.app {
/*overflow-y: auto;*/
min-height: 100vh;
/*for IE10+*/
display: flex;
}
.no-scroll {
overflow-y: hidden;
}
</style>