diff --git a/lib/model/widget/banner.ts b/lib/model/widget/banner.ts index 1deda81..4929416 100644 --- a/lib/model/widget/banner.ts +++ b/lib/model/widget/banner.ts @@ -22,6 +22,7 @@ export interface BannerWidgetComponentProps { rounded?: boolean; bannerFullWidth?: boolean; pulsation?: boolean; + fullScreen?: boolean; } export type BannerWidgetParams = Omit; diff --git a/lib/model/widget/button.ts b/lib/model/widget/button.ts index 5b03ae1..5e72ec6 100644 --- a/lib/model/widget/button.ts +++ b/lib/model/widget/button.ts @@ -14,6 +14,7 @@ export interface ButtonWidgetComponentProps { buttonText?: string; buttonTextColor?: string; buttonBackgroundColor?: string; + fullScreen?: boolean; } export type ButtonWidgetParams = Omit & { diff --git a/lib/model/widget/popup.ts b/lib/model/widget/popup.ts index df3c432..27cf9eb 100644 --- a/lib/model/widget/popup.ts +++ b/lib/model/widget/popup.ts @@ -7,6 +7,7 @@ export interface PopupWidgetComponentProps { autoShowQuizTime?: number | null; hideOnMobile?: boolean; openOnLeaveAttempt?: boolean; + fullScreen?: boolean; } export type PopupWidgetParams = PopupWidgetComponentProps; diff --git a/package.json b/package.json index 760cdc0..0c712c2 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@frontend/squzanswerer", - "version": "1.0.43", + "version": "1.0.44", "type": "module", "main": "./dist-package/index.js", "module": "./dist-package/index.js", diff --git a/src/widgets/banner/QuizBanner.tsx b/src/widgets/banner/QuizBanner.tsx index e31325b..cdda540 100644 --- a/src/widgets/banner/QuizBanner.tsx +++ b/src/widgets/banner/QuizBanner.tsx @@ -30,6 +30,7 @@ export default function QuizBanner({ pulsation = false, autoShowWidgetTime = 0, dialogDimensions, + fullScreen = false, }: BannerWidgetComponentProps) { const isMobile = useMediaQuery("(max-width: 600px)"); const [isQuizShown, setIsQuizShown] = useState(false); @@ -189,10 +190,18 @@ export default function QuizBanner({ quizId={quizId} onClose={() => setIsQuizShown(false)} disableScrollLock - paperSx={{ - width: dialogDimensions?.width, - height: dialogDimensions?.height, - }} + paperSx={[ + (isMobile || fullScreen) ? { + width: "100%", + height: "100%", + maxHeight: "100%", + borderRadius: 0, + m: 0, + } : { + width: dialogDimensions?.width, + height: dialogDimensions?.height, + }, + ]} /> , document.body diff --git a/src/widgets/button/OpenQuizButton.tsx b/src/widgets/button/OpenQuizButton.tsx index 1710381..5a0ba39 100644 --- a/src/widgets/button/OpenQuizButton.tsx +++ b/src/widgets/button/OpenQuizButton.tsx @@ -20,6 +20,7 @@ export default function OpenQuizButton({ buttonText = "Пройти квиз", buttonTextColor, buttonBackgroundColor, + fullScreen = false, }: ButtonWidgetComponentProps) { const isMobile = useMediaQuery("(max-width: 600px)"); const [isQuizShown, setIsQuizShown] = useState(false); @@ -106,10 +107,18 @@ export default function OpenQuizButton({ open={isQuizShown} quizId={quizId} onClose={() => setIsQuizShown(false)} - paperSx={{ - width: dialogDimensions?.width, - height: dialogDimensions?.height, - }} + paperSx={[ + (isMobile || fullScreen) ? { + width: "100%", + height: "100%", + maxHeight: "100%", + borderRadius: 0, + m: 0, + } : { + width: dialogDimensions?.width, + height: dialogDimensions?.height, + }, + ]} /> ); diff --git a/src/widgets/popup/QuizPopup.tsx b/src/widgets/popup/QuizPopup.tsx index 808b84a..bbcea4f 100644 --- a/src/widgets/popup/QuizPopup.tsx +++ b/src/widgets/popup/QuizPopup.tsx @@ -5,15 +5,13 @@ import { useMediaQuery } from "@mui/material"; import { PopupWidgetComponentProps } from "@/model/widget/popup"; -const WIDGET_DEFAULT_WIDTH = "600px"; -const WIDGET_DEFAULT_HEIGHT = "80%"; - export default function QuizPopup({ quizId, dialogDimensions, autoShowQuizTime = null, hideOnMobile = false, openOnLeaveAttempt = false, + fullScreen = false, }: PopupWidgetComponentProps) { const initialIsQuizShown = (autoShowQuizTime !== null || openOnLeaveAttempt) ? false : true; @@ -59,10 +57,18 @@ export default function QuizPopup({ open={isQuizShown} quizId={quizId} onClose={() => setIsQuizShown(false)} - paperSx={{ - width: dialogDimensions?.width ?? WIDGET_DEFAULT_WIDTH, - height: dialogDimensions?.height ?? WIDGET_DEFAULT_HEIGHT, - }} + paperSx={[ + (isMobile || fullScreen) ? { + width: "100%", + height: "100%", + maxHeight: "100%", + borderRadius: 0, + m: 0, + } : { + width: dialogDimensions?.width, + height: dialogDimensions?.height, + }, + ]} /> ); } diff --git a/src/widgets/side/QuizSideButton.tsx b/src/widgets/side/QuizSideButton.tsx index d1880ec..5af8d9a 100644 --- a/src/widgets/side/QuizSideButton.tsx +++ b/src/widgets/side/QuizSideButton.tsx @@ -64,7 +64,12 @@ export default function QuizSideButton({ { m: 0, }, - !(isMobile || fullScreen) && { + (isMobile || fullScreen) ? { + width: "100%", + height: "100%", + maxHeight: "100%", + borderRadius: 0, + } : { position: "absolute", bottom: PADDING, right: position === "right" ? PADDING : undefined, @@ -74,13 +79,6 @@ export default function QuizSideButton({ height: dialogDimensions?.height ?? WIDGET_DEFAULT_HEIGHT, maxHeight: `calc(100% - ${PADDING * 2}px)`, }, - (isMobile || fullScreen) && { - position: "relative", - width: "100%", - height: "100%", - maxHeight: "100%", - borderRadius: 0, - }, ]} />