fix layout and gradients

2024-04-09 22:52:45 +03:00 · 2024-04-09 22:52:45 +03:00 · 49476e328e
commit 49476e328e
parent 2830d93f13
4 changed files with 77 additions and 78 deletions
--- a/lib/components/ViewPublicationPage/ContactForm.tsx
+++ b/lib/components/ViewPublicationPage/ContactForm.tsx
@ -15,17 +15,17 @@ import {
 } from "@mui/material";

 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 { 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)
@ -36,9 +36,9 @@ type Props = {
    onShowResult: () => void;
 };

-export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
+export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
    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 [name, setName] = useState("");
@ -68,7 +68,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
        });

    if (!resultQuestion) throw new Error("Result question not found");
-    console.log("yfcnhjqrb", settings.cfg.resultInfo.showResultForm)
+
    const inputHC = async () => {
        const FC = settings.cfg.formContact.fields || settings.cfg.formContact;
        const body = {} as any;
@ -76,7 +76,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
        if (email.length > 0) body.email = email;
        if (phone.length > 0) body.phone = phone;
        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) {
            try {
@ -90,7 +90,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
                localStorage.setItem(
                    "sessions",
-                    JSON.stringify({...sessions, [quizId]: new Date().getTime()})
+                    JSON.stringify({ ...sessions, [quizId]: new Date().getTime() })
                );
            } catch (e) {
                enqueueSnackbar("ответ не был засчитан");
@ -110,7 +110,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
    const isWide = Object.keys(filteredFC).length > 2;

    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)) {
            return enqueueSnackbar("введена некорректная почта");
        }
@ -142,7 +142,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
            } catch (e) {
                enqueueSnackbar("повторите попытку позже");
            }
-            if(settings.cfg.resultInfo.showResultForm === "after"){
+            if (settings.cfg.resultInfo.showResultForm === "after") {
                onShowResult();
            }

@ -170,7 +170,9 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                backgroundPosition: "center",
                backgroundSize: "cover",
                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,
            }}
        >
@ -181,11 +183,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                    height: "100%",
                    minHeight: "100%",
                    display: isWide && !isMobile ? "flex" : undefined,
-                    background: settings.cfg.design && !isMobile
-                        ? quizThemes[settings.cfg.theme].isLight
-                            ? "transparent"
-                            : "linear-gradient(90deg,#272626, transparent)"
-                        : theme.palette.background.default,
+                    background: settings.cfg.design && !isMobile ? undefined : theme.palette.background.default,
                }}
            >
                <Box
