перенос заголовков при переполнении

This commit is contained in:
Tamara 2024-02-15 04:20:35 +03:00
parent 63b28e0f03
commit 051e9ee4ac
14 changed files with 18 additions and 15 deletions

@ -180,6 +180,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
m: "20px 0", m: "20px 0",
fontSize: "28px", fontSize: "28px",
color: theme.palette.text.primary, color: theme.palette.text.primary,
wordBreak: "break-word"
}} }}
> >
{settings.cfg.formContact.title || {settings.cfg.formContact.title ||
@ -192,6 +193,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
textAlign: "center", textAlign: "center",
m: "20px 0", m: "20px 0",
fontSize: "18px", fontSize: "18px",
wordBreak: "break-word"
}} }}
> >
{settings.cfg.formContact.desc} {settings.cfg.formContact.desc}

@ -27,7 +27,7 @@ export const Date = ({ currentQuestion }: DateProps) => {
return ( return (
<Box> <Box>
<Typography variant="h5" color={theme.palette.text.primary}> <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>
{currentQuestion.title} {currentQuestion.title}
</Typography> </Typography>
<Box <Box

@ -34,7 +34,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
return ( return (
<Box> <Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography> <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<RadioGroup <RadioGroup
name={currentQuestion.id} name={currentQuestion.id}
value={currentQuestion.content.variants.findIndex( value={currentQuestion.content.variants.findIndex(

@ -184,7 +184,7 @@ export const File = ({ currentQuestion }: FileProps) => {
return ( return (
<> <>
<Box> <Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography> <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",

@ -31,7 +31,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
return ( return (
<Box> <Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography> <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<RadioGroup <RadioGroup
name={currentQuestion.id} name={currentQuestion.id}
value={currentQuestion.content.variants.findIndex( value={currentQuestion.content.variants.findIndex(

@ -353,7 +353,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
return ( return (
<Box> <Box>
<Typography variant="h5" color={theme.palette.text.primary}> <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>
{currentQuestion.title} {currentQuestion.title}
</Typography> </Typography>
<Box <Box

@ -12,8 +12,8 @@ export const Page = ({ currentQuestion }: PageProps) => {
return ( return (
<Box> <Box>
<Typography variant="h5" sx={{ paddingBottom: "25px", color: theme.palette.text.primary }}>{currentQuestion.title}</Typography> <Typography variant="h5" sx={{ paddingBottom: "25px", color: theme.palette.text.primary }} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<Typography color={theme.palette.text.primary}>{currentQuestion.content.text}</Typography> <Typography color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.content.text}</Typography>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",

@ -71,7 +71,7 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
return ( return (
<Box> <Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography> <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<Box <Box
sx={{ sx={{
display: "inline-flex", display: "inline-flex",

@ -24,7 +24,7 @@ export const Select = ({ currentQuestion }: SelectProps) => {
return ( return (
<Box> <Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography> <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",

@ -37,7 +37,7 @@ export const Text = ({ currentQuestion }: TextProps) => {
}, 400); }, 400);
return ( return (
<Box> <Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography> <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",

@ -68,7 +68,7 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
return ( return (
<Box> <Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography> <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<Box sx={{ display: "flex", gap: "20px", <Box sx={{ display: "flex", gap: "20px",
flexDirection: isMobile ? "column-reverse" : undefined, alignItems: isMobile ? "center" : undefined}}> flexDirection: isMobile ? "column-reverse" : undefined, alignItems: isMobile ? "center" : undefined}}>
<Group <Group

@ -39,7 +39,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
return ( return (
<Box> <Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography> <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
<Box sx={{ <Box sx={{
display: "flex", display: "flex",
marginTop: "20px", marginTop: "20px",

@ -135,7 +135,8 @@ export const Select = ({
padding: "10px", padding: "10px",
borderRadius: "5px", borderRadius: "5px",
color: colorPlaceholder, color: colorPlaceholder,
whiteSpace: "normal" whiteSpace: "normal",
wordBreak: "break-word"
}} }}
> >
{item} {item}

@ -8,8 +8,8 @@ import useSWR from "swr";
import QuizAnswerer from "../lib/components/QuizAnswerer"; import QuizAnswerer from "../lib/components/QuizAnswerer";
import { ApologyPage } from "../lib/components/ViewPublicationPage/ApologyPage"; import { ApologyPage } from "../lib/components/ViewPublicationPage/ApologyPage";
const defaultQuizId = "0c568ac9-d176-491b-b6cd-5afd31254951"; // branching //const defaultQuizId = "0c568ac9-d176-491b-b6cd-5afd31254951"; // branching
//const defaultQuizId = "9ed8d0e9-d355-4fc1-8b89-4f962e3efc52"; //looooong header const defaultQuizId = "d7c940fe-1e44-41a0-bbac-5f304c51a1e4"; //looooong header
// const defaultQuizId = "ad7f5a87-b833-4f5b-854e-453706ed655c"; // linear // const defaultQuizId = "ad7f5a87-b833-4f5b-854e-453706ed655c"; // linear
export default function App() { export default function App() {