133 lines
4.0 KiB
Vue
133 lines
4.0 KiB
Vue
<template>
|
|
<div
|
|
:class="{ 'no-scroll': showModal || showMobileNavigation }"
|
|
class="app"
|
|
id="app"
|
|
>
|
|
<read-only-banner />
|
|
<scroll-up />
|
|
<component
|
|
:is="showModalDeprecated"
|
|
v-if="showModalDeprecated"
|
|
/>
|
|
<component
|
|
:is="showModal"
|
|
v-if="showModal"
|
|
/>
|
|
<component :is="layout" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineAsyncComponent } from 'vue';
|
|
import { mapGetters } from 'vuex';
|
|
import ScrollUp from '@/components/ScrollUp';
|
|
import ReadOnlyBanner from '@/components/ReadOnlyBanner';
|
|
|
|
import modals from '@/components/modals';
|
|
|
|
const NewContentBlockWizard = defineAsyncComponent(() =>
|
|
import(/* webpackChunkName: "content-forms" */ '@/components/content-block-form/NewContentBlockWizard')
|
|
);
|
|
const EditContentBlockWizard = defineAsyncComponent(() =>
|
|
import(/* webpackChunkName: "content-forms" */ '@/components/content-block-form/EditContentBlockWizard')
|
|
);
|
|
const EditRoomEntryWizard = defineAsyncComponent(() =>
|
|
import(/* webpackChunkName: "content-forms" */ '@/components/rooms/room-entries/EditRoomEntryWizard')
|
|
);
|
|
const NewProjectEntryWizard = defineAsyncComponent(() =>
|
|
import(/* webpackChunkName: "content-forms" */ '@/components/portfolio/NewProjectEntryWizard')
|
|
);
|
|
const EditProjectEntryWizard = defineAsyncComponent(() =>
|
|
import(/* webpackChunkName: "content-forms" */ '@/components/portfolio/EditProjectEntryWizard')
|
|
);
|
|
const NewObjectiveWizard = defineAsyncComponent(() =>
|
|
import(/* webpackChunkName: "content-forms" */ '@/components/objective-groups/NewObjectiveWizard')
|
|
);
|
|
const NewNoteWizard = defineAsyncComponent(() =>
|
|
import(/* webpackChunkName: "content-forms" */ '@/components/notes/NewNoteWizard')
|
|
);
|
|
const EditNoteWizard = defineAsyncComponent(() =>
|
|
import(/* webpackChunkName: "content-forms" */ '@/components/notes/EditNoteWizard')
|
|
);
|
|
const EditClassNameWizard = defineAsyncComponent(() =>
|
|
import(/* webpackChunkName: "content-forms" */ '@/components/school-class/EditClassNameWizard')
|
|
);
|
|
const EditTeamNameWizard = defineAsyncComponent(() =>
|
|
import(/* webpackChunkName: "content-forms" */ '@/components/profile/EditTeamNameWizard')
|
|
);
|
|
const EditSnapshotTitleWizard = defineAsyncComponent(() =>
|
|
import(/* webpackChunkName: "content-forms" */ '@/components/snapshots/EditSnapshotTitleWizard')
|
|
);
|
|
const DefaultLayout = defineAsyncComponent(() => import(/* webpackChunkName: "layouts" */ '@/layouts/DefaultLayout'));
|
|
const SimpleLayout = defineAsyncComponent(() => import(/* webpackChunkName: "layouts" */ '@/layouts/SimpleLayout'));
|
|
const FullScreenLayout = defineAsyncComponent(() =>
|
|
import(/* webpackChunkName: "layouts" */ '@/layouts/FullScreenLayout')
|
|
);
|
|
const PublicLayout = defineAsyncComponent(() => import(/* webpackChunkName: "layouts" */ '@/layouts/PublicLayout'));
|
|
const BlankLayout = defineAsyncComponent(() => import(/* webpackChunkName: "layouts" */ '@/layouts/BlankLayout'));
|
|
const SplitLayout = defineAsyncComponent(() => import(/* webpackChunkName: "layouts" */ '@/layouts/SplitLayout'));
|
|
|
|
export default {
|
|
name: 'App',
|
|
|
|
components: {
|
|
ReadOnlyBanner,
|
|
ScrollUp,
|
|
DefaultLayout,
|
|
SimpleLayout,
|
|
FullScreenLayout,
|
|
PublicLayout,
|
|
BlankLayout,
|
|
SplitLayout,
|
|
NewContentBlockWizard,
|
|
EditContentBlockWizard,
|
|
EditRoomEntryWizard,
|
|
NewProjectEntryWizard,
|
|
EditProjectEntryWizard,
|
|
NewObjectiveWizard,
|
|
NewNoteWizard,
|
|
EditNoteWizard,
|
|
EditClassNameWizard,
|
|
EditTeamNameWizard,
|
|
EditSnapshotTitleWizard,
|
|
...modals,
|
|
},
|
|
|
|
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/helpers';
|
|
|
|
body {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: 100vh;
|
|
}
|
|
|
|
.app {
|
|
/*overflow-y: auto;*/
|
|
min-height: 100vh;
|
|
/*for IE10+*/
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.no-scroll {
|
|
overflow-y: hidden;
|
|
}
|
|
</style>
|