Merge branch 'adaptiv-install' into dev

2024-03-16 14:59:25 +03:00 · 2024-03-16 14:59:25 +03:00 · 4c7d3b0351
commit 4c7d3b0351
parent c4ad3de036 0eceb3a727
11 changed files with 107 additions and 62 deletions
--- a/src/pages/DesignPage/DesignFilling.tsx
+++ b/src/pages/DesignPage/DesignFilling.tsx
@ -105,12 +105,12 @@ export const DesignFilling = ({
    <Box
      sx={{
        width: "100%",
-        padding: "25px",
-        height: isMobile
+        padding: isMobile
          ? mobileSidebar
-            ? `calc(100vh - ${heightBar}px)`
-            : "calc(100vh - 127px)"
-          : "calc(100vh - 80px)",
+            ? `calc(${heightBar}px - 92px) 16px 70px 16px`
+            : "67px 16px 70px 16px"
+          : "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",
        }}
      >
--- a/src/pages/DesignPage/DesignPage.tsx
+++ b/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";
--- a/src/pages/InstallQuiz/InstallQuiz.tsx
+++ b/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"
--- a/src/pages/QuizAnswersPage/CardAnswer.tsx
+++ b/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
-                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();
-                      }
-                    }
-                  }
-                }}
-              >
+              <IconButton onClick={openResults}>
                <ArrowDownIcon
                  style={{
                    transform: isOpen ? "rotate(180deg)" : "rotate(360deg)",
--- a/src/pages/Tariffs/Tariffs.tsx
+++ b/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>
--- a/src/pages/Tariffs/tariffsUtils/TariffCard.tsx
+++ b/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}
--- a/src/pages/main.tsx
+++ b/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
-                ? `calc(100vh - ${heightHeader}px)`
-                : "calc(100vh - 51px)"
+              ? // ? mobileSidebar
+                //   ? `calc(100vh - ${heightHeader}px)`
+                //    "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 &&
--- a/src/pages/startPage/EditPage.tsx
+++ b/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
-                  ? `calc(100vh - ${heightBar}px)`
-                  : `calc(100vh - 125px)`
+                ? "100vh"
                : isConditionMet
                  ? isBranchingLogic
                    ? `calc(100vh - 166px)`
                    : `calc(100vh - 186px)`
                  : `calc(100vh - 166px)`,
              boxSizing: "border-box",
+              transition: "transform 0.3s",
+              transform:
+                scrollDown && isMobile ? "translateY(-51px)" : undefined,
            }}
          >
            {/* Выбор текущей страницы редактирования чего-либо - находится здесь */}
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/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={{
--- a/src/ui_kit/Header/Header.tsx
+++ b/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" }}>
--- a/src/ui_kit/Sidebar/SidebarMobile.tsx
+++ b/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" }}>