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

fix layout and gradients

Browse Source
This commit is contained in:
nflnkr 2024-04-09 22:52:45 +03:00
parent 2830d93f13
commit 49476e328e
4 changed files with 77 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
lib/components/ViewPublicationPage/ContactForm.tsx
View File

@ -15,17 +15,17 @@ import {
} from "@mui/material"; } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import {FC, useRef, useState} from "react"; import { FC, useRef, useState } from "react";
import {sendFC} from "@api/quizRelase";
import {NameplateLogo} from "@icons/NameplateLogo";
import {QuizQuestionResult} from "@model/questionTypes/result";
import {AnyTypedQuizQuestion} from "@model/questionTypes/shared";
import {quizThemes} from "@utils/themes/Publication/themePublication";
import {enqueueSnackbar} from "notistack";
import {useRootContainerSize} from "../../contexts/RootContainerWidthContext";
import {useQuizData} from "@contexts/QuizDataContext";
import { DESIGN_LIST } from "@/utils/designList"; import { DESIGN_LIST } from "@/utils/designList";
import { sendFC } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext";
import { NameplateLogo } from "@icons/NameplateLogo";
import { QuizQuestionResult } from "@model/questionTypes/result";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { enqueueSnackbar } from "notistack";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590) const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
@ -36,9 +36,9 @@ type Props = {
onShowResult: () => void; onShowResult: () => void;
}; };
export const ContactForm = ({currentQuestion, onShowResult}: Props) => { export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
const theme = useTheme(); const theme = useTheme();
const {settings, questions, quizId, show_badge, preview} = useQuizData(); const { settings, questions, quizId, show_badge, preview } = useQuizData();
const [ready, setReady] = useState(false); const [ready, setReady] = useState(false);
const [name, setName] = useState(""); const [name, setName] = useState("");
@ -68,7 +68,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
}); });
if (!resultQuestion) throw new Error("Result question not found"); if (!resultQuestion) throw new Error("Result question not found");
console.log("yfcnhjqrb", settings.cfg.resultInfo.showResultForm)
const inputHC = async () => { const inputHC = async () => {
const FC = settings.cfg.formContact.fields || settings.cfg.formContact; const FC = settings.cfg.formContact.fields || settings.cfg.formContact;
const body = {} as any; const body = {} as any;
@ -76,7 +76,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
if (email.length > 0) body.email = email; if (email.length > 0) body.email = email;
if (phone.length > 0) body.phone = phone; if (phone.length > 0) body.phone = phone;
if (adress.length > 0) body.address = adress; if (adress.length > 0) body.address = adress;
if (text.length > 0) body.customs = {[FC.text.text || "Фамилия"]: text}; if (text.length > 0) body.customs = { [FC.text.text || "Фамилия"]: text };
if (Object.keys(body).length > 0) { if (Object.keys(body).length > 0) {
try { try {
@ -90,7 +90,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
const sessions = JSON.parse(localStorage.getItem("sessions") || "{}"); const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
localStorage.setItem( localStorage.setItem(
"sessions", "sessions",
JSON.stringify({...sessions, [quizId]: new Date().getTime()}) JSON.stringify({ ...sessions, [quizId]: new Date().getTime() })
); );
} catch (e) { } catch (e) {
enqueueSnackbar("ответ не был засчитан"); enqueueSnackbar("ответ не был засчитан");
@ -110,7 +110,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
const isWide = Object.keys(filteredFC).length > 2; const isWide = Object.keys(filteredFC).length > 2;
async function handleShowResultsClick() { async function handleShowResultsClick() {
const FC: any = settings.cfg.formContact.fields const FC: any = settings.cfg.formContact.fields;
if (FC["email"].used !== EMAIL_REGEXP.test(email)) { if (FC["email"].used !== EMAIL_REGEXP.test(email)) {
return enqueueSnackbar("введена некорректная почта"); return enqueueSnackbar("введена некорректная почта");
} }
@ -142,7 +142,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
} catch (e) { } catch (e) {
enqueueSnackbar("повторите попытку позже"); enqueueSnackbar("повторите попытку позже");
} }
if(settings.cfg.resultInfo.showResultForm === "after"){ if (settings.cfg.resultInfo.showResultForm === "after") {
onShowResult(); onShowResult();
} }
@ -170,7 +170,9 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
backgroundPosition: "center", backgroundPosition: "center",
backgroundSize: "cover", backgroundSize: "cover",
backgroundImage: settings.cfg.design && !isMobile backgroundImage: settings.cfg.design && !isMobile
? `url(${DESIGN_LIST[settings.cfg.theme]})` ? quizThemes[settings.cfg.theme].isLight
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: `linear-gradient(90deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})`
: null, : null,
}} }}
> >
@ -181,11 +183,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
height: "100%", height: "100%",
minHeight: "100%", minHeight: "100%",
display: isWide && !isMobile ? "flex" : undefined, display: isWide && !isMobile ? "flex" : undefined,
background: settings.cfg.design && !isMobile background: settings.cfg.design && !isMobile ? undefined : theme.palette.background.default,
? quizThemes[settings.cfg.theme].isLight
? "transparent"
: "linear-gradient(90deg,#272626, transparent)"
: theme.palette.background.default,
}} }}
> >
<Box <Box
@ -222,7 +220,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
}} }}
> >
{settings.cfg.formContact.title || {settings.cfg.formContact.title ||
"Заполните форму, чтобы получить результаты теста"} "Заполните форму, чтобы получить результаты теста"}
</Typography> </Typography>
{settings.cfg.formContact.desc && ( {settings.cfg.formContact.desc && (
<Typography <Typography
@ -299,13 +297,13 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
> >
<CustomCheckbox <CustomCheckbox
label="" label=""
handleChange={({target}) => { handleChange={({ target }) => {
setReady(target.checked); setReady(target.checked);
}} }}
checked={ready} checked={ready}
colorIcon={theme.palette.primary.main} colorIcon={theme.palette.primary.main}
/> />
<Typography sx={{color: theme.palette.text.primary}}> <Typography sx={{ color: theme.palette.text.primary }}>
С&ensp; С&ensp;
<Link href={"https://shub.pena.digital/ppdd"} target="_blank"> <Link href={"https://shub.pena.digital/ppdd"} target="_blank">
Положением об обработке персональных данных{" "} Положением об обработке персональных данных{" "}
@ -322,37 +320,37 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
</Typography> </Typography>
</Box> </Box>
{show_badge && {show_badge &&
<Box <Box
component={Link} component={Link}
target={"_blank"} target={"_blank"}
href={ href={
`https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}` `https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
} }
sx={{
display: "flex",
alignItems: "center",
mt: "55px",
mb: "50px",
gap: "15px",
textDecoration: "none",
}}
>
<NameplateLogo
style={{
fontSize: "23px",
color: quizThemes[settings.cfg.theme].isLight ? "#151515" : "#FFFFFF",
}}
/>
<Typography
sx={{ sx={{
fontSize: "14px", display: "flex",
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF", alignItems: "center",
whiteSpace: "nowrap", mt: "55px",
mb: "50px",
gap: "15px",
textDecoration: "none",
}} }}
> >
Сделано на PenaQuiz <NameplateLogo
</Typography> style={{
</Box> fontSize: "23px",
color: quizThemes[settings.cfg.theme].isLight ? "#151515" : "#FFFFFF",
}}
/>
<Typography
sx={{
fontSize: "14px",
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
whiteSpace: "nowrap",
}}
>
Сделано на PenaQuiz
</Typography>
</Box>
} }
</Box> </Box>
@ -362,26 +360,26 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
}; };
const Inputs = ({ const Inputs = ({
name, name,
setName, setName,
email, email,
setEmail, setEmail,
phone, phone,
setPhone, setPhone,
text, text,
setText, setText,
adress, adress,
setAdress, setAdress,
}: any) => { }: any) => {
const {settings} = useQuizData(); const { settings } = useQuizData();
const FC = settings.cfg.formContact.fields; const FC = settings.cfg.formContact.fields;
if (!FC) return null; if (!FC) return null;
console.log(email) console.log(email);
const Name = ( const Name = (
<CustomInput <CustomInput
onChange={({target}) => setName(target.value)} onChange={({ target }) => setName(target.value)}
id={name} id={name}
title={FC["name"].innerText || "Введите имя"} title={FC["name"].innerText || "Введите имя"}
desc={FC["name"].text || "Имя"} desc={FC["name"].text || "Имя"}
@ -390,7 +388,7 @@ const Inputs = ({
); );
const Email = ( const Email = (
<CustomInput <CustomInput
onChange={({target}) => setEmail(target.value.replaceAll(/\s/g, ''))} onChange={({ target }) => setEmail(target.value.replaceAll(/\s/g, ''))}
id={email} id={email}
title={FC["email"].innerText || "Введите Email"} title={FC["email"].innerText || "Введите Email"}
desc={FC["email"].text || "Email"} desc={FC["email"].text || "Email"}
@ -399,7 +397,7 @@ const Inputs = ({
); );
const Phone = ( const Phone = (
<CustomInput <CustomInput
onChange={({target}) => setPhone(target.value)} onChange={({ target }) => setPhone(target.value)}
id={phone} id={phone}
title={FC["phone"].innerText || "Введите номер телефона"} title={FC["phone"].innerText || "Введите номер телефона"}
desc={FC["phone"].text || "Номер телефона"} desc={FC["phone"].text || "Номер телефона"}
@ -408,7 +406,7 @@ const Inputs = ({
); );
const Text = ( const Text = (
<CustomInput <CustomInput
onChange={({target}) => setText(target.value)} onChange={({ target }) => setText(target.value)}
id={text} id={text}
title={FC["text"].text || "Введите фамилию"} title={FC["text"].text || "Введите фамилию"}
desc={FC["text"].innerText || "Фамилия"} desc={FC["text"].innerText || "Фамилия"}
@ -417,7 +415,7 @@ const Inputs = ({
); );
const Adress = ( const Adress = (
<CustomInput <CustomInput
onChange={({target}) => setAdress(target.value)} onChange={({ target }) => setAdress(target.value)}
id={adress} id={adress}
title={FC["address"].innerText || "Введите адрес"} title={FC["address"].innerText || "Введите адрес"}
desc={FC["address"].text || "Адрес"} desc={FC["address"].text || "Адрес"}
@ -446,16 +444,16 @@ const Inputs = ({
} }
}; };
const CustomInput = ({title, desc, Icon, onChange, id}: { const CustomInput = ({ title, desc, Icon, onChange, id }: {
id: string; id: string;
title: string; title: string;
desc: string; desc: string;
Icon: FC<{ color: string; backgroundColor: string }>; Icon: FC<{ color: string; backgroundColor: string; }>;
onChange: TextFieldProps["onChange"]; onChange: TextFieldProps["onChange"];
}) => { }) => {
const theme = useTheme(); const theme = useTheme();
const isMobile = useRootContainerSize() < 600; const isMobile = useRootContainerSize() < 600;
const {settings} = useQuizData(); const { settings } = useQuizData();
return ( return (
<Box m="10px 0"> <Box m="10px 0">
<Typography mb="7px" color={theme.palette.text.primary}> <Typography mb="7px" color={theme.palette.text.primary}>
@ -486,7 +484,7 @@ const CustomInput = ({title, desc, Icon, onChange, id}: {
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<Icon color="gray" <Icon color="gray"
backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"}/> backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"} />
</InputAdornment> </InputAdornment>
), ),
}} }}

6
lib/components/ViewPublicationPage/ResultForm.tsx
View File

@ -38,7 +38,6 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
height: "100%", height: "100%",
minHeight: "100%", minHeight: "100%",
width: "100%", width: "100%",
overflow: "auto",
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
backgroundPosition: "center", backgroundPosition: "center",
backgroundSize: "cover", backgroundSize: "cover",
@ -55,8 +54,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
pt: "30px", pt: "30px",
width: "inherit", width: "100%",
height: "inherit", height: "100%",
overflow: "auto",
background: settings.cfg.design && !isMobile background: settings.cfg.design && !isMobile
? quizThemes[settings.cfg.theme].isLight ? quizThemes[settings.cfg.theme].isLight
? "transparent" ? "transparent"

1
lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx
View File

@ -55,6 +55,7 @@ const StandartLayout = ({
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "flex-start", alignItems: "flex-start",
p: "25px", p: "25px",
overflowY: "auto",
background: background:
settings.cfg.design && !quizThemes[settings.cfg.theme].isLight settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? "linear-gradient(90deg,#272626,transparent)" ? "linear-gradient(90deg,#272626,transparent)"

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@frontend/squzanswerer", "name": "@frontend/squzanswerer",
"version": "1.0.22", "version": "1.0.23",
"type": "module", "type": "module",
"main": "./dist-package/index.js", "main": "./dist-package/index.js",
"module": "./dist-package/index.js", "module": "./dist-package/index.js",