Merge branch 'adaptiv-install' into dev

src/pages/DesignPage/DesignFilling.tsx

@@ -105,12 +105,12 @@ export const DesignFilling = ({
     <Box
       sx={{
         width: "100%",
-        padding: "25px",
+        padding: isMobile
-        height: isMobile
           ? mobileSidebar
-            ? `calc(100vh - ${heightBar}px)`
+            ? `calc(${heightBar}px - 92px) 16px 70px 16px`
-            : "calc(100vh - 127px)"
+            : "67px 16px 70px 16px"
-          : "calc(100vh - 80px)",
+          : "25px",
+        height: isMobile ? "100vh" : "calc(100vh - 80px)",
       }}
     >
       <Typography variant="h5" sx={{ marginBottom: "40px", color: "#333647" }}>
@@ -122,7 +122,7 @@ export const DesignFilling = ({
           maxWidth: "796px",
           width: "100%",
           borderRadius: "12px",
-          height: "calc(100vh - 280px)",
+          height: "calc(100vh - 300px)",
           overflow: "auto",
         }}
       >

src/pages/DesignPage/DesignPage.tsx

@@ -3,10 +3,8 @@ import { Box, useMediaQuery, useTheme, Skeleton } from "@mui/material";
 import { setQuizes, setCurrentStep } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
-import Sidebar from "@ui_kit/Sidebar/Sidebar";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { SidebarMobile } from "../../ui_kit/Sidebar/SidebarMobile";
 import { cleanQuestions, setQuestions } from "@root/questions/actions";
 import {
   updateModalInfoWhyCantCreate,
@@ -17,7 +15,6 @@ import { questionApi } from "@api/question";
 import { useUiTools } from "@root/uiTools/store";
 
 import { ConfirmLeaveModal } from "../startPage/ConfirmLeaveModal";
-import { Header } from "@ui_kit/Header/Header";
 import { DesignFilling } from "./DesignFilling";
 import { createPortal } from "react-dom";
 import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";

src/pages/InstallQuiz/InstallQuiz.tsx

@@ -301,7 +301,7 @@ export default function InstallQuiz() {
             }}
           >
             <Typography variant="h5" sx={{ paddingRight: "30px" }}>
-              Установка квизов на сайте
+              Установка quiz на сайте
             </Typography>
             <ButtonBase
               onClick={() => {
@@ -399,9 +399,9 @@ export default function InstallQuiz() {
                       gap: "20px",
                     }}
                   >
-                    <Typography>1. Код вставки опросника</Typography>
+                    <Typography>1. Код вставки quiz</Typography>
                     <Typography sx={{ color: theme.palette.grey2.main }}>
-                      Установите код в то место, где должен быть опросник
+                      Установите код в то место, где должен быть quiz
                     </Typography>
                     <TextField
                       id="outlined-multiline-static"

src/pages/QuizAnswersPage/CardAnswer.tsx

@@ -63,10 +63,37 @@ export const CardAnswer = ({
   const { editQuizId } = useQuizStore();
   const { questions } = useQuestionsStore();
 
+  const openResults = async () => {
+    setIsOpen(!isOpen);
+    if (!isOpen) {
+      try {
+        let resAnswer = await resultApi.getAnswerList(Number(idResult));
+
+        let resAnswerOnly = resAnswer.filter((res) => res.Result !== true);
+        let resQuiz = resAnswer.filter((res) => res.Result === true);
+        setResultQuiz(resQuiz);
+        setResultsAnswer(resAnswerOnly);
+        let idResults = resQuiz[0].question_id;
+        let questionsResult = questions.filter(
+          (q) => q.backendId === idResults,
+        );
+        setQuestionsResultState(questionsResult);
+        console.log("тут хранятся ответы", resAnswerOnly);
+      } catch (nativeError) {
+        const error = nativeError as AxiosError;
+
+        if (error.response?.statusText === "Payment Required") {
+          openPrePaymentModal();
+        }
+      }
+    }
+  };
+
   return (
     <Box
       onClick={() => {
         obsolescenceResult(idResult, editQuizId);
+        openResults();
       }}
       sx={{
         borderRadius: "12px",
@@ -129,39 +156,7 @@ export const CardAnswer = ({
               >
                 {idResult}
               </Box>
-              <IconButton
+              <IconButton onClick={openResults}>
-                onClick={async () => {
-                  setIsOpen(!isOpen);
-                  if (!isOpen) {
-                    try {
-                      let resAnswer = await resultApi.getAnswerList(
-                        Number(idResult),
-                      );
-
-                      let resAnswerOnly = resAnswer.filter(
-                        (res) => res.Result !== true,
-                      );
-                      let resQuiz = resAnswer.filter(
-                        (res) => res.Result === true,
-                      );
-                      setResultQuiz(resQuiz);
-                      setResultsAnswer(resAnswerOnly);
-                      let idResults = resQuiz[0].question_id;
-                      let questionsResult = questions.filter(
-                        (q) => q.backendId === idResults,
-                      );
-                      setQuestionsResultState(questionsResult);
-                      console.log("тут хранятся ответы", resAnswerOnly);
-                    } catch (nativeError) {
-                      const error = nativeError as AxiosError;
-
-                      if (error.response?.statusText === "Payment Required") {
-                        openPrePaymentModal();
-                      }
-                    }
-                  }
-                }}
-              >
                 <ArrowDownIcon
                   style={{
                     transform: isOpen ? "rotate(180deg)" : "rotate(360deg)",

src/pages/Tariffs/Tariffs.tsx

@@ -41,6 +41,7 @@ function TariffPage() {
   const theme = useTheme();
   const token = useToken();
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
   const userId = useUserStore((state) => state.userId);
   const location = useLocation();
   const navigate = useNavigate();
@@ -175,7 +176,7 @@ function TariffPage() {
           display: "flex",
           height: "80px",
           alignItems: "center",
-          gap: isTablet ? "20px" : "60px",
+          gap: isMobile ? "7px" : isTablet ? "20px" : "60px",
           flexDirection: "row",
           justifyContent: "space-between",
           bgcolor: "white",
@@ -189,7 +190,7 @@ function TariffPage() {
           <ArrowLeft color="black" />
         </IconButton>
         <Box sx={{ display: "flex", ml: "auto" }}>
-          <Box sx={{ whiteSpace: "nowrap" }}>
+          <Box sx={{ whiteSpace: "nowrap" }} onClick={() => console.log(cash)}>
             <Typography
               sx={{
                 fontSize: "12px",
@@ -199,7 +200,11 @@ function TariffPage() {
             >
               Мой баланс
             </Typography>
-            <Typography variant="body2" color={"#7e2aea"}>
+            <Typography
+              variant="body2"
+              color={"#7e2aea"}
+              fontSize={isMobile ? (cash.length > 9 ? "13px" : "16px") : "16px"}
+            >
               {cash}
             </Typography>
           </Box>

src/pages/Tariffs/tariffsUtils/TariffCard.tsx

@@ -6,6 +6,8 @@ import {
   Theme,
   Button,
   Badge,
+  useTheme,
+  useMediaQuery,
 } from "@mui/material";
 import { MouseEventHandler, ReactNode } from "react";
 
@@ -33,7 +35,8 @@ export default function TariffCard({
   discount,
 }: Props) {
   text = Array.isArray(text) ? text : [text];
-
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
   return (
     <Box
       sx={{
@@ -68,6 +71,7 @@ export default function TariffCard({
               flexWrap: "wrap",
               columnGap: "10px",
               rowGap: 0,
+              flexDirection: isMobile ? "column-reverse" : undefined,
             }}
           >
             {price}

src/pages/main.tsx

@@ -95,6 +95,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
 
   const [widthMain, setWidthMain] = useState(null);
   const [heightSidebar, setHeightSidebar] = useState(null);
+  const [scrollDown, setScrollDown] = useState<boolean | null>(null);
   const mainBlock = useRef(0);
   const heightHeader = heightSidebar + 51 + 36;
   const observer = useRef(
@@ -111,7 +112,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
   if (!quizConfig) return <></>;
   return (
     <>
-      <Header setMobileSidebar={setMobileSidebar} />
+      <Header setMobileSidebar={setMobileSidebar} scrollDown={scrollDown} />
       <Box
         sx={{
           display: "flex",
@@ -125,6 +126,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
                 open={mobileSidebar}
                 changePage={changePage}
                 setHeightSitebar={setHeightSidebar}
+                scrollDown={scrollDown}
               />
             ) : (
               <Sidebar changePage={changePage} />
@@ -137,9 +139,10 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
           sx={{
             width: "100%",
             height: isMobile
-              ? mobileSidebar
+              ? // ? mobileSidebar
-                ? `calc(100vh - ${heightHeader}px)`
+                //   ? `calc(100vh - ${heightHeader}px)`
-                : "calc(100vh - 51px)"
+                //    "calc(100vh - 51px)"
+                "100vh"
               : "calc(100vh - 80px)",
             display: "flex",
             flexDirection: "column",
@@ -162,6 +165,8 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
               widthMain={widthMain}
               mobileSidebar={mobileSidebar}
               heightSidebar={heightSidebar}
+              scrollDown={scrollDown}
+              setScrollDown={setScrollDown}
             />
           </Box>
 
@@ -182,6 +187,8 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
                 background: "#FFF",
                 borderTop: "#f2f3f7 2px solid",
                 zIndex: 1,
+                position: isMobile ? "fixed" : undefined,
+                bottom: isMobile ? 0 : undefined,
               }}
             >
               {isConditionMet &&

src/pages/startPage/EditPage.tsx

@@ -17,7 +17,7 @@ import { useQuizStore } from "@root/quizes/store";
 import Sidebar from "@ui_kit/Sidebar/Sidebar";
 import Stepper from "@ui_kit/Stepper";
 import SwitchStepPages from "@ui_kit/switchStepPages";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useDebouncedCallback } from "use-debounce";
 import { SidebarMobile } from "../../ui_kit/Sidebar/SidebarMobile";
@@ -48,6 +48,8 @@ interface Props {
   widthMain: number;
   mobileSidebar: boolean;
   heightSidebar: number;
+  scrollDown: boolean;
+  setScrollDown: (a: boolean) => void;
 }
 export default function EditPage({
   openBranchingPage,
@@ -55,6 +57,8 @@ export default function EditPage({
   widthMain,
   mobileSidebar,
   heightSidebar,
+  scrollDown,
+  setScrollDown,
 }: Props) {
   const quiz = useCurrentQuiz();
   const { editQuizId } = useQuizStore();
@@ -67,8 +71,9 @@ export default function EditPage({
   const isMobile = useMediaQuery(theme.breakpoints.down(650));
   const quizConfig = quiz?.config;
   // const [openBranchingPage, setOpenBranchingPage] = useState<boolean>(false);
+  const mainBlock = useRef(0);
 
-  const heightBar = heightSidebar + 51 + 88 + 23;
+  const heightBar = heightSidebar + 51 + 88;
   useEffect(() => {
     if (editQuizId === null) navigate("/list");
   }, [navigate, editQuizId]);
@@ -108,6 +113,17 @@ export default function EditPage({
     setCurrentStep(nextStep);
   };
 
+  let lastScroll = mainBlock.current.scrollTop;
+  const onScroll = (e) => {
+    if ((mainBlock.current.scrollTop > lastScroll && !scrollDown) || null) {
+      setScrollDown(true);
+    }
+    if (mainBlock.current.scrollTop < lastScroll && scrollDown) {
+      setScrollDown(false);
+    }
+    lastScroll = mainBlock.current.scrollTop;
+  };
+
   if (!quizConfig) return <></>;
 
   const isConditionMet =
@@ -129,19 +145,26 @@ export default function EditPage({
           }}
         >
           <Box
+            onScroll={onScroll}
+            ref={mainBlock}
             sx={{
-              padding: isMobile ? "16px 16px 20px 16px" : "25px 25px 20px 25px",
+              padding: isMobile
+                ? mobileSidebar
+                  ? `${heightBar}px 16px 70px 16px`
+                  : "67px 16px 70px 16px"
+                : "25px 25px 20px 25px",
               overflow: "auto",
               height: isMobile
-                ? mobileSidebar
+                ? "100vh"
-                  ? `calc(100vh - ${heightBar}px)`
-                  : `calc(100vh - 125px)`
                 : isConditionMet
                   ? isBranchingLogic
                     ? `calc(100vh - 166px)`
                     : `calc(100vh - 186px)`
                   : `calc(100vh - 166px)`,
               boxSizing: "border-box",
+              transition: "transform 0.3s",
+              transform:
+                scrollDown && isMobile ? "translateY(-51px)" : undefined,
             }}
           >
             {/* Выбор текущей страницы редактирования чего-либо - находится здесь */}

src/pages/startPage/StartPageSettings.tsx

@@ -817,7 +817,7 @@ export default function StartPageSettings() {
                     quiz.config.info.site = e.target.value;
                   })
                 }
-                maxLength={100}
+                maxLength={2000}
               />
               <Typography
                 sx={{

src/ui_kit/Header/Header.tsx

@@ -30,9 +30,10 @@ import { cleanAuthTicketData } from "@root/ticket";
 
 type HeaderProps = {
   setMobileSidebar: (callback: (visible: boolean) => boolean) => void;
+  scrollDown: boolean;
 };
 
-export const Header = ({ setMobileSidebar }: HeaderProps) => {
+export const Header = ({ setMobileSidebar, scrollDown }: HeaderProps) => {
   const quiz = useCurrentQuiz();
   const theme = useTheme();
   const navigate = useNavigate();
@@ -65,6 +66,10 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
         bgcolor: isMobile ? "#333647" : "white",
         borderBottom: "1px solid #E3E3E3",
         zIndex: theme.zIndex.drawer + 1,
+        transition: "transform 0.3s",
+        transform: scrollDown && isMobile ? "translateY(-51px)" : undefined,
+        position: isMobile ? "fixed" : undefined,
+        top: isMobile ? 0 : undefined,
       }}
     >
       <Link to="/" style={{ display: "flex" }}>

src/ui_kit/Sidebar/SidebarMobile.tsx

@@ -48,12 +48,14 @@ interface Iprops {
   open: boolean;
   changePage: (step: number) => void;
   setHeightSitebar: any;
+  scrollDown: boolean;
 }
 
 export const SidebarMobile: FC<Iprops> = ({
   open,
   changePage,
   setHeightSitebar,
+  scrollDown,
 }) => {
   const theme = useTheme();
   const isWrappSidebar = useMediaQuery(theme.breakpoints.down(400));
@@ -118,7 +120,9 @@ export const SidebarMobile: FC<Iprops> = ({
     <Box
       ref={heightSidebar}
       sx={{
-        display: open ? "block" : "none",
+        display: open ? "flex" : "none",
+        flexDirection: "column",
+        width: "100%",
         minHeight: "134px",
         padding: "20px 16px 16px 16px",
         background: "#333647",
@@ -126,6 +130,11 @@ export const SidebarMobile: FC<Iprops> = ({
         borderBottomLeftRadius: "8px",
         borderBottomRightRadius: "8px",
         transitionDuration: "200ms",
+        position: "fixed",
+        top: "51px",
+        zIndex: theme.zIndex.drawer + 1,
+        transition: "transform 0.3s",
+        transform: scrollDown ? "translateY(-200px)" : undefined,
       }}
     >
       <Box sx={{ display: "flex", alignItems: "center", position: "relative" }}>