Fix Toaster parent element DOM position #78 (#82)

reorganized how the footer is displayed

components/app-footer.vue

@@ -1,10 +1,24 @@
 <script setup lang="ts"></script>
 
 <template>
-	<footer class="absolute inset-x-0 bottom-0 bg-surface text-on-surface">
-		<div class="mb-0 w-full bg-neutral-50 px-0 py-8 text-gray-900">
+	<footer
+		class="inset-x-0 bottom-0 h-7 bg-surface text-on-surface transition duration-500 hover:-translate-y-80"
+	>
+		<div class="flex items-center justify-center gap-2 border px-8 py-1.5 text-xs">
+			<span class="flex gap-1">
+				<span>&copy; {{ new Date().getUTCFullYear() }}</span>
+				<a class="hover:underline hover:underline-offset-2" href="https://www.oeaw.ac.at/acdh">
+					ACDH-CH
+				</a>
+			</span>
+			<span>|</span>
+			<NuxtLink class="hover:underline hover:underline-offset-2" href="/imprint">Imprint</NuxtLink>
+		</div>
+		<div class="mb-0 w-full bg-neutral-50 px-0 text-gray-900">
 			<div id="footer-full-content" class="mx-auto w-full px-4" tabindex="-1">
-				<div class="footer-logo-widget mb-4 flex items-center border-b pb-4 pt-2 text-sm font-semibold">
+				<div
+					class="footer-logo-widget mb-4 flex items-center border-b pb-4 pt-2 text-sm font-semibold"
+				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						width="24"
@@ -81,16 +95,6 @@
 				</div>
 			</div>
 		</div>
-		<div class="flex items-center justify-center gap-2 px-8 py-1.5 text-xs">
-			<span class="flex gap-1">
-				<span>&copy; {{ new Date().getUTCFullYear() }}</span>
-				<a class="hover:underline hover:underline-offset-2" href="https://www.oeaw.ac.at/acdh">
-					ACDH-CH
-				</a>
-			</span>
-			<span>|</span>
-			<NuxtLink class="hover:underline hover:underline-offset-2" href="/imprint">Imprint</NuxtLink>
-		</div>
 	</footer>
 </template>
 
@@ -132,4 +136,25 @@
 	flex: 0 0 33.333%;
 	max-width: 33.333%;
 }
+
+@keyframes slide-in-out {
+	0% {
+		transform: translateY(0);
+	}
+
+	50% {
+		transform: translateY(-20rem);
+	}
+
+	100% {
+		transform: translateY(0);
+	}
+}
+
+footer {
+	animation-name: slide-in-out;
+	animation-duration: 2s !important;
+	animation-timing-function: ease-in-out;
+	animation-delay: 500ms;
+}
 </style>

components/app-header.vue

@@ -21,8 +21,6 @@ const titlestring = computed(() => {
 	return data.value?.projectConfig?.logo?.string;
 });
 
-
-
 function createWindowId(_item: ItemType) {
 	/**
 	 * We intentionally do *not* use `item.target` for window id, because we don't want to

components/app-navigation-menu.vue

@@ -49,6 +49,6 @@ onScopeDispose(() => {
 				</template>
 			</MenubarContent>
 		</MenubarMenu>
-		<WindowListDropdown :isMobile="false" />
+		<WindowListDropdown :is-mobile="false" />
 	</Menubar>
 </template>

components/app-navigation-mobile-menu.vue

@@ -31,7 +31,7 @@ onScopeDispose(() => {
 <template>
 	<Sheet v-model:open="isSidepanelOpen">
 		<Menubar class="w-full border-none">
-			<WindowListDropdown :isMobile="true" />
+			<WindowListDropdown :is-mobile="true" />
 		</Menubar>
 		<SheetTrigger aria-label="Toggle menu" class="cursor-default">
 			<MenuIcon class="mx-3 my-1.5 h-5 w-5" />

components/window-list-dropdown.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { AppWindowIcon, CheckIcon } from "lucide-vue-next";
 
-const props = defineProps(["isMobile"]);
+const props = defineProps<{
+	isMobile: boolean;
+}>();
 
 const router = useRouter();
 const route = useRoute();
@@ -45,7 +47,7 @@ const { arrangement: currentArrangement, registry } = storeToRefs(windowsStore);
 				>
 					{{ item.winbox.title }}
 				</MenubarItem>
-				<template v-if="$props.isMobile === false">
+				<template v-if="!props.isMobile">
 					<MenubarSeparator />
 					<MenubarLabel>Arrangement</MenubarLabel>
 					<MenubarSeparator />

layouts/default.vue

@@ -114,7 +114,7 @@ const isWindowManagerVisible = computed(() => {
 </script>
 
 <template>
-	<div class="grid min-h-full grid-rows-[auto_1fr_auto] bg-neutral-50">
+	<div class="grid max-h-screen min-h-full grid-rows-[auto_1fr_auto] overflow-hidden bg-neutral-50">
 		<SkipLink :target-id="mainContentId">Skip to main content</SkipLink>
 
 		<AppHeader />
@@ -123,12 +123,10 @@ const isWindowManagerVisible = computed(() => {
 
 			<div :class="{ hidden: !isWindowManagerVisible }" class="relative isolate grid h-full w-full">
 				<WindowManager />
-				<AppFooter />
 			</div>
 		</MainContent>
-
+		<AppFooter />
 		<Toaster />
-
 		<RouteAnnouncer />
 	</div>
 </template>

stores/use-windows-store.ts

@@ -126,10 +126,10 @@ export const useWindowsStore = defineStore("windows", () => {
 			await initializeScreen();
 			return;
 		}
-		const w = atob(route.query.w);
 
 		let windowStates: Array<WindowStateInferred>;
 		try {
+			const w = atob(route.query.w as string);
 			windowStates = JSON.parse(w) as Array<WindowStateInferred>;
 		} catch (e) {
 			toasts.addToast({
@@ -292,17 +292,20 @@ export const useWindowsStore = defineStore("windows", () => {
 
 		registry.value.forEach((w) => {
 			windowStates.push({
+				// @ts-expect-error Property missing in upstream types.
 				x: viewportPercentageWith2DigitPrecision(w.winbox.x as number, "width"),
+				// @ts-expect-error Property missing in upstream types.
 				y: viewportPercentageWith2DigitPrecision(w.winbox.y as number, "height"),
 				z: w.winbox.index,
+				// @ts-expect-error Property missing in upstream types.
 				width: viewportPercentageWith2DigitPrecision(w.winbox.width as number, "width"),
+				// @ts-expect-error Property missing in upstream types.
 				height: viewportPercentageWith2DigitPrecision(w.winbox.height as number, "height"),
 				kind: w.kind,
 				title: w.winbox.title,
 				params: w.params,
 			} as WindowStateInferred);
 		});
-		console.log(JSON.stringify(windowStates));
 		return windowStates;
 	}
 

styles/index.css

@@ -35,6 +35,7 @@
 :root,
 body,
 #__nuxt {
+	overflow: hidden;
 	block-size: 100%;
 }