fix banner widget preview mobile banner position
This commit is contained in:
nflnkr
parent
c76a4f7c5d
commit
28d2331417
Binary file not shown.
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 119 KiB |
107
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx
107
src/pages/InstallQuiz/QuizInstallationCard/WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup.tsx
@ -49,7 +49,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
const [autoShowQuiz, setAutoShowQuiz] = useState<boolean>(false);
|
||||
const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10);
|
||||
const [openOnLeaveAttempt, setOpenOnLeaveAttempt] = useState<boolean>(false);
|
||||
const [position, setPosition] = useState<BannerWidgetParams["position"]>("bottomleft");
|
||||
const [position, setPosition] = useState<BannerWidgetParams["position"]>("topleft");
|
||||
const [bannerFullWidth, setBannerFullWidth] = useState<boolean>(false);
|
||||
const [autoShowWidgetTime, setAutoShowWidgetTime] = useState<number>(10);
|
||||
const [appealText, setAppealText] = useState<string>("");
|
||||
@ -190,7 +190,7 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
backgroundColor: buttonBackgroundColor,
|
||||
containerType: "size",
|
||||
gap: "calc(5 / 196 * 100%)",
|
||||
borderRadius: rounded && !bannerFullWidth ? "30px" : 0,
|
||||
@ -201,17 +201,17 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
>
|
||||
<BannerWidgetPreviewIcon
|
||||
sx={{
|
||||
height: "calc(18.57 / 29.5 * 100%)",
|
||||
width: "auto",
|
||||
aspectRatio: 1,
|
||||
height: "calc(18.57 / 29.5 * 100%)",
|
||||
ml: "calc(7.36 / 196 * 100%)",
|
||||
aspectRatio: 1,
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
color: "white",
|
||||
color: buttonTextColor,
|
||||
}}
|
||||
>
|
||||
<Typography fontSize="calc(6 / 29.5 * 100cqh)" lineHeight="120%">
|
||||
@ -232,11 +232,102 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
height: "calc(10 / 29.5 * 100%)",
|
||||
width: "auto",
|
||||
aspectRatio: 1,
|
||||
backgroundColor: rounded || bannerFullWidth ? "#581CA7" : undefined,
|
||||
backgroundColor: rounded || bannerFullWidth ? "#581ca763" : undefined,
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={[
|
||||
{
|
||||
position: "absolute",
|
||||
width: "calc(94 / 520 * 100%)",
|
||||
height: "calc(21 / 262 * 100%)",
|
||||
},
|
||||
position.startsWith("top") && {
|
||||
top: "calc(66 / 262 * 100%)",
|
||||
left: "calc(422 / 520 * 100%)",
|
||||
},
|
||||
position.startsWith("bottom") && {
|
||||
top: "calc(208 / 262 * 100%)",
|
||||
left: "calc(422 / 520 * 100%)",
|
||||
},
|
||||
pulsation && {
|
||||
":before": {
|
||||
content: "''",
|
||||
position: "absolute",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
pointerEvents: "none",
|
||||
willChange: "box-shadow",
|
||||
borderRadius: "30px",
|
||||
animation: "pena-pulsation linear 5s infinite",
|
||||
"@keyframes pena-pulsation": {
|
||||
"0%": {
|
||||
boxShadow: "0 0 0 0 rgba(126, 42, 234, 0.5)",
|
||||
},
|
||||
"30%": {
|
||||
boxShadow: "0 0 0 15px rgba(0, 0, 0, 0)",
|
||||
},
|
||||
"100%": {
|
||||
boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
backgroundColor: buttonBackgroundColor,
|
||||
containerType: "size",
|
||||
gap: "calc(5 / 196 * 100%)",
|
||||
boxShadow: withShadow
|
||||
? "3px 6px 25px 3px rgba(25, 6, 50, 0.4), 0 3px 13px 0 rgba(35, 17, 58, 0.1)"
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
<BannerWidgetPreviewIcon
|
||||
sx={{
|
||||
width: "auto",
|
||||
height: "calc(18.57 / 29.5 * 100%)",
|
||||
ml: "calc(7.36 / 196 * 100%)",
|
||||
aspectRatio: 1,
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
color: buttonTextColor,
|
||||
}}
|
||||
>
|
||||
<Typography fontSize="calc(6 / 29.5 * 100cqh)" lineHeight="120%">
|
||||
{appealText || "Пройти тест"}
|
||||
</Typography>
|
||||
<Typography fontSize="calc(11 / 29.5 * 100cqh)" lineHeight="120%">
|
||||
{quizHeaderText || "Заголовок теста"}
|
||||
</Typography>
|
||||
</Box>
|
||||
{buttonFlash && <RunningStripe />}
|
||||
</Box>
|
||||
<CloseIcon
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 0,
|
||||
color: "white",
|
||||
height: "calc(8 / 29.5 * 100%)",
|
||||
width: "auto",
|
||||
aspectRatio: 1,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
@ -332,9 +423,9 @@ export default function BannerWidgetSetup({ step, nextButton }: Props) {
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Цвет кнопки</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Цвет баннера</Typography>
|
||||
<CircleColorPicker color={buttonBackgroundColor} onChange={(color) => setButtonBackgroundColor(color)} />
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Цвет текста кнопки</Typography>
|
||||
<Typography sx={{ color: theme.palette.grey2.main }}>Цвет текста баннера</Typography>
|
||||
<CircleColorPicker color={buttonTextColor} onChange={(color) => setButtonTextColor(color)} />
|
||||
</Box>
|
||||
<CustomCheckbox
|
||||
|
||||
@ -5,7 +5,6 @@ import {
|
||||
ContainerWidgetParams,
|
||||
PopupWidgetParams,
|
||||
SideWidgetParams,
|
||||
WidgetType,
|
||||
} from "@frontend/squzanswerer";
|
||||
|
||||
export function createContainerWidgetScriptText(params: ContainerWidgetParams, widgetUrl: string) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user