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

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,6 +121,13 @@ export default function BranchingQuestions() {
              <Box sx={{ color: "#4d4d4d" }}>
                <Typography component="span">{targetQuestion.title}</Typography>
              </Box>
+              {isMobile ? (
+                <TooltipClickInfo
+                  title={
+                    "Настройте условия, при которых данный вопрос будет отображаться в quiz."
+                  }
+                />
+              ) : (
                <Tooltip
                  title="Настройте условия, при которых данный вопрос будет отображаться в quiz."
                  placement="top"
@ -127,6 +136,7 @@ export default function BranchingQuestions() {
                    <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>
+          {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,6 +181,11 @@ export default function UploadFile({ question }: Props) {
          >
            Пользователь может загрузить любой собственный файл
          </Typography>
+          {isMobile ? (
+            <TooltipClickInfo
+              title={"Можно загрузить файл в желаемом формате."}
+            />
+          ) : (
            <Tooltip
              title="Можно загрузить файл в желаемом формате."
              placement="top"
@ -188,6 +194,7 @@ export default function UploadFile({ question }: Props) {
                <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>
+        {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,6 +234,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
                  <LinkSimple />
                </Box>
              )}
+              {currentStep === 1 && (
                <Box sx={{ textAlign: "end", width: "100%" }}>
                  <IconButton
                    onClick={toggleQuizPreview}
@ -248,6 +249,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
                    <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,7 +304,7 @@ export default function StartPageSettings() {
              </SelectableButton>
            </Box>

-{quiz.config.startpage.background.type === "image" &&
+            {quiz.config.startpage.background.type === "image" && (
              <Box
                sx={{
                  display:
@ -356,10 +358,10 @@ export default function StartPageSettings() {

                <ModalSizeImage />
              </Box>
+            )}

-}
-
-{quiz.config.startpage.background.type === "video" && <>
+            {quiz.config.startpage.background.type === "video" && (
+              <>
                <Box
                  sx={{
                    display: "flex",
@ -374,20 +376,25 @@ export default function StartPageSettings() {
                  >
                    Добавить видео
                  </Typography>
+                  {isMobile ? (
+                    <TooltipClickInfo title={"Можно загрузить видео."} />
+                  ) : (
                    <Tooltip title="Можно загрузить видео." placement="top">
                      <Box>
                        <InfoIcon />
                      </Box>
                    </Tooltip>
+                  )}
                </Box>
                <ButtonBase
                  component="label"
-                sx={{ justifyContent: "center",
+                  sx={{
+                    justifyContent: "center",
                    height: "48px",
                    width: "48px",
                    display: "flex",
                    alignItems: "center",
-                my: "20px"
+                    my: "20px",
                  }}
                >
                  <input
@ -399,7 +406,6 @@ export default function StartPageSettings() {
                        });
                        // setVideo(URL.createObjectURL(file));
                      }
-                
                    }}
                    hidden
                    accept=".mp4"
@ -414,10 +420,15 @@ export default function StartPageSettings() {
                    }}
                  />
                </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