Merge pull request #236 from openscript-ch/203-full-screen-mode-for-questionnaire

203 full screen mode for questionnaire

Author: openscript

.changeset/wicked-mangos-joke.md

@@ -0,0 +1,5 @@
+---
+"@quassel/frontend": patch
+---
+
+Introduce fullscreen mode in questionnaire

apps/frontend/src/routes/__root.tsx

@@ -54,8 +54,8 @@ function Root() {
   return (
     <>
       <AppShell
-        header={{ height: 104 }}
-        footer={{ height: 84 }}
+        header={{ height: 104, collapsed: layoutStore.fullscreen }}
+        footer={{ height: 84, collapsed: layoutStore.fullscreen }}
         navbar={{ width: 300, breakpoint: "sm", collapsed: { desktop: !layoutStore.admin } }}
         padding="xl"
         mod={{ admin: layoutStore.admin }}
@@ -100,6 +100,7 @@ function Root() {
         <AppShell.Main>
           <Outlet />
         </AppShell.Main>
+
         <AppShell.Footer>
           <Group justify="space-between">
             <FooterLogos />

apps/frontend/src/routes/_auth/questionnaire.tsx

@@ -1,14 +1,27 @@
-import { Container } from "@quassel/ui";
+import { ActionIcon, Affix, Container, IconMaximize, IconMaximizeOff, useFullscreen } from "@quassel/ui";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { $layout } from "../../stores/layout";
+import { useEffect } from "react";
 
 export const Route = createFileRoute("/_auth/questionnaire")({
   component: QuestionnaireLayout,
 });
 
 function QuestionnaireLayout() {
+  const { fullscreen, toggle } = useFullscreen();
+
+  useEffect(() => {
+    $layout.set({ fullscreen });
+  }, [fullscreen]);
+
   return (
-    <Container size="md" mt="xl">
+    <Container size={fullscreen ? "100%" : "md"} p={0} mt={fullscreen ? 0 : "xl"}>
       <Outlet />
+      <Affix position={{ bottom: 110, right: 40 }}>
+        <ActionIcon variant="outline" radius="xl" size="xl" onClick={toggle}>
+          {fullscreen ? <IconMaximizeOff /> : <IconMaximize />}
+        </ActionIcon>
+      </Affix>
     </Container>
   );
 }

apps/frontend/src/stores/layout.ts

@@ -2,6 +2,7 @@ import { map } from "nanostores";
 
 type Layout = {
   admin?: boolean;
+  fullscreen?: boolean;
 };
 
 export const $layout = map<Layout>({});

libs/ui/src/index.ts

@@ -62,6 +62,7 @@ export {
   ColorSwatch,
   Divider,
   Flex,
+  Affix,
   Group,
   InputError,
   InputLabel,
@@ -88,7 +89,7 @@ export {
 
 export { TimeInput, DateInput } from "@mantine/dates";
 
-export { useDisclosure } from "@mantine/hooks";
+export { useDisclosure, useFullscreen } from "@mantine/hooks";
 
 export { notifications } from "@mantine/notifications";
 
@@ -106,6 +107,8 @@ export {
   IconMapSearch,
   IconMinus,
   IconRepeat,
+  IconMaximize,
+  IconMaximizeOff,
 } from "@tabler/icons-react";
 
 export { uzhColors } from "./theme/uzh";