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