ограничения и перенос для заголовков и юр информации

This commit is contained in:
Tamara 2024-02-11 18:35:45 +03:00
parent 5106fab97d
commit 92ec43c651
7 changed files with 40 additions and 12 deletions

@ -5,7 +5,8 @@ import QuizAnswerer from "./QuizAnswerer";
import { QuizIdContext } from "./contexts/QuizIdContext";
import { RootContainerWidthContext } from "./contexts/RootContainerWidthContext";
const defaultQuizId = "45ef7f9c-784d-4e58-badb-f6b337f08ba0"; // branching
// const defaultQuizId = "45ef7f9c-784d-4e58-badb-f6b337f08ba0"; // branching
const defaultQuizId = "48471ba0-a639-4be2-91e3-50149c4b73af"; //looooong header
// const defaultQuizId = "a9d31460-132a-4479-a3f0-90241498b6f9"; // linear
export default function App() {

@ -43,7 +43,7 @@ export const Question = ({
return (
<Box sx={{
backgroundColor: theme.palette.background.default,
height: isMobile ? undefined : "100%"
height: isMobile ? "100%" : "100vh"
}}>
<Box sx={{
height: "calc(100% - 75px)",

@ -77,6 +77,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
fontWeight: 700,
m: "20px 0",
color: theme.palette.text.primary,
wordBreak: "break-word"
}}
>
{resultQuestion.description}
@ -87,6 +88,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
sx={{
m: "20px 0",
color: theme.palette.text.primary,
wordBreak: "break-word"
}}
>
{resultQuestion.title}
@ -99,6 +101,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
sx={{
fontSize: "18px",
m: "20px 0",
wordBreak: "break-word",
color: theme.palette.text.primary,
}}
>
@ -162,7 +165,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
variant="contained"
sx={{
p: "10px 20px",
width: "210px",
width: "auto",
height: "50px",
}}
>
@ -174,7 +177,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
<Button
href={resultQuestion.content.redirect}
variant="contained"
sx={{ p: "10px 20px", width: "210px", height: "50px" }}
sx={{ p: "10px 20px", width: "auto", height: "50px" }}
>
{resultQuestion.content.hint.text || "Перейти на сайт"}
</Button>

@ -116,7 +116,15 @@ export const StartPageViewPublication = () => {
>{settings.cfg.info.orgname}</Typography>
</Box>
<Link mb="16px" href={settings.cfg.info.site}>
<Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
<Typography
sx={{
fontSize: "16px",
color: theme.palette.primary.main,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
maxWidth: "300px"
}}>
{settings.cfg.info.site}
</Typography>
</Link>
@ -189,7 +197,7 @@ export const StartPageViewPublication = () => {
alignItems: "center",
justifyContent: "space-between",
width: "100%",
flexDirection: isMobile ? "column" : "row"
flexDirection: "column"
}}
>
<Box sx={{ maxWidth: "300px" }}>
@ -215,7 +223,10 @@ export const StartPageViewPublication = () => {
<Typography sx={{
width: "100%",
overflowWrap: "break-word",
fontSize: "12px", textAlign: "end",
fontSize: "12px",
textAlign: "end",
maxHeight: "120px",
overflow: "auto",
color:
settings.cfg.startpageType === "expanded" && !isMobile
? "white"
@ -284,7 +295,9 @@ function QuizPreviewLayoutByType({
justifyContent: "space-between",
alignItems: "flex-start",
p: "25px",
height: "80%"
height: "80%",
overflowY: "auto",
overflowX: "hidden"
}}
>
{quizHeaderBlock}

@ -109,7 +109,7 @@ const UPLOAD_FILE_DESCRIPTIONS_MAP: Record<
},
video: {
title: "Добавить видео",
description: "Принимает .mp4 и .mov формат — максимум 10б",
description: "Принимает .mp4 и .mov формат — максимум 5б",
},
audio: { title: "Добавить аудиофайл", description: "Принимает аудиофайлы" },
document: { title: "Добавить документ", description: "Принимает документы" },

@ -8,7 +8,7 @@ import {
TextField as MuiTextField,
Typography,
useTheme,
TextFieldProps,
TextFieldProps, useMediaQuery,
} from "@mui/material";
import { FC, useEffect } from "react";
@ -48,6 +48,7 @@ type VariantItemProps = {
export const Variant = ({ currentQuestion }: VariantProps) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(650));
const { answers, ownVariants } = useQuizViewStore();
const { answer } =
answers.find(
@ -68,7 +69,8 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
<Box sx={{ display: "flex" }}>
<Box sx={{ display: "flex", gap: "20px",
flexDirection: isMobile ? "column-reverse" : undefined, }}>
<Group
name={currentQuestion.id.toString()}
value={currentQuestion.content.variants.findIndex(

@ -77,7 +77,10 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
display: "flex",
margin: isMobile ? 0 : undefined,
"& .MuiFormControlLabel-label": {
wordBreak: "break-word"
wordBreak: "break-word",
height: variant.answer.length <= 60 ? undefined : "60px",
overflow: "auto",
paddingLeft: "45px",
}
}}
value={index}
@ -153,6 +156,12 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
) : (
<BlankImage />
)
) : currentQuestion.content.back !== " " ? (
<img
src={currentQuestion.content.back}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>
) : (currentQuestion.content.replText !== " " && currentQuestion.content.replText.length > 0) ? currentQuestion.content.replText : variant?.extendedText || isMobile ? (
"Выберите вариант ответа ниже"
) : (