add side widget fullScreen param

This commit is contained in:
nflnkr 2024-05-04 18:22:47 +03:00
parent 4d1bab00b5
commit 5e965ae65f
2 changed files with 5 additions and 4 deletions

@ -62,7 +62,7 @@ export default function QuizDialog({
top: 0, top: 0,
right: 0, right: 0,
backgroundColor: "rgba(0, 0, 0, 0.5)", backgroundColor: "rgba(0, 0, 0, 0.5)",
borderTopRightRadius: "4px", borderTopRightRadius: 0,
borderTopLeftRadius: 0, borderTopLeftRadius: 0,
borderBottomLeftRadius: "4px", borderBottomLeftRadius: "4px",
borderBottomRightRadius: 0, borderBottomRightRadius: 0,

@ -14,9 +14,10 @@ interface Props {
position: "left" | "right"; position: "left" | "right";
buttonBackgroundColor?: string; buttonBackgroundColor?: string;
dimensions?: { width: string; height: string; }; dimensions?: { width: string; height: string; };
fullScreen?: boolean;
} }
export default function QuizSideButton({ quizId, position, buttonBackgroundColor, dimensions }: Props) { export default function QuizSideButton({ quizId, position, buttonBackgroundColor, dimensions, fullScreen = false }: Props) {
const [isQuizShown, setIsQuizShown] = useState<boolean>(false); const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
const isMobile = useMediaQuery("(max-width: 600px)"); const isMobile = useMediaQuery("(max-width: 600px)");
@ -32,7 +33,7 @@ export default function QuizSideButton({ quizId, position, buttonBackgroundColor
{ {
m: 0, m: 0,
}, },
!isMobile && { (!isMobile && !fullScreen) && {
position: "absolute", position: "absolute",
bottom: PADDING, bottom: PADDING,
right: position === "right" ? PADDING : undefined, right: position === "right" ? PADDING : undefined,
@ -42,7 +43,7 @@ export default function QuizSideButton({ quizId, position, buttonBackgroundColor
height: dimensions?.height ?? WIDGET_DEFAULT_HEIGHT, height: dimensions?.height ?? WIDGET_DEFAULT_HEIGHT,
maxHeight: `calc(100% - ${PADDING * 2}px)`, maxHeight: `calc(100% - ${PADDING * 2}px)`,
}, },
isMobile && { (isMobile || fullScreen) && {
position: "relative", position: "relative",
width: "100%", width: "100%",
height: "100%", height: "100%",