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

add side widget dimensions param

Browse Source
This commit is contained in:
nflnkr 2024-05-04 18:12:22 +03:00
parent b421e6eed3
commit 4d1bab00b5
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,14 +6,17 @@ import QuizDialog from "../QuizDialog";
const PADDING = 10; const PADDING = 10;
const WIDGET_DEFAULT_WIDTH = "600px";
const WIDGET_DEFAULT_HEIGHT = "800px";
interface Props { interface Props {
quizId: string; quizId: string;
position: "left" | "right"; position: "left" | "right";
buttonBackgroundColor?: string; buttonBackgroundColor?: string;
dimensions?: { width: string; height: string; };
} }
export default function QuizSideButton({ quizId, position, buttonBackgroundColor }: Props) { export default function QuizSideButton({ quizId, position, buttonBackgroundColor, dimensions }: 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)");
@ -34,14 +37,16 @@ export default function QuizSideButton({ quizId, position, buttonBackgroundColor
bottom: PADDING, bottom: PADDING,
right: position === "right" ? PADDING : undefined, right: position === "right" ? PADDING : undefined,
left: position === "left" ? PADDING : undefined, left: position === "left" ? PADDING : undefined,
height: `calc(min(calc(100% - ${PADDING * 2}px), 800px))`, width: dimensions?.width ?? WIDGET_DEFAULT_WIDTH,
width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`, maxWidth: `calc(100% - ${PADDING * 2}px)`,
height: dimensions?.height ?? WIDGET_DEFAULT_HEIGHT,
maxHeight: `calc(100% - ${PADDING * 2}px)`,
}, },
isMobile && { isMobile && {
position: "relative", position: "relative",
width: "100%",
height: "100%", height: "100%",
maxHeight: "100%", maxHeight: "100%",
width: "100%",
borderRadius: 0, borderRadius: 0,
}, },
]} ]}
@ -55,7 +60,8 @@ export default function QuizSideButton({ quizId, position, buttonBackgroundColor
display: isQuizShown ? "none" : "block", display: isQuizShown ? "none" : "block",
position: "fixed", position: "fixed",
height: "70px", height: "70px",
width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`, width: "600px",
maxWidth: `calc(100% - ${PADDING * 2}px)`,
backgroundColor: buttonBackgroundColor, backgroundColor: buttonBackgroundColor,
}, },
position === "left" && { position === "left" && {