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";
export interface IAnswer{
questionId: number;
answerText: string;
export interface ICompletionRequest {
answers: Array<{
questionId: number;
answerText: string;
}>;
}
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{
const response = await fetch(`${BASE_URL}/surveys/${surveyId}/completions`, {
...createRequestConfig('POST'),
body: JSON.stringify({
questionId: answer.questionId,
answerText: answer.answerText,
})
body: JSON.stringify(data)
})
if (!response.ok) {
throw new Error(`Ошибка: ${response.status}`);

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

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

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

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

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

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

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

@ -4,18 +4,18 @@
width: 100%;
display: flex;
gap: 10px;
margin-bottom: 17px;
margin-bottom: 7px;
align-items: flex-start;
}
.textAnswer {
text-align: left;
border: none;
outline: none;
background: none;
font-size: 18px;
font-size: 15px;
font-weight: 500;
word-break: break-word;
/*width: 70%;*/
padding: 0;
margin-right: 150px;
line-height: 24px;
@ -39,20 +39,21 @@
}
.answerIcon {
width: 24px;
height: 24px;
width: 20px;
height: 20px;
display: block;
}
.answerInput {
font-size: 18px;
font-size: 15px;
font-weight: 500;
outline: none;
border: none;
resize: none;
width: 70%;
padding: 0;
margin-top: 2px;
margin-top: 3px;
margin-bottom: -20px;
font-family: inherit;
min-height: 24px;
height: auto;
@ -68,3 +69,7 @@
background-color: transparent;
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 && (
<button className={styles.deleteButton} onClick={() => onDelete?.(index)}>
<Delete />
<Delete className={styles.img}/>
</button>
)}
</div>

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

@ -9,13 +9,13 @@
.departur_button{
display: block;
margin: 10px auto;
padding: 25px 50.5px;
padding: 20px 40px;
border: none;
border-radius: 20px;
background-color: #3788D6;
color: white;
font-weight: 700;
font-size: 24px;
font-size: 18px;
text-align: center;
box-shadow: 0 0 7.4px 0 rgba(154, 202, 247, 1);
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 {useEffect, useState} from "react";
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 {getListQuestions} from "../../api/QuestionApi.ts";
import {getAnswerVariants, IAnswerVariant} from "../../api/AnswerVariantsApi.ts";
import {addNewCompletion} from "../../api/CompletionApi.ts";
interface ISelectedAnswers{
questionId: number;
answerText: string;
}
export const CompletingSurvey = () => {
const {surveyId} = useParams<{surveyId: string}>();
@ -16,6 +20,8 @@ export const CompletingSurvey = () => {
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [selectedAnswers, setSelectedAnswers] = useState<ISelectedAnswers[]>([]);
const navigate = useNavigate();
useEffect(() => {
const fetchSurveyData = async () => {
@ -51,6 +57,43 @@ export const CompletingSurvey = () => {
fetchSurveyData();
}, [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 (error) return <div>{error}</div>;
if (!survey) return <div>Опрос не найден</div>;
@ -67,8 +110,9 @@ export const CompletingSurvey = () => {
<QuestionsList
questions={questions}
setQuestions={setQuestions}
onAnswerSelect={handleAnswerSelect}
/>
<button className={styles.departur_button}>Отправить</button>
<button className={styles.departur_button} onClick={handleSubmit} disabled={selectedAnswers.length === 0}>Отправить</button>
</div>
)
}

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

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

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

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

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

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

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

@ -2,7 +2,11 @@
.logo {
padding: 0;
height: 52px;
width: 52px;
margin: 31px 77px 25px 40px;
margin: 0 100px 0 40px;
display: flex;
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}) => {
return (
<a className={styles.logo} href={href} onClick={onClick}>
<LogoImg/>
<LogoImg className={styles.logoImg}/>
</a>
);
};

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

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

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

@ -6,12 +6,12 @@
}
.nav{
margin: 34px 0 48px 40px;
margin: 34px 0 0 60px;
background-color: white;
border-radius: 20px;
}
.navList{
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{
padding: 0;
margin-bottom: 42px;
margin-bottom: 35px;
}
.page{
background-color: white;
border: none;
font-size: 24px;
outline: none;
font-size: 18px;
font-weight: 600;
color: #AFAFAF;
}

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

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

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

@ -24,6 +24,7 @@ interface QuestionItemProps {
initialQuestionType: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion';
onQuestionTypeChange: (type: 'SingleAnswerQuestion' | 'MultipleAnswerQuestion') => void;
surveyId?: number;
onAnswerSelect?: (questionId: number, answerText: string) => void;
}
const QuestionItem: React.FC<QuestionItemProps> = ({
@ -36,7 +37,8 @@ const QuestionItem: React.FC<QuestionItemProps> = ({
onDeleteQuestion,
initialQuestionType,
onQuestionTypeChange,
surveyId
surveyId,
onAnswerSelect
}) => {
const [textQuestion, setTextQuestion] = useState(initialTextQuestion);
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 answerText = initialAnswerVariants[index].text;
if (onAnswerSelect) {
onAnswerSelect(questionId, answerText);
}
if (initialQuestionType === 'SingleAnswerQuestion') {
setSelectedAnswers([index]);
} else {

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

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

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

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

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

@ -9,7 +9,7 @@
display: flex;
justify-content: space-between;
align-items: stretch;
margin: 30px 0;
margin: 20px 0;
gap: 17px;
}
@ -17,7 +17,7 @@
display: flex;
flex-direction: column;
border-radius: 15px;
min-height: 180px;
min-height: 140px;
padding: 20px;
box-sizing: border-box;
position: relative;
@ -43,9 +43,9 @@
}
.statItem h3 {
margin: 0 0 15px 0;
margin: 0 0 0 0;
color: #FFFFFF;
font-size: 28px;
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
@ -68,20 +68,20 @@
.countAnswer p,
.completion_percentage p {
font-size: 60px;
margin-bottom: -10px;
font-size: 35px;
}
.imgGroup,
.imgSend {
width: 58px;
height: 61px;
width: 43px;
align-self: flex-end;
}
.status p {
text-align: center;
margin-top: auto;
font-size: 32px;
font-size: 26px;
}
.questionContainer {
@ -106,13 +106,13 @@
.textContainer {
display: flex;
flex-direction: column;
gap: 11px;
gap: 5px;
width: 30%;
min-width: 250px;
}
.questionContainer h3 {
font-size: 24px;
font-size: 20px;
font-weight: 600;
color: #000000;
margin: 0;
@ -120,7 +120,7 @@
.answerCount {
color: #000000;
font-size: 18px;
font-size: 16px;
font-weight: 600;
}
@ -134,13 +134,11 @@
.pieContainer {
width: 100%;
height: 450px;
position: relative;
}
.barContainer {
width: 100%;
height: 450px;
display: flex;
justify-content: 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
);
// Типы для данных
interface QuestionStats {
questionText: string;
totalAnswers: number;
@ -133,7 +132,7 @@ export const Results = () => {
xValue: i,
yValue: opt.percentage + 5,
content: `${opt.percentage}%`,
font: { size: 16, weight: 400 },
font: { size: 1, weight: 400 },
color: '#000'
}))
}
@ -148,7 +147,7 @@ export const Results = () => {
ticks: {
color: '#000000',
font: {
size: 16,
size: 12,
weight: 400
}
},
@ -178,7 +177,7 @@ export const Results = () => {
labels: {
color: '#000000',
font: {
size: 18,
size: 12,
weight: 500
}
}
@ -191,7 +190,7 @@ export const Results = () => {
datalabels: {
formatter: (value) => `${value}%`,
color: '#000',
font: { weight: 400, size: 16 }
font: { weight: 400, size: 12 }
}
},
animation: { animateRotate: true }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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