HTWK/htwkalender
1
1
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git synced 2025-07-23 04:58:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat:#24 add transition to routerview

Browse Source
This commit is contained in:
masterelmar
2024-01-17 15:44:13 +01:00
parent 4f50313c03
commit 43670e5791
1 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/App.vue
View File

@ -1,18 +1,25 @@
<script lang="ts" setup>
import MenuBar from "./components/MenuBar.vue";
import {RouteRecordName, RouterView} from "vue-router";
import { RouteRecordName, RouterView } from "vue-router";
import CalendarPreview from "./components/CalendarPreview.vue";
import moduleStore from "./store/moduleStore.ts";
import { provide, ref } from "vue";
const disabledPages = ["room-finder", "faq", "imprint", "privacy-policy", "edit", "edit-calendar"];
const disabledPages = [
"room-finder",
"faq",
"imprint",
"privacy-policy",
"edit",
"edit-calendar",
];
const store = moduleStore();
const mobilePage = ref(true);
provide("mobilePage", mobilePage);
const isDisabled = (routeName: RouteRecordName | null | undefined) => {
return !disabledPages.includes(routeName as string) && store.modules.size > 0
return !disabledPages.includes(routeName as string) && store.modules.size > 0;
};
const updateMobile = () => {
@ -26,10 +33,25 @@ window.addEventListener("resize", updateMobile);
<template>
<MenuBar />
<RouterView />
<RouterView v-slot="{ Component }">
<transition name="scale" mode="out-in">
<component :is="Component" />
</transition>
</RouterView>
<!-- show CalendarPreview but only on specific router views -->
<CalendarPreview v-if="isDisabled($route.name)"/>
<CalendarPreview v-if="isDisabled($route.name)" />
<Toast />
</template>
<style scoped></style>
<style scoped>
.scale-enter-active,
.scale-leave-active {
transition: all 0.2s ease;
}
.scale-enter-from,
.scale-leave-to {
opacity: 0;
transform: scale(0.9);
}
</style>