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