@ -222,7 +220,7 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                            }}
                        >
                            {settings.cfg.formContact.title ||
-                            "Заполните форму, чтобы получить результаты теста"}
+                                "Заполните форму, чтобы получить результаты теста"}
                        </Typography>
                        {settings.cfg.formContact.desc && (
                            <Typography
@ -299,13 +297,13 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                    >
                        <CustomCheckbox
                            label=""
-                            handleChange={({target}) => {
+                            handleChange={({ target }) => {
                                setReady(target.checked);
                            }}
                            checked={ready}
                            colorIcon={theme.palette.primary.main}
                        />
-                        <Typography sx={{color: theme.palette.text.primary}}>
+                        <Typography sx={{ color: theme.palette.text.primary }}>
                            С&ensp;
                            <Link href={"https://shub.pena.digital/ppdd"} target="_blank">
                                Положением об обработке персональных данных{" "}
@ -322,37 +320,37 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
                        </Typography>
                    </Box>
                    {show_badge &&
-                    <Box
-                        component={Link}
-                        target={"_blank"}
-                        href={
-                            `https://${window.location.hostname.includes("s") ? "s" : ""}quiz.pena.digital/squiz/quiz/logo?q=${quizId}`
+                        <Box
+                            component={Link}
+                            target={"_blank"}
+                            href={
+                                `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={{
-                                fontSize: "14px",
-                                color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
-                                whiteSpace: "nowrap",
+                                display: "flex",
+                                alignItems: "center",
+                                mt: "55px",
+                                mb: "50px",
+                                gap: "15px",
+                                textDecoration: "none",
                            }}
                        >
-                            Сделано на PenaQuiz
-                        </Typography>
-                    </Box>
+                            <NameplateLogo
+                                style={{
+                                    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>
@ -362,26 +360,26 @@ export const ContactForm = ({currentQuestion, onShowResult}: Props) => {
 };

 const Inputs = ({
-                    name,
-                    setName,
-                    email,
-                    setEmail,
-                    phone,
-                    setPhone,
-                    text,
-                    setText,
-                    adress,
-                    setAdress,
-                }: any) => {
-    const {settings} = useQuizData();
+    name,
+    setName,
+    email,
+    setEmail,
+    phone,
+    setPhone,
+    text,
+    setText,
+    adress,
+    setAdress,
+}: any) => {
+    const { settings } = useQuizData();

    const FC = settings.cfg.formContact.fields;

    if (!FC) return null;
-    console.log(email)
+    console.log(email);
    const Name = (
        <CustomInput
-            onChange={({target}) => setName(target.value)}
+            onChange={({ target }) => setName(target.value)}
            id={name}
            title={FC["name"].innerText || "Введите имя"}
            desc={FC["name"].text || "Имя"}
@ -390,7 +388,7 @@ const Inputs = ({
    );
    const Email = (
        <CustomInput
-            onChange={({target}) => setEmail(target.value.replaceAll(/\s/g, ''))}
+            onChange={({ target }) => setEmail(target.value.replaceAll(/\s/g, ''))}
            id={email}
            title={FC["email"].innerText || "Введите Email"}
            desc={FC["email"].text || "Email"}
@ -399,7 +397,7 @@ const Inputs = ({
    );
    const Phone = (
        <CustomInput
-            onChange={({target}) => setPhone(target.value)}
+            onChange={({ target }) => setPhone(target.value)}
            id={phone}
            title={FC["phone"].innerText || "Введите номер телефона"}
            desc={FC["phone"].text || "Номер телефона"}
@ -408,7 +406,7 @@ const Inputs = ({
    );
    const Text = (
        <CustomInput
-            onChange={({target}) => setText(target.value)}
+            onChange={({ target }) => setText(target.value)}
            id={text}
            title={FC["text"].text || "Введите фамилию"}
            desc={FC["text"].innerText || "Фамилия"}
@ -417,7 +415,7 @@ const Inputs = ({
    );
    const Adress = (
        <CustomInput
-            onChange={({target}) => setAdress(target.value)}
+            onChange={({ target }) => setAdress(target.value)}
            id={adress}
            title={FC["address"].innerText || "Введите адрес"}
            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;
    title: string;
    desc: string;
-    Icon: FC<{ color: string; backgroundColor: string }>;
+    Icon: FC<{ color: string; backgroundColor: string; }>;
    onChange: TextFieldProps["onChange"];
 }) => {
    const theme = useTheme();
    const isMobile = useRootContainerSize() < 600;
-    const {settings} = useQuizData();
+    const { settings } = useQuizData();
    return (
        <Box m="10px 0">
            <Typography mb="7px" color={theme.palette.text.primary}>
@ -486,7 +484,7 @@ const CustomInput = ({title, desc, Icon, onChange, id}: {
                    startAdornment: (
                        <InputAdornment position="start">
                            <Icon color="gray"
-                                  backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"}/>
+                                backgroundColor={quizThemes[settings.cfg.theme].isLight ? "#F2F3F7" : "#F2F3F71A"} />
                        </InputAdornment>
                    ),
                }}
--- a/lib/components/ViewPublicationPage/ResultForm.tsx
+++ b/lib/components/ViewPublicationPage/ResultForm.tsx
@ -38,7 +38,6 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                height: "100%",
                minHeight: "100%",
                width: "100%",
-                overflow: "auto",
                backgroundColor: theme.palette.background.default,
                backgroundPosition: "center",
                backgroundSize: "cover",
@ -55,8 +54,9 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                    justifyContent: "space-between",
                    alignItems: "center",
                    pt: "30px",
-                    width: "inherit",
-                    height: "inherit",
+                    width: "100%",
+                    height: "100%",
+                    overflow: "auto",
                    background: settings.cfg.design && !isMobile
                        ? quizThemes[settings.cfg.theme].isLight
                            ? "transparent"
--- a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx
+++ b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx
@ -55,6 +55,7 @@ const StandartLayout = ({
                    justifyContent: "space-between",
                    alignItems: "flex-start",
                    p: "25px",
+                    overflowY: "auto",
                    background:
                        settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
                            ? "linear-gradient(90deg,#272626,transparent)"
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "@frontend/squzanswerer",
-    "version": "1.0.22",
+    "version": "1.0.23",
    "type": "module",
    "main": "./dist-package/index.js",
    "module": "./dist-package/index.js",