SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

quiz is fullscreen when viewport width is small

Browse Source
This commit is contained in:
nflnkr 2024-05-04 15:53:56 +03:00
parent ffc8b5e9cb
commit b421e6eed3
1 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/widgets/side/QuizSideButton.tsx
View File

@ -1,5 +1,5 @@
import lightTheme from "@/utils/themes/light";
import { Button, ThemeProvider } from "@mui/material";
import { Button, ThemeProvider, useMediaQuery } from "@mui/material";
import { useState } from "react";
import { createPortal } from "react-dom";
import QuizDialog from "../QuizDialog";
@ -15,6 +15,7 @@ interface Props {
export default function QuizSideButton({ quizId, position, buttonBackgroundColor }: Props) {
const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
const isMobile = useMediaQuery("(max-width: 600px)");
return createPortal(
<ThemeProvider theme={lightTheme}>
@ -24,15 +25,26 @@ export default function QuizSideButton({ quizId, position, buttonBackgroundColor
onClose={() => setIsQuizShown(false)}
hideBackdrop
disableScrollLock
paperSx={{
position: "absolute",
bottom: PADDING,
right: position === "right" ? PADDING : undefined,
left: position === "left" ? PADDING : undefined,
height: `calc(min(calc(100% - ${PADDING * 2}px), 800px))`,
width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
m: 0,
}}
paperSx={[
{
m: 0,
},
!isMobile && {
position: "absolute",
bottom: PADDING,
right: position === "right" ? PADDING : undefined,
left: position === "left" ? PADDING : undefined,
height: `calc(min(calc(100% - ${PADDING * 2}px), 800px))`,
width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
},
isMobile && {
position: "relative",
height: "100%",
maxHeight: "100%",
width: "100%",
borderRadius: 0,
},
]}
/>
<Button
className="pena-quiz-widget-button"