Merge branch 'update-result-and-contact-form' into dev
# Conflicts: # lib/components/ViewPublicationPage/ContactForm/ContactForm.tsx # lib/components/ViewPublicationPage/ResultForm.tsx
This commit is contained in:
Tamara
commit
745ecaf4c2
@ -211,7 +211,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
settings.cfg.design && !isMobile
|
||||
? quizThemes[settings.cfg.theme].isLight
|
||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||
: `linear-gradient(90deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]
|
||||
: `linear-gradient(90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%), url(${DESIGN_LIST[settings.cfg.theme]
|
||||
})`
|
||||
: null,
|
||||
}}
|
||||
@ -222,7 +222,8 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
borderRadius: "4px",
|
||||
height: isMobile ? "100%" : "auto",
|
||||
minHeight: "100%",
|
||||
display: isMobile ? undefined : "flex",
|
||||
display: "flex",
|
||||
flexDirection: isMobile ? "column" : "row",
|
||||
background:
|
||||
settings.cfg.design && !isMobile
|
||||
? undefined
|
||||
@ -230,28 +231,23 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
}}
|
||||
>
|
||||
<ContactTextBlock settings={settings}/>
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 0,
|
||||
<Box sx={{
|
||||
flexGrow: isMobile ? 1 : 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
flexDirection: "column",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
height: "auto",
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: isMobile ? undefined : "center",
|
||||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
p: isMobile
|
||||
? "0 20px"
|
||||
: isTablet
|
||||
? "0px 40px 30px 60px"
|
||||
: "125px 60px 30px 60px",
|
||||
p: isMobile ? "0 20px" : isTablet ? "105px 40px 0 60px" : "105px 60px 0 60px",
|
||||
margin: isMobile ? "0" : "auto 0",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -259,7 +255,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
mt: isMobile ? "10px" : "20px",
|
||||
mb: "20px",
|
||||
mb: "20px"
|
||||
}}
|
||||
>
|
||||
<Inputs
|
||||
@ -290,16 +286,15 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
colorIcon={theme.palette.primary.main}
|
||||
sx={{marginRight: "0"}}
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
<Typography sx={{
|
||||
color: theme.palette.text.primary,
|
||||
lineHeight: "18.96px",
|
||||
}}
|
||||
fontSize={"16px"}
|
||||
>
|
||||
lineHeight: "18.96px"
|
||||
}} fontSize={"16px"}>
|
||||
С 
|
||||
<Link href={"https://shub.pena.digital/ppdd"} target="_blank">
|
||||
Положением об обработке персональных данных{" "}
|
||||
<Link href={"https://shub.pena.digital/ppdd"}
|
||||
target="_blank">
|
||||
Положением об обработке персональных
|
||||
данных{" "}
|
||||
</Link>
|
||||
 и 
|
||||
<Link
|
||||
@ -326,6 +321,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
border: "1px solid #9A9AAF",
|
||||
color: "#9A9AAF",
|
||||
},
|
||||
|
||||
}}
|
||||
>
|
||||
{settings.cfg.formContact?.button || "Получить результаты"}
|
||||
@ -344,6 +340,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
|
||||
mb: isMobile ? "30px" : isTablet ? "40px" : "50px",
|
||||
gap: "10px",
|
||||
textDecoration: "none",
|
||||
margitTop: "auto",
|
||||
}}
|
||||
>
|
||||
<NameplateLogo
|
||||
|
||||
@ -14,7 +14,7 @@ export const ContactTextBlock: FC<ContactTextBlockProps> = ({settings}) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
flexGrow: isMobile ? 0 : 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
|
||||
@ -25,6 +25,8 @@ export const CountrySelector:FC<CountrySelectorProps> = ({setMask}) => {
|
||||
PaperProps: {
|
||||
style: {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
borderRadius: '12px',
|
||||
scrollbarWidth: "none",
|
||||
},
|
||||
},
|
||||
}}
|
||||
@ -56,7 +58,8 @@ export const CountrySelector:FC<CountrySelectorProps> = ({setMask}) => {
|
||||
}}
|
||||
>
|
||||
{Object.keys(phoneMasksByCountry).map((countryCode) => {
|
||||
return <MenuItem value={countryCode}>{phoneMasksByCountry[countryCode][0]}</MenuItem>
|
||||
return <MenuItem
|
||||
value={countryCode}>{phoneMasksByCountry[countryCode][0]}</MenuItem>
|
||||
})}
|
||||
</Select>
|
||||
);
|
||||
|
||||
@ -55,6 +55,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
settings.cfg.design && !isMobile
|
||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||
: null,
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -63,16 +64,25 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
pt: "30px",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
overflow: "auto",
|
||||
background:
|
||||
settings.cfg.design && !isMobile
|
||||
? quizThemes[settings.cfg.theme].isLight
|
||||
? "transparent"
|
||||
: "linear-gradient(90deg,#272626, transparent)"
|
||||
: "linear-gradient(90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)"
|
||||
: theme.palette.background.default,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
overflow: "auto",
|
||||
padding: "0 20px 20px",
|
||||
scrollbarWidth: "none",
|
||||
"&::-webkit-scrollbar": {
|
||||
width: 0,
|
||||
@ -84,14 +94,18 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexWrap: "wrap",
|
||||
gap: "30px",
|
||||
mb: "7px",
|
||||
mb: "10px",
|
||||
width: "100%",
|
||||
maxWidth: "700px",
|
||||
backgroundColor: "#9A9AAF1A",
|
||||
borderRadius: "0 0 12px 12px",
|
||||
padding: "20px 20px 15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
color: theme.palette.text.primary,
|
||||
fontSize: "17px",
|
||||
color: "#9A9AAF",
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
>
|
||||
@ -104,8 +118,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
width: "100%",
|
||||
maxWidth: "844px",
|
||||
padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
|
||||
maxWidth: "700px",
|
||||
}}
|
||||
>
|
||||
{!resultQuestion?.content.useImage &&
|
||||
@ -114,24 +127,29 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
videoUrl={resultQuestion.content.video}
|
||||
containerSX={{
|
||||
width: "100%",
|
||||
maxWidth: "844px",
|
||||
maxWidth: "700px",
|
||||
height: isMobile ? "100%" : "306px",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{resultQuestion?.content.useImage && resultQuestion.content.back && (
|
||||
{resultQuestion?.content.useImage &&
|
||||
resultQuestion.content.back && (
|
||||
<Box
|
||||
sx={{ width: "100%", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<Box
|
||||
component="img"
|
||||
src={resultQuestion.content.back}
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: "306px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
alt="resultImage"
|
||||
src={resultQuestion.content.back}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: spec ? "auto" : isMobile ? "236px" : "306px",
|
||||
borderRadius: "8px",
|
||||
objectFit: "contain",
|
||||
borderRadius: "12px",
|
||||
objectFit: "cover",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
@ -140,9 +158,10 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
resultQuestion.description !== " " && (
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "24px",
|
||||
fontSize: "27px",
|
||||
lineHeight: "32px",
|
||||
fontWeight: 700,
|
||||
mt: "25px",
|
||||
mt: "30px",
|
||||
color: theme.palette.text.primary,
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
@ -153,7 +172,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
mt: "20px",
|
||||
mt: "12px",
|
||||
fontSize: "17px",
|
||||
lineHeight: "20px",
|
||||
color: theme.palette.text.primary,
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
@ -165,8 +186,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
resultQuestion.content.text !== " " && (
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "18px",
|
||||
mt: "30px ",
|
||||
fontSize: "17px",
|
||||
lineHeight: "20px",
|
||||
mt: "25px ",
|
||||
wordBreak: "break-word",
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
@ -175,29 +197,24 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box width="100%">
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
justifyContent: "end",
|
||||
px: "20px",
|
||||
}}
|
||||
>
|
||||
</Box>
|
||||
{show_badge && (
|
||||
<Box
|
||||
component={Link}
|
||||
target={"_blank"}
|
||||
href={`https://${window.location.hostname.includes("s") ? "s" : ""
|
||||
href={`https://${
|
||||
window.location.hostname.includes("s") ? "s" : ""
|
||||
}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
mt: "15px",
|
||||
alignSelf: isMobile ? "center" : "end",
|
||||
margin: isMobile ? "15px 0 0" : "15px 25px 0 0",
|
||||
gap: "10px",
|
||||
textDecoration: "none",
|
||||
mb: "15px",
|
||||
position: isTablet || isMobile ? "sticky" : "absolute",
|
||||
bottom: "90px",
|
||||
}}
|
||||
>
|
||||
<NameplateLogo
|
||||
@ -210,24 +227,17 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
// boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
|
||||
width: "100%",
|
||||
flexDirection: "column",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderTop: "1px solid #9A9AAF80",
|
||||
p:
|
||||
(settings.cfg.resultInfo.showResultForm === "before" &&
|
||||
!settings.cfg.score) ||
|
||||
(settings.cfg.resultInfo.showResultForm === "after" &&
|
||||
resultQuestion.content.redirect)
|
||||
? "20px"
|
||||
: "0",
|
||||
p: "20px",
|
||||
position: "sticky",
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
{settings.cfg.resultInfo.showResultForm === "before" &&
|
||||
@ -258,7 +268,10 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
}, 1000)
|
||||
}}
|
||||
variant="contained"
|
||||
sx={{ p: "10px 20px", width: "auto", height: "50px" }}
|
||||
sx={{
|
||||
p: "10px 20px",
|
||||
width: "auto",
|
||||
}}
|
||||
>
|
||||
{resultQuestion.content.hint.text || "Перейти на сайт"}
|
||||
</Button>
|
||||
@ -266,6 +279,5 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box >
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user