sheptikhinv/survey-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix size components

Browse source
This commit is contained in:
Tatiana Nikolaeva 2025-06-02 23:15:01 +05:00
parent 08f827267d
commit e6e2f68eb0
32 changed files with 238 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

15
SurveyFrontend/src/api/CompletionApi.ts
View file

@ -1,7 +1,9 @@
import {BASE_URL, createRequestConfig, handleResponse, handleUnauthorizedError} from "./BaseApi.ts"; import {BASE_URL, createRequestConfig, handleResponse, handleUnauthorizedError} from "./BaseApi.ts";
export interface IAnswer{ export interface ICompletionRequest {
questionId: number; answers: Array<{
answerText: string; questionId: number;
answerText: string;
}>;
} }
export const getAllCompletions = async (surveyId: number) => { export const getAllCompletions = async (surveyId: number) => {
@ -22,14 +24,11 @@ export const getAllCompletions = async (surveyId: number) => {
} }
} }
export const addNewCompletion = async (surveyId: number, answer: IAnswer) => { export const addNewCompletion = async (surveyId: number, data: ICompletionRequest) => {
try{ try{
const response = await fetch(`${BASE_URL}/surveys/${surveyId}/completions`, { const response = await fetch(`${BASE_URL}/surveys/${surveyId}/completions`, {
...createRequestConfig('POST'), ...createRequestConfig('POST'),
body: JSON.stringify({ body: JSON.stringify(data)
questionId: answer.questionId,
answerText: answer.answerText,
})
}) })
if (!response.ok) { if (!response.ok) {
throw new Error(`Ошибка: ${response.status}`); throw new Error(`Ошибка: ${response.status}`);

9
SurveyFrontend/src/components/Account/Account.module.css
View file

@ -4,8 +4,8 @@
background-color: #F3F3F3; background-color: #F3F3F3;
border-radius: 40px; border-radius: 40px;
align-items: center; align-items: center;
padding: 4.58px 13px 4.58px 4.58px; padding: 2px 10px 2px 4.5px;
margin: 26px 33px 27px 0; margin: 15px 33px 15px 0;
margin-left: auto; margin-left: auto;
display: inline-flex; display: inline-flex;
max-width: 100%; max-width: 100%;
@ -18,7 +18,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
font-size: 24px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: black; color: black;
text-decoration: none; text-decoration: none;
@ -27,7 +27,6 @@
.accountImg{ .accountImg{
vertical-align: middle; vertical-align: middle;
width: 55px; width: 40px;
margin-right: 9px;
flex-shrink: 0; flex-shrink: 0;
} }

22
SurveyFrontend/src/components/Account/Account.tsx
View file

@ -11,28 +11,6 @@ const Account: React.FC<AccountProps> = ({ href }) => {
const [userName, setUserName] = useState<string>(); const [userName, setUserName] = useState<string>();
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
// useEffect(() => {
// const fetchUserData = async () => {
// try {
// const userData = localStorage.getItem("user");
//
// if (userData) {
// const parsedData = JSON.parse(userData);
// setUserName(`${parsedData.firstName} ${parsedData.lastName}`);
// } else {
// const data = await getCurrentUser();
// setUserName(`${data.firstName} ${data.lastName}`);
// }
// } catch (error) {
// console.error("Ошибка загрузки данных пользователя:", error);
// } finally {
// setIsLoading(false);
// }
// };
//
// fetchUserData();
// }, []);
useEffect(() => { useEffect(() => {
const fetchUserData = async () => { const fetchUserData = async () => {
try { try {

5
SurveyFrontend/src/components/AddAnswerButton/AddAnswerButton.module.css
View file

@ -3,15 +3,16 @@
.answerButton { .answerButton {
margin-top: 18px; margin-top: 18px;
display: flex; display: flex;
gap: 10px; gap: 8px;
align-items: center; align-items: center;
border: none; border: none;
background-color: white; background-color: white;
color: #3788D6; color: #3788D6;
font-size: 18px; font-size: 15px;
font-weight: 500; font-weight: 500;
} }
.addAnswerImg{ .addAnswerImg{
width: 12px;
vertical-align: middle; vertical-align: middle;
} }

7
SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.module.css
View file

@ -4,7 +4,7 @@
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 80px; margin-bottom: 40px;
align-items: center; align-items: center;
background-color: #F6F6F6; background-color: #F6F6F6;
border: none; border: none;
@ -12,12 +12,13 @@
} }
.questionButtonImg{ .questionButtonImg{
width: 54px; width: 40px;
align-items: center; align-items: center;
margin-bottom: -15px;
} }
.textButton{ .textButton{
font-size: 24px; font-size: 18px;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
} }

19
SurveyFrontend/src/components/AnswerOption/AnswerOption.module.css
View file

@ -4,18 +4,18 @@
width: 100%; width: 100%;
display: flex; display: flex;
gap: 10px; gap: 10px;
margin-bottom: 17px; margin-bottom: 7px;
align-items: flex-start; align-items: flex-start;
} }
.textAnswer { .textAnswer {
text-align: left; text-align: left;
border: none; border: none;
outline: none;
background: none; background: none;
font-size: 18px; font-size: 15px;
font-weight: 500; font-weight: 500;
word-break: break-word; word-break: break-word;
/*width: 70%;*/
padding: 0; padding: 0;
margin-right: 150px; margin-right: 150px;
line-height: 24px; line-height: 24px;
@ -39,20 +39,21 @@
} }
.answerIcon { .answerIcon {
width: 24px; width: 20px;
height: 24px; height: 20px;
display: block; display: block;
} }
.answerInput { .answerInput {
font-size: 18px; font-size: 15px;
font-weight: 500; font-weight: 500;
outline: none; outline: none;
border: none; border: none;
resize: none; resize: none;
width: 70%; width: 70%;
padding: 0; padding: 0;
margin-top: 2px; margin-top: 3px;
margin-bottom: -20px;
font-family: inherit; font-family: inherit;
min-height: 24px; min-height: 24px;
height: auto; height: auto;
@ -67,4 +68,8 @@
border: none; border: none;
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
}
.img{
width: 20px;
} }

2
SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
View file

@ -131,7 +131,7 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDe
{!isReadOnly && ( {!isReadOnly && (
<button className={styles.deleteButton} onClick={() => onDelete?.(index)}> <button className={styles.deleteButton} onClick={() => onDelete?.(index)}>
<Delete /> <Delete className={styles.img}/>
</button> </button>
)} )}
</div> </div>

4
SurveyFrontend/src/components/CompletingSurvey/CompletingSurvey.module.css
View file

@ -9,13 +9,13 @@
.departur_button{ .departur_button{
display: block; display: block;
margin: 10px auto; margin: 10px auto;
padding: 25px 50.5px; padding: 20px 40px;
border: none; border: none;
border-radius: 20px; border-radius: 20px;
background-color: #3788D6; background-color: #3788D6;
color: white; color: white;
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 18px;
text-align: center; text-align: center;
box-shadow: 0 0 7.4px 0 rgba(154, 202, 247, 1); box-shadow: 0 0 7.4px 0 rgba(154, 202, 247, 1);
box-sizing: border-box; box-sizing: border-box;

50
SurveyFrontend/src/components/CompletingSurvey/CompletingSurvey.tsx
View file

@ -2,12 +2,16 @@ import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
import QuestionsList, {Question} from "../QuestionsList/QuestionsList.tsx"; import QuestionsList, {Question} from "../QuestionsList/QuestionsList.tsx";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import styles from './CompletingSurvey.module.css' import styles from './CompletingSurvey.module.css'
import { useParams} from "react-router-dom"; import {useNavigate, useParams} from "react-router-dom";
import {getSurveyById, ISurvey} from "../../api/SurveyApi.ts"; import {getSurveyById, ISurvey} from "../../api/SurveyApi.ts";
import {getListQuestions} from "../../api/QuestionApi.ts"; import {getListQuestions} from "../../api/QuestionApi.ts";
import {getAnswerVariants, IAnswerVariant} from "../../api/AnswerVariantsApi.ts"; import {getAnswerVariants, IAnswerVariant} from "../../api/AnswerVariantsApi.ts";
import {addNewCompletion} from "../../api/CompletionApi.ts";
interface ISelectedAnswers{
questionId: number;
answerText: string;
}
export const CompletingSurvey = () => { export const CompletingSurvey = () => {
const {surveyId} = useParams<{surveyId: string}>(); const {surveyId} = useParams<{surveyId: string}>();
@ -16,6 +20,8 @@ export const CompletingSurvey = () => {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [selectedAnswers, setSelectedAnswers] = useState<ISelectedAnswers[]>([]);
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
const fetchSurveyData = async () => { const fetchSurveyData = async () => {
@ -51,6 +57,43 @@ export const CompletingSurvey = () => {
fetchSurveyData(); fetchSurveyData();
}, [surveyId]); }, [surveyId]);
const handleAnswerSelect = (questionId: number, answerText: string) => {
setSelectedAnswers(prev => {
const question = questions.find(q => q.id === questionId);
if (question?.questionType === 'SingleAnswerQuestion') {
return [
...prev.filter(a => a.questionId !== questionId),
{ questionId, answerText }
];
}
const existingAnswerIndex = prev.findIndex(
a => a.questionId === questionId && a.answerText === answerText
);
if (existingAnswerIndex >= 0) {
return prev.filter((_, index) => index !== existingAnswerIndex);
} else {
return [...prev, { questionId, answerText }];
}
});
};
const handleSubmit = async () => {
if (!surveyId) return;
try {
await addNewCompletion(parseInt(surveyId), {
answers: selectedAnswers
});
navigate('/surveys');
} catch (error) {
console.error('Ошибка при отправке ответов:', error);
alert('Произошла ошибка при отправке ответов');
}
};
if (loading) return <div>Загрузка...</div>; if (loading) return <div>Загрузка...</div>;
if (error) return <div>{error}</div>; if (error) return <div>{error}</div>;
if (!survey) return <div>Опрос не найден</div>; if (!survey) return <div>Опрос не найден</div>;
@ -67,8 +110,9 @@ export const CompletingSurvey = () => {
<QuestionsList <QuestionsList
questions={questions} questions={questions}
setQuestions={setQuestions} setQuestions={setQuestions}
onAnswerSelect={handleAnswerSelect}
/> />
<button className={styles.departur_button}>Отправить</button> <button className={styles.departur_button} onClick={handleSubmit} disabled={selectedAnswers.length === 0}>Отправить</button>
</div> </div>
) )
} }

5
SurveyFrontend/src/components/Header/Header.module.css
View file

@ -5,18 +5,19 @@
padding: 0; padding: 0;
width: 100%; width: 100%;
display: flex; display: flex;
height: fit-content;
} }
.pagesNav{ .pagesNav{
display: flex; display: flex;
gap: 60px; gap: 80px;
list-style: none; list-style: none;
align-items: center; align-items: center;
margin-right: 20%; margin-right: 20%;
} }
.pageLink{ .pageLink{
font-size: 24px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #2A6DAE; color: #2A6DAE;
padding: 0; padding: 0;

2
SurveyFrontend/src/components/Header/Header.tsx
View file

@ -15,7 +15,7 @@ const Header: React.FC = () => {
!location.pathname.startsWith('/survey/create'); !location.pathname.startsWith('/survey/create');
const handleLogoClick = () => { const handleLogoClick = () => {
navigate(location.pathname, { replace: true }); navigate(location.pathname);
}; };
return ( return (

26
SurveyFrontend/src/components/LoginForm/LoginForm.module.css
View file

@ -1,19 +1,19 @@
.loginContainer{ .loginContainer{
width: 31%; width: 26%;
height: fit-content;
background-color: #FFFFFF; background-color: #FFFFFF;
padding: 42.5px 65px; padding: 42.5px 65px;
margin: auto; margin: 0 auto;
border-radius: 43px; border-radius: 43px;
margin-bottom: 0;
} }
.title{ .title{
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
font-size: 40px; font-size: 30px;
line-height: 88%; line-height: 88%;
padding: 0; padding: 0;
margin-bottom: 80px; margin-bottom: 60px;
margin-top: 0; margin-top: 0;
} }
@ -21,12 +21,12 @@
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 80px; gap: 50px;
margin-bottom: 80px; margin-bottom: 40px;
} }
.input { .input {
font-size: 24px; font-size: 18px;
font-weight: 600; font-weight: 600;
line-height: 88%; line-height: 88%;
color: #000000; color: #000000;
@ -49,14 +49,14 @@
.errorMessage{ .errorMessage{
text-align: left; text-align: left;
font-size: 14px; font-size: 12px;
font-weight: 400; font-weight: 400;
line-height: 88%; line-height: 88%;
color: #C0231F; color: #C0231F;
} }
.input::placeholder { .input::placeholder {
font-size: 24px; font-size: 18px;
font-weight: 600; font-weight: 600;
line-height: 88%; line-height: 88%;
color: #000000; color: #000000;
@ -78,12 +78,12 @@
.signIn{ .signIn{
margin: auto; margin: auto;
padding: 26.5px 67px; padding: 20px 40px;
width: fit-content; width: fit-content;
border-radius: 24px; border-radius: 24px;
background-color: #3788D6; background-color: #3788D6;
color: #FFFFFF; color: #FFFFFF;
font-size: 24px; font-size: 20px;
font-weight: 600; font-weight: 600;
line-height: 120%; line-height: 120%;
border: none; border: none;
@ -92,7 +92,7 @@
.recommendation{ .recommendation{
text-align: center; text-align: center;
font-size: 18px; font-size: 15px;
font-weight: 500; font-weight: 500;
} }

10
SurveyFrontend/src/components/Logo/Logo.module.css
View file

@ -2,7 +2,11 @@
.logo { .logo {
padding: 0; padding: 0;
height: 52px; margin: 0 100px 0 40px;
width: 52px; display: flex;
margin: 31px 77px 25px 40px; align-items: center;
}
.logoImg{
outline: none;
width: 40px;
} }

2
SurveyFrontend/src/components/Logo/Logo.tsx
View file

@ -10,7 +10,7 @@ interface LogoProps {
const Logo: React.FC<LogoProps> = ({href, onClick}) => { const Logo: React.FC<LogoProps> = ({href, onClick}) => {
return ( return (
<a className={styles.logo} href={href} onClick={onClick}> <a className={styles.logo} href={href} onClick={onClick}>
<LogoImg/> <LogoImg className={styles.logoImg}/>
</a> </a>
); );
}; };

20
SurveyFrontend/src/components/MySurveyList/MySurveysList.module.css
View file

@ -12,7 +12,7 @@
background-color: white; background-color: white;
width: 79%; width: 79%;
border-radius: 14px; border-radius: 14px;
padding: 29px 36px 29px 54px; padding: 29px 36px 15px 54px;
margin-bottom: 23px; margin-bottom: 23px;
gap: 20px; gap: 20px;
border: none; border: none;
@ -35,6 +35,8 @@
.buttonDelete{ .buttonDelete{
border-radius: 8px; border-radius: 8px;
margin-top: 10px;
margin-left: 30px;
align-items: center; align-items: center;
background-color: #FFFFFF; background-color: #FFFFFF;
border: none; border: none;
@ -42,7 +44,7 @@
padding: 5px 3px; padding: 5px 3px;
color: black; color: black;
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 15px;
} }
.buttonDelete:hover{ .buttonDelete:hover{
@ -51,12 +53,13 @@
.imgDelete{ .imgDelete{
vertical-align: middle; vertical-align: middle;
width: 18px;
} }
.status { .status {
width: fit-content; width: fit-content;
height: fit-content; height: fit-content;
padding: 15px 47px; padding: 12px 35px;
border-radius: 15px; border-radius: 15px;
color: #FFFFFF; color: #FFFFFF;
white-space: nowrap; white-space: nowrap;
@ -65,30 +68,33 @@
.completed { .completed {
background-color: #B0B0B0; background-color: #B0B0B0;
font-size: 18px;
} }
.active { .active {
background-color: #65B953; background-color: #65B953;
font-size: 18px;
} }
.surveyData { .surveyData {
margin-bottom: 33px; margin-top: -15px;
margin-bottom: 15px;
} }
.title { .title {
font-size: 40px; font-size: 25px;
font-weight: 600; font-weight: 600;
word-break: break-word; word-break: break-word;
} }
.description { .description {
font-size: 24px; font-size: 17px;
font-weight: 500; font-weight: 500;
word-break: break-word; word-break: break-word;
} }
.date { .date {
font-size: 18px; font-size: 15px;
font-weight: 500; font-weight: 500;
color: #7D7983; color: #7D7983;
} }

4
SurveyFrontend/src/components/Navigation/Navigation.module.css
View file

@ -6,12 +6,12 @@
} }
.nav{ .nav{
margin: 34px 0 48px 40px; margin: 34px 0 0 60px;
background-color: white; background-color: white;
border-radius: 20px; border-radius: 20px;
} }
.navList{ .navList{
list-style: none; list-style: none;
padding: 52px 57px 70px 36px; padding: 32px 37px 40px 26px;
} }

5
SurveyFrontend/src/components/NavigationItem/NavigationItem.module.css
View file

@ -2,13 +2,14 @@
.navItem{ .navItem{
padding: 0; padding: 0;
margin-bottom: 42px; margin-bottom: 35px;
} }
.page{ .page{
background-color: white; background-color: white;
border: none; border: none;
font-size: 24px; outline: none;
font-size: 18px;
font-weight: 600; font-weight: 600;
color: #AFAFAF; color: #AFAFAF;
} }

19
SurveyFrontend/src/components/QuestionItem/QuestionItem.module.css
View file

@ -4,7 +4,7 @@
background-color: white; background-color: white;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 34px; margin-bottom: 20px;
padding: 27px 29px 26px 36px; padding: 27px 29px 26px 36px;
border-radius: 14px; border-radius: 14px;
} }
@ -22,15 +22,17 @@
} }
.questionTextarea{ .questionTextarea{
font-family: Monserrat, sans-serif;
width: 70%; width: 70%;
align-items: center; align-items: center;
border: none; border: none;
outline: none; outline: none;
resize: none; resize: none;
margin-bottom: 5px; margin-bottom: 24px;
font-size: 24px; margin-left: -2px;
font-size: 18px;
margin-top: -2px;
font-weight: 600; font-weight: 600;
line-height: 1.5;
overflow-y: hidden; overflow-y: hidden;
min-height: 1em; min-height: 1em;
} }
@ -44,11 +46,12 @@
} }
.textQuestion{ .textQuestion{
min-height: 1em;
margin-top: 0; margin-top: 0;
width: 100%; width: 100%;
font-size: 24px; font-size: 18px;
font-weight: 600; font-weight: 600;
margin-bottom: 35px; margin-bottom: 30px;
text-align: start; text-align: start;
word-break: break-word; word-break: break-word;
} }
@ -59,7 +62,7 @@
} }
.deleteQuestionButton{ .deleteQuestionButton{
font-size: 18px; font-size: 15px;
font-weight: 500; font-weight: 500;
color: #EC221F; color: #EC221F;
border: none; border: none;
@ -72,6 +75,6 @@
.basketImg{ .basketImg{
vertical-align: middle; vertical-align: middle;
width: 24px; width: 20px;
color: #EC221F; color: #EC221F;
} }

22
SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
View file

@ -24,6 +24,7 @@ interface QuestionItemProps {
initialQuestionType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion'; initialQuestionType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
onQuestionTypeChange: (type: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => void; onQuestionTypeChange: (type: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => void;
surveyId?: number; surveyId?: number;
onAnswerSelect?: (questionId: number, answerText: string) => void;
} }
const QuestionItem: React.FC<QuestionItemProps> = ({ const QuestionItem: React.FC<QuestionItemProps> = ({
@ -36,7 +37,8 @@ const QuestionItem: React.FC<QuestionItemProps> = ({
onDeleteQuestion, onDeleteQuestion,
initialQuestionType, initialQuestionType,
onQuestionTypeChange, onQuestionTypeChange,
surveyId surveyId,
onAnswerSelect
}) => { }) => {
const [textQuestion, setTextQuestion] = useState(initialTextQuestion); const [textQuestion, setTextQuestion] = useState(initialTextQuestion);
const [isEditingQuestion, setIsEditingQuestion] = useState(false); const [isEditingQuestion, setIsEditingQuestion] = useState(false);
@ -165,7 +167,25 @@ const QuestionItem: React.FC<QuestionItemProps> = ({
} }
}; };
// const toggleSelect = (index: number) => {
// if (initialQuestionType === 'SingleAnswerQuestion') {
// setSelectedAnswers([index]);
// } else {
// setSelectedAnswers(prev =>
// prev.includes(index)
// ? prev.filter(i => i !== index)
// : [...prev, index]
// );
// }
// };
const toggleSelect = (index: number) => { const toggleSelect = (index: number) => {
const answerText = initialAnswerVariants[index].text;
if (onAnswerSelect) {
onAnswerSelect(questionId, answerText);
}
if (initialQuestionType === 'SingleAnswerQuestion') { if (initialQuestionType === 'SingleAnswerQuestion') {
setSelectedAnswers([index]); setSelectedAnswers([index]);
} else { } else {

4
SurveyFrontend/src/components/QuestionsList/QuestionsList.tsx
View file

@ -9,6 +9,7 @@ interface QuestionsListProps {
questions: Question[]; questions: Question[];
setQuestions: (questions: Question[]) => void; setQuestions: (questions: Question[]) => void;
surveyId?: number; surveyId?: number;
onAnswerSelect?: (questionId: number, answerText: string) => void;
} }
export interface Question { export interface Question {
@ -21,7 +22,7 @@ export interface Question {
}>; }>;
} }
const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, surveyId}) => { const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, surveyId, onAnswerSelect}) => {
const isReadOnly = useRouteReadOnly(); const isReadOnly = useRouteReadOnly();
const handleAddQuestion = async () => { const handleAddQuestion = async () => {
@ -124,6 +125,7 @@ const QuestionsList: React.FC<QuestionsListProps> = ({questions, setQuestions, s
initialQuestionType={question.questionType} initialQuestionType={question.questionType}
onQuestionTypeChange={(type) => handleQuestionTypeChange(question.id, type)} onQuestionTypeChange={(type) => handleQuestionTypeChange(question.id, type)}
surveyId={surveyId} surveyId={surveyId}
onAnswerSelect={onAnswerSelect}
/> />
))} ))}
{!isReadOnly ? <AddQuestionButton onClick={handleAddQuestion} /> : ''} {!isReadOnly ? <AddQuestionButton onClick={handleAddQuestion} /> : ''}

28
SurveyFrontend/src/components/RegisterForm/RegisterForm.module.css
View file

@ -1,18 +1,19 @@
.registerContainer{ .registerContainer{
width: 31%; width: 26%;
height: fit-content;
background-color: #FFFFFF; background-color: #FFFFFF;
padding: 94px 80px; padding: 60px 50px;
margin: auto; margin: 0 auto;
border-radius: 43px; border-radius: 43px;
} }
.title{ .title{
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
font-size: 40px; font-size: 30px;
line-height: 88%; line-height: 88%;
padding: 0; padding: 0;
margin-bottom: 80px; margin-bottom: 60px;
margin-top: 0; margin-top: 0;
} }
@ -20,12 +21,12 @@
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 80px; gap: 50px;
margin-bottom: 80px; margin-bottom: 40px;
} }
.input { .input {
font-size: 24px; font-size: 18px;
font-weight: 600; font-weight: 600;
line-height: 88%; line-height: 88%;
color: #000000; color: #000000;
@ -37,7 +38,7 @@
} }
.input::placeholder { .input::placeholder {
font-size: 24px; font-size: 18px;
font-weight: 600; font-weight: 600;
line-height: 88%; line-height: 88%;
color: #000000; color: #000000;
@ -59,12 +60,12 @@
.signUp{ .signUp{
margin: auto; margin: auto;
padding: 25.5px 16px; padding: 22.5px 14px;
width: fit-content; width: fit-content;
border-radius: 24px; border-radius: 24px;
background-color: #3788D6; background-color: #3788D6;
color: #FFFFFF; color: #FFFFFF;
font-size: 24px; font-size: 20px;
font-weight: 600; font-weight: 600;
line-height: 120%; line-height: 120%;
border: none; border: none;
@ -73,8 +74,9 @@
.recommendation{ .recommendation{
text-align: center; text-align: center;
font-size: 18px; font-size: 14px;
font-weight: 500; font-weight: 500;
margin-bottom: 0;
} }
.recommendationLink{ .recommendationLink{
@ -94,7 +96,7 @@
.errorMessage{ .errorMessage{
text-align: left; text-align: left;
font-size: 14px; font-size: 12px;
font-weight: 400; font-weight: 400;
line-height: 88%; line-height: 88%;
color: #C0231F; color: #C0231F;

24
SurveyFrontend/src/components/Results/Results.module.css
View file

@ -9,7 +9,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: stretch; align-items: stretch;
margin: 30px 0; margin: 20px 0;
gap: 17px; gap: 17px;
} }
@ -17,7 +17,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 15px; border-radius: 15px;
min-height: 180px; min-height: 140px;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
@ -43,9 +43,9 @@
} }
.statItem h3 { .statItem h3 {
margin: 0 0 15px 0; margin: 0 0 0 0;
color: #FFFFFF; color: #FFFFFF;
font-size: 28px; font-size: 20px;
font-weight: 600; font-weight: 600;
line-height: 1.2; line-height: 1.2;
} }
@ -68,20 +68,20 @@
.countAnswer p, .countAnswer p,
.completion_percentage p { .completion_percentage p {
font-size: 60px; margin-bottom: -10px;
font-size: 35px;
} }
.imgGroup, .imgGroup,
.imgSend { .imgSend {
width: 58px; width: 43px;
height: 61px;
align-self: flex-end; align-self: flex-end;
} }
.status p { .status p {
text-align: center; text-align: center;
margin-top: auto; margin-top: auto;
font-size: 32px; font-size: 26px;
} }
.questionContainer { .questionContainer {
@ -106,13 +106,13 @@
.textContainer { .textContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 11px; gap: 5px;
width: 30%; width: 30%;
min-width: 250px; min-width: 250px;
} }
.questionContainer h3 { .questionContainer h3 {
font-size: 24px; font-size: 20px;
font-weight: 600; font-weight: 600;
color: #000000; color: #000000;
margin: 0; margin: 0;
@ -120,7 +120,7 @@
.answerCount { .answerCount {
color: #000000; color: #000000;
font-size: 18px; font-size: 16px;
font-weight: 600; font-weight: 600;
} }
@ -134,13 +134,11 @@
.pieContainer { .pieContainer {
width: 100%; width: 100%;
height: 450px;
position: relative; position: relative;
} }
.barContainer { .barContainer {
width: 100%; width: 100%;
height: 450px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

9
SurveyFrontend/src/components/Results/Results.tsx
View file

@ -15,7 +15,6 @@ ChartJS.register(
CategoryScale, LinearScale, BarElement, Title, ChartDataLabels, annotationPlugin CategoryScale, LinearScale, BarElement, Title, ChartDataLabels, annotationPlugin
); );
// Типы для данных
interface QuestionStats { interface QuestionStats {
questionText: string; questionText: string;
totalAnswers: number; totalAnswers: number;
@ -133,7 +132,7 @@ export const Results = () => {
xValue: i, xValue: i,
yValue: opt.percentage + 5, yValue: opt.percentage + 5,
content: `${opt.percentage}%`, content: `${opt.percentage}%`,
font: { size: 16, weight: 400 }, font: { size: 1, weight: 400 },
color: '#000' color: '#000'
})) }))
} }
@ -148,7 +147,7 @@ export const Results = () => {
ticks: { ticks: {
color: '#000000', color: '#000000',
font: { font: {
size: 16, size: 12,
weight: 400 weight: 400
} }
}, },
@ -178,7 +177,7 @@ export const Results = () => {
labels: { labels: {
color: '#000000', color: '#000000',
font: { font: {
size: 18, size: 12,
weight: 500 weight: 500
} }
} }
@ -191,7 +190,7 @@ export const Results = () => {
datalabels: { datalabels: {
formatter: (value) => `${value}%`, formatter: (value) => `${value}%`,
color: '#000', color: '#000',
font: { weight: 400, size: 16 } font: { weight: 400, size: 12 }
} }
}, },
animation: { animateRotate: true } animation: { animateRotate: true }

6
SurveyFrontend/src/components/SaveButton/SaveButton.module.css
View file

@ -2,14 +2,14 @@
.createSurveyButton { .createSurveyButton {
display: block; display: block;
margin: 10px auto; margin: 0 auto;
padding: 25px 50.5px; padding: 20px 35px;
border: none; border: none;
border-radius: 20px; border-radius: 20px;
background-color: #3788D6; background-color: #3788D6;
color: white; color: white;
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 18px;
text-align: center; text-align: center;
box-shadow: 0 0 7.4px 0 rgba(154, 202, 247, 1); box-shadow: 0 0 7.4px 0 rgba(154, 202, 247, 1);
box-sizing: border-box; box-sizing: border-box;

12
SurveyFrontend/src/components/SettingSurvey/SettingSurvey.module.css
View file

@ -14,27 +14,29 @@
.param{ .param{
border-radius: 4px; border-radius: 4px;
background-color: #FFFFFF; background-color: #FFFFFF;
padding-top: 15px; padding-top: 8px;
padding-bottom: 97px; padding-bottom: 60px;
padding-left: 19px; padding-left: 19px;
margin-bottom: 30px; margin-bottom: 30px;
} }
.param h2{ .param h2{
font-size: 24px; font-size: 18px;
font-weight: 600; font-weight: 600;
border-radius: 4px; border-radius: 4px;
} }
.copyButton { .copyButton {
padding: 10px 15px; padding: 10px 15px;
background-color: #4CAF50; /*background-color: #4CAF50;*/
background-color: #3788D6;
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
margin-bottom: 20px; display: block;
margin: 30px auto 15px;
} }
.copyButton:hover { .copyButton:hover {

2
SurveyFrontend/src/components/SettingSurvey/SettingSurvey.tsx
View file

@ -52,7 +52,7 @@ const SettingSurvey: React.FC = () => {
<h2>Параметры видимости</h2> <h2>Параметры видимости</h2>
</div> </div>
<SaveButton onClick={() => {}}/> <SaveButton onClick={() => {}}/>
<button onClick={handleCopyLink} className={styles.copyButton}>Копировать ссылку</button> {!isSettingCreatePage ? <button onClick={handleCopyLink} className={styles.copyButton}>Копировать ссылку</button> : ''}
</div> </div>
) )
} }

36
SurveyFrontend/src/components/SurveyInfo/SurveyInfo.module.css
View file

@ -5,33 +5,29 @@
padding: 0; padding: 0;
width: 100%; width: 100%;
margin-top: 34px; margin-top: 34px;
margin-bottom: 49px; margin-bottom: 30px;
border-radius: 14px; border-radius: 14px;
/*min-height: 191px;*/
/*max-height: 100vh;*/
max-height: fit-content; max-height: fit-content;
} }
.info{ .info{
min-width: 373px; min-width: 300px;
/*display: block;*/ padding: 20px 35px;
padding: 35px; display: flex;
display: flex; /* Добавляем flex */ flex-direction: column;
flex-direction: column; /* Элементы в колонку */
align-items: center; align-items: center;
} }
.titleSurvey{ .titleSurvey{
min-height: 60px;
width: 80%; width: 80%;
display: block; display: block;
border: none; border: none;
margin: 0 auto 13px; margin: 0 auto 13px;
background-color: white; background-color: white;
text-align: center; text-align: center;
font-size: 20px; font-size: 26px;
font-weight: 600; font-weight: 600;
/*margin-bottom: 23px;*/
/*margin-bottom: 15px;*/
word-break: break-word; word-break: break-word;
padding: 0; padding: 0;
} }
@ -52,7 +48,9 @@
} }
.textareaTitle { .textareaTitle {
font-size: 32px; margin-top: 15px;
margin-bottom: -2px;
font-size: 26px;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
line-height: 1.2; line-height: 1.2;
@ -60,11 +58,12 @@
} }
.textareaDescrip { .textareaDescrip {
font-size: 18px; font-size: 16px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
line-height: 1.4; line-height: 1.4;
min-height: 24px; min-height: 24px;
margin-bottom: -3px;
} }
.descriptionWrapper { .descriptionWrapper {
@ -74,8 +73,9 @@
} }
.description { .description {
min-height: 24px;
border: none; border: none;
font-size: 24px; font-size: 16px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
background-color: white; background-color: white;
@ -87,7 +87,7 @@
} }
.desc{ .desc{
font-size: 24px; font-size: 20px;
font-weight: 500; font-weight: 500;
background-color: white; background-color: white;
max-width: 80%; max-width: 80%;
@ -105,12 +105,12 @@
.descButtonImg{ .descButtonImg{
vertical-align: middle; vertical-align: middle;
width: 28px; width: 20px;
} }
.textButton{ .textButton{
vertical-align: middle; vertical-align: middle;
font-size: 24px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #7D7983; color: #7D7983;
padding: 10px; padding: 10px;
@ -118,7 +118,7 @@
.createdAt{ .createdAt{
text-align: center; text-align: center;
font-size: 18px; font-size: 15px;
font-weight: 500; font-weight: 500;
color: #7D7983; color: #7D7983;
} }

12
SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx
View file

@ -92,15 +92,13 @@ const SurveyInfo: React.FC<SurveyInfoProps> = ({titleSurvey, setDescriptionSurve
const renderTitle = () => { const renderTitle = () => {
if (isReadOnly) { if (isReadOnly) {
return ( return (
<button className={styles.titleSurvey}> <button className={styles.titleSurvey}>{titleSurvey || 'Название опроса'}</button>
<h1>{titleSurvey || 'Название опроса'}</h1>
</button>
) )
} }
if (showNewTitleField) { if (showNewTitleField) {
return ( return (
<h1 className={styles.titleSurvey}> // <h1 className={styles.titleSurvey}>
<TextareaAutosize <TextareaAutosize
className={styles.textareaTitle} className={styles.textareaTitle}
ref={titleTextareaRef} ref={titleTextareaRef}
@ -110,14 +108,12 @@ const SurveyInfo: React.FC<SurveyInfoProps> = ({titleSurvey, setDescriptionSurve
onKeyDown={handleTitleKeyDown} onKeyDown={handleTitleKeyDown}
onBlur={handleTitleBlur} onBlur={handleTitleBlur}
/> />
</h1> // </h1>
); );
} }
return ( return (
<button className={styles.titleSurvey} onClick={handleAddNewTitleClick}> <button className={styles.titleSurvey} onClick={handleAddNewTitleClick}>{titleSurvey || 'Название опроса'}</button>
<h1>{titleSurvey || 'Название опроса'}</h1>
</button>
); );
}; };

2
SurveyFrontend/src/components/SurveyPage/SurveyPage.module.css
View file

@ -6,5 +6,5 @@
color: #C0231F; color: #C0231F;
text-align: center; text-align: center;
margin: 10px 0; margin: 10px 0;
font-size: 18px; font-size: 15px;
} }

13
SurveyFrontend/src/components/TimeEvent/TimeEvent.module.css
View file

@ -3,7 +3,7 @@
.timeEvent{ .timeEvent{
width: 44%; width: 44%;
padding: 17px 25px 48px 20px; padding: 8px 25px 28px 20px;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 6px; border-radius: 6px;
margin-bottom: 34px; margin-bottom: 34px;
@ -11,7 +11,7 @@
.title{ .title{
font-weight: 600; font-weight: 600;
font-size: 24px; font-size: 18px;
margin-bottom: 23px; margin-bottom: 23px;
} }
@ -24,8 +24,9 @@
.inputDate{ .inputDate{
width: fit-content; width: fit-content;
border: 3px solid #007AFF26; border: 3px solid #007AFF26;
padding: 12px 40px 12px 21px; padding: 8px 25px 8px 21px;
font-size: 20px; font-family: inherit;
font-size: 15px;
font-weight: 400; font-weight: 400;
border-radius: 3px; border-radius: 3px;
} }
@ -33,8 +34,8 @@
.inputTime{ .inputTime{
width: fit-content; width: fit-content;
border: 3px solid #007AFF26; border: 3px solid #007AFF26;
padding: 12px 22px; padding: 8px 25px;
font-size: 20px; font-size: 15px;
font-weight: 400; font-weight: 400;
border-radius: 3px; border-radius: 3px;
} }

10
SurveyFrontend/src/components/TypeDropdown/TypeDropdown.module.css
View file

@ -1,6 +1,7 @@
/*TypeDropdown.module.css*/ /*TypeDropdown.module.css*/
.dropdownContainer { .dropdownContainer {
margin-top: -5px;
width: 23%; width: 23%;
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -12,7 +13,7 @@
border: 1px solid #000000; border: 1px solid #000000;
border-radius: 19px; border-radius: 19px;
padding: 9px 7px 7px 10px; padding: 9px 7px 7px 10px;
font-size: 16px; font-size: 13px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -25,7 +26,6 @@
.selectedTypeIcon { .selectedTypeIcon {
margin-right: 4px; margin-right: 4px;
width: 22px;
} }
.dropdownArrow { .dropdownArrow {
@ -33,7 +33,7 @@
} }
.dropdownList { .dropdownList {
width: 70%; width: 85%;
margin-top: 11px; margin-top: 11px;
position: absolute; position: absolute;
background-color: #fff; background-color: #fff;
@ -58,13 +58,11 @@
.dropdownItemIcon { .dropdownItemIcon {
margin-right: 5px; margin-right: 5px;
width: 24px;
} }
.selectedTypeIcon, .selectedTypeIcon,
.dropdownItemIcon { .dropdownItemIcon {
width: 20px; width: 17px;
height: 20px;
margin-right: 5px; margin-right: 5px;
vertical-align: middle; vertical-align: middle;
} }

7
SurveyFrontend/src/pages/AuthForm/AuthForm.module.css
View file

@ -2,11 +2,14 @@
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
background-color: #F6F6F6; background-color: #F6F6F6;
padding: 61.5px 0; padding: 50px 0;
} }
.pageLogin{ .pageLogin{
min-height: 80vh;
width: 100%; width: 100%;
background-color: #F6F6F6; background-color: #F6F6F6;
padding: 157px 0; padding: 100px 0;
display: flex;
justify-content: center;
} }