правки по адаптивности

2024-01-05 00:56:21 +03:00 · 2024-01-05 00:56:21 +03:00 · 2c01504668
commit 2c01504668
parent 69c975e1f4
16 changed files with 213 additions and 170 deletions
--- a/src/pages/ContactFormPage/DrawerParent.tsx
+++ b/src/pages/ContactFormPage/DrawerParent.tsx
@ -2,7 +2,7 @@ import * as React from "react";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
 import Button from "@mui/material/Button";
-import { SxProps, Theme } from "@mui/material";
+import { SxProps, Theme, useMediaQuery, useTheme } from "@mui/material";

 interface Props {
  outerContainerSx?: SxProps<Theme>;
@ -17,6 +17,8 @@ export default function DrawerNewField({
  isOpenDrawer: isOpen,
  drawerNewFieldHC,
 }: Props) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  return (
    <>
      <Drawer
@ -24,7 +26,7 @@ export default function DrawerNewField({
        open={Boolean(isOpen)}
        onClose={() => drawerNewFieldHC("")}
      >
-        <Box sx={{ width: 450 }} role="presentation">
+        <Box sx={{ width: isMobile ? 320 : 450 }} role="presentation">
          {children}
        </Box>
      </Drawer>
--- a/src/pages/Questions/BranchingModal/BranchingQuestionsModal.tsx
+++ b/src/pages/Questions/BranchingModal/BranchingQuestionsModal.tsx
@ -12,6 +12,7 @@ import {
  Typography,
  useTheme,
  Checkbox,
+  useMediaQuery,
 } from "@mui/material";
 import {
  AnyTypedQuizQuestion,
@ -33,10 +34,11 @@ import {
 import { updateOpenedModalSettingsId } from "@root/uiTools/actions";
 import { useUiTools } from "@root/uiTools/store";
 import { enqueueSnackbar } from "notistack";
+import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";

 export default function BranchingQuestions() {
  const theme = useTheme();
-
+  const isMobile = useMediaQuery(theme.breakpoints.down(650));
  const { openedModalSettingsId } = useUiTools();
  const [targetQuestion, setTargetQuestion] =
    useState<AnyTypedQuizQuestion | null>(
@ -119,14 +121,22 @@ export default function BranchingQuestions() {
              <Box sx={{ color: "#4d4d4d" }}>
                <Typography component="span">{targetQuestion.title}</Typography>
              </Box>
-              <Tooltip
-                title="Настройте условия, при которых данный вопрос будет отображаться в quiz."
-                placement="top"
-              >
-                <Box>
-                  <InfoIcon />
-                </Box>
-              </Tooltip>
+              {isMobile ? (
+                <TooltipClickInfo
+                  title={
+                    "Настройте условия, при которых данный вопрос будет отображаться в quiz."
+                  }
+                />
+              ) : (
+                <Tooltip
+                  title="Настройте условия, при которых данный вопрос будет отображаться в quiz."
+                  placement="top"
+                >
+                  <Box>
+                    <InfoIcon />
+                  </Box>
+                </Tooltip>
+              )}
            </Box>

            <Box
--- a/src/pages/Questions/DataOptions/DataOptions.tsx
+++ b/src/pages/Questions/DataOptions/DataOptions.tsx
@ -10,6 +10,7 @@ import InfoIcon from "../../../assets/icons/InfoIcon";
 import ButtonsOptions from "../ButtonsOptions";
 import SwitchData from "./switchData";
 import { QuizQuestionDate } from "@model/questionTypes/date";
+import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";

 interface Props {
  question: QuizQuestionDate;
@ -55,11 +56,15 @@ export default function DataOptions({ question }: Props) {
          >
            Пользователю будет предложено выбрать дату
          </Typography>
-          <Tooltip title="Выбор даты." placement="top">
-            <Box>
-              <InfoIcon />
-            </Box>
-          </Tooltip>
+          {isMobile ? (
+            <TooltipClickInfo title={"Выбор даты."} />
+          ) : (
+            <Tooltip title="Выбор даты." placement="top">
+              <Box>
+                <InfoIcon />
+              </Box>
+            </Tooltip>
+          )}
        </Box>
      </Box>
      <ButtonsOptions
--- a/src/pages/Questions/UploadFile/UploadFile.tsx
+++ b/src/pages/Questions/UploadFile/UploadFile.tsx
@ -19,6 +19,7 @@ import type {
 } from "../../../model/questionTypes/file";
 import ButtonsOptions from "../ButtonsOptions";
 import SwitchUpload from "./switchUpload";
+import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";

 type DesignItem = {
  name: string;
@ -180,14 +181,20 @@ export default function UploadFile({ question }: Props) {
          >
            Пользователь может загрузить любой собственный файл
          </Typography>
-          <Tooltip
-            title="Можно загрузить файл в желаемом формате."
-            placement="top"
-          >
-            <Box>
-              <InfoIcon />
-            </Box>
-          </Tooltip>
+          {isMobile ? (
+            <TooltipClickInfo
+              title={"Можно загрузить файл в желаемом формате."}
+            />
+          ) : (
+            <Tooltip
+              title="Можно загрузить файл в желаемом формате."
+              placement="top"
+            >
+              <Box>
+                <InfoIcon />
+              </Box>
+            </Tooltip>
+          )}
        </Box>
      </Box>
      <ButtonsOptions
--- a/src/pages/ResultPage/Result.tsx
+++ b/src/pages/ResultPage/Result.tsx
@ -1,13 +1,15 @@
-import { Box, Button, Tooltip } from "@mui/material";
+import { Box, Button, Tooltip, useMediaQuery, useTheme } from "@mui/material";
 import { updateQuiz } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import image from "../../assets/Rectangle 110.png";
 import Info from "../../assets/icons/Info";
+import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
 // import CreationFullCard from "./FirstEntry";

 export const Result = () => {
  const quiz = useCurrentQuiz();
-
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(650));
  if (!quiz) return null;

  return (
@ -29,11 +31,15 @@ export const Result = () => {
        >
          Создать результаты
        </Button>
-        <Tooltip title="Посмотреть справку" placement="top">
-          <Box>
-            <Info />
-          </Box>
-        </Tooltip>
+        {isMobile ? (
+          <TooltipClickInfo title={"Посмотреть справку"} />
+        ) : (
+          <Tooltip title="Посмотреть справку" placement="top">
+            <Box>
+              <Info />
+            </Box>
+          </Tooltip>
+        )}
      </Box>
    </Box>
  );
--- a/src/pages/ResultPage/cards/ResultCard.tsx
+++ b/src/pages/ResultPage/cards/ResultCard.tsx
@ -391,7 +391,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                    </IconButton>
                  </Box>

-                  <TextField
+                  <CustomTextField
                    value={resultData.content.hint.text}
                    onChange={({ target }: { target: HTMLInputElement }) =>
                      updateQuestion(
@ -401,11 +401,12 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                      )
                    }
                    fullWidth
+                    maxLength={19}
                    placeholder="Например: узнать подробнее"
                    sx={{
                      "& .MuiInputBase-root": {
                        backgroundColor: "#F2F3F7",
-                        width: "409px",
+                        width: isMobile ? undefined : "409px",
                        height: "48px",
                        borderRadius: "8px",
                      },
--- a/src/pages/ResultPage/cards/WhenCard.tsx
+++ b/src/pages/ResultPage/cards/WhenCard.tsx
@ -205,9 +205,13 @@ export const WhenCard = ({ quizExpand }: Props) => {
                        quiz?.config.resultInfo.when === value
                          ? " white"
                          : "#9A9AAF",
-                      minWidth: isSmallMonitor ? "310px" : "auto",
+                      minWidth: isSmallMonitor
+                        ? isMobile
+                          ? undefined
+                          : "310px"
+                        : "auto",
                      borderRadius: "8px",
-                      width: "220px",
+                      width: isMobile ? "100%" : "220px",
                      height: "44px",
                      fontSize: "17px",
                      border:
--- a/src/pages/ViewPublicationPage/ContactForm.tsx
+++ b/src/pages/ViewPublicationPage/ContactForm.tsx
@ -7,6 +7,7 @@ import {
  Link,
  InputAdornment,
  useTheme,
+  useMediaQuery,
 } from "@mui/material";
 import NameIcon from "@icons/ContactFormIcon/NameIcon";
 import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
@ -75,6 +76,7 @@ export const ContactForm = ({
  const mode = modes;
  const { questions } = useQuestionsStore();
  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const [ready, setReady] = useState(false);
  const followNextForm = () => {
    setShowContactForm(false);
@ -108,8 +110,10 @@ export const ContactForm = ({
    >
      <Box
        sx={{
-          width: "530px",
+          width: isMobile ? "330px" : "530px",
          borderRadius: "4px",
+          overflow: "auto",
+          height: "90vh",
          boxShadow:
            "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px",
        }}
@ -184,7 +188,7 @@ export const ContactForm = ({
            sx={{
              display: "flex",
              mt: "20px",
-              width: "450px",
+              width: isMobile ? "300px" : "450px",
            }}
          >
            <CustomCheckbox
@ -321,12 +325,14 @@ const Inputs = (currentQuestion: any) => {
 };

 const CustomInput = ({ title, desc, Icon }: any) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  return (
    <Box m="15px 0">
      <Typography mb="7px">{title}</Typography>
      <TextField
        sx={{
-          width: "350px",
+          width: isMobile ? "300px" : "350px",
        }}
        placeholder={desc}
        InputProps={{
--- a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx
+++ b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx
@ -84,7 +84,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
      ) : null
    ) : null;

-    console.log(background)
+  console.log(background);

  return (
    <Paper
--- a/src/pages/main.tsx
+++ b/src/pages/main.tsx
@ -234,20 +234,22 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
                  <LinkSimple />
                </Box>
              )}
-              <Box sx={{ textAlign: "end", width: "100%" }}>
-                <IconButton
-                  onClick={toggleQuizPreview}
-                  sx={{
-                    pointerEvents: "auto",
-                    marginLeft: "auto",
-                    position: "relative",
-                    zIndex: "999999",
-                    alignItems: "end",
-                  }}
-                >
-                  <VisibilityIcon sx={{ height: "30px", width: "30px" }} />
-                </IconButton>
-              </Box>
+              {currentStep === 1 && (
+                <Box sx={{ textAlign: "end", width: "100%" }}>
+                  <IconButton
+                    onClick={toggleQuizPreview}
+                    sx={{
+                      pointerEvents: "auto",
+                      marginLeft: "auto",
+                      position: "relative",
+                      zIndex: "999999",
+                      alignItems: "end",
+                    }}
+                  >
+                    <VisibilityIcon sx={{ height: "30px", width: "30px" }} />
+                  </IconButton>
+                </Box>
+              )}
            </Box>
          )}
        </Box>
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
@ -46,6 +46,7 @@ import ModalSizeImage from "./ModalSizeImage";
 import SelectableIconButton from "./SelectableIconButton";
 import { DropZone } from "./dropZone";
 import Extra from "./extra";
+import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";

 const designTypes = [
  [
@ -68,6 +69,7 @@ const designTypes = [

 export default function StartPageSettings() {
  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(650));
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500));
  const isTablet = useMediaQuery(theme.breakpoints.down(950));
  const quiz = useCurrentQuiz();
@ -302,122 +304,131 @@ export default function StartPageSettings() {
              </SelectableButton>
            </Box>

-{quiz.config.startpage.background.type === "image" &&
-            <Box
-              sx={{
-                display:
-                  quiz.config.startpage.background.type === "image"
-                    ? "flex"
-                    : "none",
-                flexDirection: "column",
-              }}
-            >
+            {quiz.config.startpage.background.type === "image" && (
              <Box
                sx={{
-                  display: mobileVersion ? "none" : "flex",
+                  display:
+                    quiz.config.startpage.background.type === "image"
+                      ? "flex"
+                      : "none",
                  flexDirection: "column",
                }}
              >
-                <Typography
+                <Box
                  sx={{
-                    fontWeight: 500,
-                    color: theme.palette.grey3.main,
+                    display: mobileVersion ? "none" : "flex",
+                    flexDirection: "column",
+                  }}
+                >
+                  <Typography
+                    sx={{
+                      fontWeight: 500,
+                      color: theme.palette.grey3.main,
+                      mt: "20px",
+                      mb: "14px",
+                    }}
+                  >
+                    Изображение
+                  </Typography>
+                  <DropZone
+                    value={"5 MB максимум"}
+                    sx={{ maxWidth: "300px" }}
+                    imageUrl={quiz.config.startpage.background.desktop}
+                    originalImageUrl={
+                      quiz.config.startpage.background.originalDesktop
+                    }
+                    onImageUploadClick={(file) => {
+                      uploadQuizImage(quiz.id, file, (quiz, url) => {
+                        quiz.config.startpage.background.desktop = url;
+                        quiz.config.startpage.background.originalDesktop = url;
+                      });
+                    }}
+                    onImageSaveClick={(file) => {
+                      uploadQuizImage(quiz.id, file, (quiz, url) => {
+                        quiz.config.startpage.background.desktop = url;
+                      });
+                    }}
+                    onDeleteClick={() => {
+                      updateQuiz(quiz.id, (quiz) => {
+                        quiz.config.startpage.background.desktop = null;
+                      });
+                    }}
+                  />
+                </Box>
+
+                <ModalSizeImage />
+              </Box>
+            )}
+
+            {quiz.config.startpage.background.type === "video" && (
+              <>
+                <Box
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "7px",
                    mt: "20px",
                    mb: "14px",
                  }}
                >
-                  Изображение
-                </Typography>
-                <DropZone
-                  value={"5 MB максимум"}
-                  sx={{ maxWidth: "300px" }}
-                  imageUrl={quiz.config.startpage.background.desktop}
-                  originalImageUrl={
-                    quiz.config.startpage.background.originalDesktop
-                  }
-                  onImageUploadClick={(file) => {
-                    uploadQuizImage(quiz.id, file, (quiz, url) => {
-                      quiz.config.startpage.background.desktop = url;
-                      quiz.config.startpage.background.originalDesktop = url;
-                    });
-                  }}
-                  onImageSaveClick={(file) => {
-                    uploadQuizImage(quiz.id, file, (quiz, url) => {
-                      quiz.config.startpage.background.desktop = url;
-                    });
-                  }}
-                  onDeleteClick={() => {
-                    updateQuiz(quiz.id, (quiz) => {
-                      quiz.config.startpage.background.desktop = null;
-                    });
-                  }}
-                />
-              </Box>
-
-              <ModalSizeImage />
-            </Box>
-
-}
-
-{quiz.config.startpage.background.type === "video" && <>
-            <Box
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "7px",
-                  mt: "20px",
-                  mb: "14px",
-                }}
-              >
-                <Typography
-                  sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
-                >
-                  Добавить видео
-                </Typography>
-                <Tooltip title="Можно загрузить видео." placement="top">
-                  <Box>
-                    <InfoIcon />
-                  </Box>
-                </Tooltip>
-              </Box>
-              <ButtonBase
-                component="label"
-                sx={{ justifyContent: "center",
-                height: "48px",
-                width: "48px",  
-                display: "flex",
-                alignItems: "center",
-                my: "20px"
-              }}
-              >
-                <input
-                  onChange={(event) => {
-                    const file = event.target.files?.[0];
-                    if (file) {
-                      uploadQuizImage(quiz.id, file, (quiz, url) => {
-                        quiz.config.startpage.background.video = url;
-                      });
-                      // setVideo(URL.createObjectURL(file));
-                    }
-                
-                  }}
-                  hidden
-                  accept=".mp4"
-                  multiple
-                  type="file"
-                />
-                <UploadBox
-                  icon={<UploadIcon />}
+                  <Typography
+                    sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
+                  >
+                    Добавить видео
+                  </Typography>
+                  {isMobile ? (
+                    <TooltipClickInfo title={"Можно загрузить видео."} />
+                  ) : (
+                    <Tooltip title="Можно загрузить видео." placement="top">
+                      <Box>
+                        <InfoIcon />
+                      </Box>
+                    </Tooltip>
+                  )}
+                </Box>
+                <ButtonBase
+                  component="label"
                  sx={{
+                    justifyContent: "center",
                    height: "48px",
                    width: "48px",
+                    display: "flex",
+                    alignItems: "center",
+                    my: "20px",
                  }}
-                />
+                >
+                  <input
+                    onChange={(event) => {
+                      const file = event.target.files?.[0];
+                      if (file) {
+                        uploadQuizImage(quiz.id, file, (quiz, url) => {
+                          quiz.config.startpage.background.video = url;
+                        });
+                        // setVideo(URL.createObjectURL(file));
+                      }
+                    }}
+                    hidden
+                    accept=".mp4"
+                    multiple
+                    type="file"
+                  />
+                  <UploadBox
+                    icon={<UploadIcon />}
+                    sx={{
+                      height: "48px",
+                      width: "48px",
+                    }}
+                  />
                </ButtonBase>
-                {quiz.config.startpage.background.video ? <video src={quiz.config.startpage.background.video} width="400" controls /> : null}
-
-
-</>}
+                {quiz.config.startpage.background.video ? (
+                  <video
+                    src={quiz.config.startpage.background.video}
+                    width="400"
+                    controls
+                  />
+                ) : null}
+              </>
+            )}
            {designType !== "centered" && (
              <>
                <Typography
--- a/src/ui_kit/Header/Header.tsx
+++ b/src/ui_kit/Header/Header.tsx
@ -131,6 +131,7 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
          />
        ) : (
          <>
+            <ToTariffsButton />
            <Box
              sx={{
                display: "flex",
@ -140,7 +141,6 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
            >
              <LogoutButton onClick={handleLogoutClick} />
            </Box>
-            <ToTariffsButton />
          </>
        )}
      </Box>
--- a/src/ui_kit/Header/HeaderFull.tsx
+++ b/src/ui_kit/Header/HeaderFull.tsx
@ -57,16 +57,8 @@ export default function HeaderFull() {
      <Link to="/">
        <Logotip width={124} />
      </Link>
-      {!isTablet && (
-        <Box
-          sx={{
-            display: "flex",
-            gap: "30px",
-            overflow: "hidden",
-          }}
-        ></Box>
-      )}
      <Box sx={{ display: "flex", ml: "auto" }}>
+        <ToTariffsButton />
        <LogoutButton
          onClick={handleLogoutClick}
          sx={{
@ -74,7 +66,6 @@ export default function HeaderFull() {
          }}
        />
      </Box>
-      <ToTariffsButton />
    </Container>
  );
 }
--- a/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx
+++ b/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx
@ -6,7 +6,6 @@ interface Props {
 }

 export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
-
  const extractYoutubeVideoId =
    /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/gi;
  const videoId = extractYoutubeVideoId.exec(videoUrl)?.[1];
@ -15,7 +14,7 @@ export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
  const embedUrl = `https://www.youtube.com/embed/${videoId}?controls=0&autoplay=1&modestbranding=0&showinfo=0&disablekb=1&mute=1&loop=1`;
  // https://www.youtube.com/shorts/9VgqBPd6RPA
  // https://www.youtube.com/watch?v=I2N8hTHhvGY
-  console.log()
+  console.log();
  return (
    <Box
      sx={{
@ -34,11 +33,9 @@ export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
        sx={{
          width: "100%",
          height: "100%",
-
        }}
        autoPlay
        muted
-
        src={videoUrl}
      />
      {/* <iframe
--- a/src/ui_kit/Toolbars/SmallSwitchQuestionListGraph.tsx
+++ b/src/ui_kit/Toolbars/SmallSwitchQuestionListGraph.tsx
@ -17,7 +17,7 @@ export const SmallSwitchQuestionListGraph = ({
        width: "77px",
        height: "51px",
        position: "fixed",
-        zIndex: "99999",
+        zIndex: "1111",
        right: "0",
        top: "200px",
        background: "#333647",
--- a/src/ui_kit/Toolbars/TooltipClickInfo.tsx
+++ b/src/ui_kit/Toolbars/TooltipClickInfo.tsx
@ -20,6 +20,7 @@ export default function TooltipClickInfo({ title }: string) {
            PopperProps={{
              disablePortal: true,
            }}
+            placement="top"
            onClose={handleTooltipClose}
            open={open}
            disableFocusListener