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

styles for navigation and survey info

Browse source
This commit is contained in:
Tatiana Nikolaeva 2025-04-05 19:31:48 +05:00
parent 1bc96d830e
commit 2cbfb06b4a
30 changed files with 199 additions and 555 deletions
Download patch file Download diff file Expand all files Collapse all files

2
SurveyFrontend/src/App.css
View file

@ -1,3 +1,3 @@
body{
#root {
width: 100%;
}

9
SurveyFrontend/src/App.tsx
View file

@ -1,11 +1,12 @@
// import { useState } from 'react'
import React from 'react';
import './App.css'
import Questions from "./pages/Questions.tsx";
import Questions from './pages/Questions.tsx'
const App: React.FC = () => {
return (
<Questions />
);
)
}
export default App
export default App

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

@ -1,10 +1,24 @@
/*Account.module.css*/
.account {
padding: 0;
margin: 31px 39px 25px 0;
width: 15%;
background-color: #F3F3F3;
border-radius: 40px;
align-items: center;
padding: 4.58px 13px 4.58px 4.58px;
margin: 26px 33px 27px 0;
}
.accountText{
font-size: 24px;
font-weight: 600;
color: black;
width: 100%;
text-decoration: none;
}
.accountImg{
vertical-align: middle;
width: 55px;
margin-right: 9px;
}

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

@ -1,7 +1,5 @@
/// <reference types="vite-plugin-svgr/client" />
import React from 'react';
import styles from './Account.module.css'
import AccountSvg from '../../../public/account.svg?react'
interface AccountProps {
href: string;
@ -10,9 +8,9 @@ interface AccountProps {
const Account: React.FC<AccountProps> = ({href, user}) => {
return (
<div>
<a className={styles.account} href={href}>
<AccountSvg className={styles.accountImg}/>
<div className={styles.account}>
<a className={styles.accountText} href={href}>
<img src='../../../public/account.svg' className={styles.accountImg} alt='account'/>
{user}
</a>
</div>

5
SurveyFrontend/src/components/AddAnswerButton/AddAnswerButton.tsx
View file

@ -1,7 +1,6 @@
import React from "react";
import styles from './AddAnswerButton.module.css'
import AddAnswerSvg from '../../../public/add_answer.svg?react'
interface AddAnswerButtonProps {
onClick(): void;
@ -10,8 +9,8 @@ interface AddAnswerButtonProps {
const AddAnswerButton: React.FC<AddAnswerButtonProps> = ({onClick}) => {
return (
<button className={styles.answerButton} onClick={onClick}>
Добавить вариант ответа
<AddAnswerSvg className={styles.addAnswerImg} />
Добавить вариант ответа {' '}
<img src='../../../public/add_answer.svg' className={styles.addAnswerImg} alt="add answer"/>
</button>
);
};

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

@ -1,18 +1,24 @@
/*AddQuestionButton.module.css*/
.questionButton{
background-color: #F6F6F6;
font-size: 24px;
font-weight: 600;
border: none;
margin: 104px auto 80px;
display: block;
margin: 0 auto;
display: flex;
flex-direction: column;
margin-bottom: 80px;
align-items: center;
background-color: #F6F6F6;
border: none;
outline: none;
}
.questionButtonImg{
vertical-align: middle;
margin: 0 auto;
margin-bottom: 16px;
width: 54px;
align-items: center;
}
.textButton{
font-size: 24px;
font-weight: 600;
text-align: center;
}

5
SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.tsx
View file

@ -1,6 +1,5 @@
import React from "react";
import styles from './AddQuestionButton.module.css'
import AddQuestionSvg from '../../../public/add_question.svg?react'
interface AddQuestionButtonProps {
onClick: () => void;
@ -9,8 +8,8 @@ interface AddQuestionButtonProps {
const AddQuestionButton: React.FC<AddQuestionButtonProps> = ({onClick}) => {
return (
<button className={styles.questionButton} onClick={onClick}>
<AddQuestionSvg className={styles.questionButtonImg} />
Добавить вопрос
<img src='../../../public/add_question.svg' className={styles.questionButtonImg} alt='add question' />
<span className={styles.textButton}>Добавить вопрос</span>
</button>
);
};

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

@ -50,16 +50,15 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({src, index, value, onChange}
return (
<div className={styles.answer}>
{/*<div className={styles.answerIconContainer}> <Icon className={styles.answerIcon}/></div>*/}
<img className={styles.answerIcon} src={src} alt="" />
{isEditing ? (
<textarea className={styles.answerInput}
ref={textAreaRef}
value={currentValue}
onChange={handleTextareaChange}
onKeyDown={handleKeyDown}
onBlur={handleBlur}
placeholder={`Ответ ${index}`}
ref={textAreaRef}
value={currentValue}
onChange={handleTextareaChange}
onKeyDown={handleKeyDown}
onBlur={handleBlur}
placeholder={`Ответ ${index}`}
/>
) : (
<button className={styles.textAnswer} onClick={handleSpanClick}>

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

@ -4,9 +4,7 @@ import Account from "../Account/Account.tsx";
import styles from './Header.module.css'
import SurveyPagesList from "../SurveyPagesList/SurveyPagesList.tsx";
interface HeaderProps {}
const Header: React.FC<HeaderProps> = () => {
const Header: React.FC = () => {
const [activePage, setActivePage] = useState('Создать опрос');
const handlePageClick = (name: string)=> {

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

@ -4,5 +4,5 @@
padding: 0;
height: 52px;
width: 52px;
margin: 31px auto 25px 40px;
margin: 31px 77px 25px 40px;
}

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

@ -1,6 +1,5 @@
import React from "react";
import styles from './Logo.module.css'
import LogoSvg from '../../../public/logo.svg?react'
interface LogoProps {
href: string;
@ -9,7 +8,7 @@ interface LogoProps {
const Logo: React.FC<LogoProps> = ({href}) => {
return (
<a className={styles.logo} href={href}>
<LogoSvg />
<img src='../../../public/logo.svg' alt="" />
</a>
);
};

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

@ -1,3 +1,5 @@
/*MainComponent.module.css*/
.mainPage{
width: 100%;
display: flex;

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

@ -1,5 +1,10 @@
/*Navigation.module.css*/
.navContainer{
display: flex;
flex-direction: column;
}
.nav{
margin: 34px 0 48px 40px;
background-color: white;

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

@ -12,7 +12,7 @@ const Navigation: React.FC<NavigationProps> = ({onNavigationClick, activePage})
const items: string[] = ['Вопросы', 'Настройки', 'Результаты']
return (
<div>
<div className={styles.navContainer}>
<nav className={styles.nav}>
<ul className={styles.navList}>
{items.map(item => (

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

@ -1,12 +1,18 @@
/*NavigationItem.module.css*/
.navItem{
font-weight: 600;
font-size: 24px;
color: #AFAFAF;
padding: 0;
margin-bottom: 42px;
}
.page{
background-color: white;
border: none;
font-size: 24px;
font-weight: 600;
color: #AFAFAF;
}
.active{
text-decoration: underline 2px #556FB7;
color: #000000;

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

@ -1,12 +1,22 @@
/*PageSurvey.module.css*/
.pagesSurveyItem{
align-items: center;
}
.pageSurvey{
font-size: 24px;
font-weight: 600;
color: #2A6DAE;
padding: 0;
border: none;
background-color: #ffffff;
padding-bottom: 5px;
white-space: nowrap;
}
.active{
color: #000000;
text-decoration: underline;
text-decoration-color: #3881C8;
}

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

@ -11,4 +11,4 @@
.questionCard:last-child{
margin-bottom: 0;
}
}

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

@ -4,9 +4,6 @@ import AddAnswerButton from "../AddAnswerButton/AddAnswerButton.tsx";
import TypeDropdown from "../TypeDropdown/TypeDropdown.tsx";
import styles from './QuestionItem.module.css'
import SingleChoiceIcon from '../../../public/radio_button_checked.svg?react';
import MultiplyChoiceIcon from '../../../public/check_box.svg?react';
interface QuestionItemProps {
indexQuestion: number;
@ -44,7 +41,9 @@ const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQu
{answerOption.map((answerText, index) => (
<AnswerOption
key={index}
src={questionType === "single" ? <SingleChoiceIcon /> : <MultiplyChoiceIcon />}
src={questionType === "single" ?
'../../../public/radio_button_checked.svg' :
'../../../public/check_box.svg' }
index={index + 1} // Индекс ответа
value={answerText}
onChange={(value) => handleAnswerChange(index, value)}

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

@ -11,4 +11,5 @@
font-size: 24px;
text-align: center;
box-shadow: 0 0 7.4px 0 rgba(154, 202, 247, 1);
box-sizing: border-box;
}

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

@ -7,49 +7,64 @@
margin-top: 34px;
margin-bottom: 49px;
border-radius: 14px;
height: 191px;
min-height: 191px;
}
.info{
min-width: 373px;
display: block;
padding: 35px 0;
padding: 35px; /*подумать нужно ли справа слева отступы*/
}
.titleSurvey{
resize: none;
display: block;
border: none;
margin: 0 auto;
background-color: white;
text-align: center;
margin: 0;
padding: 0 20px;
font-size: 40px;
font-size: 20px;
font-weight: 600;
margin-bottom: 23px;
word-break: break-word;
padding: 0;
}
.textareaTitle{
width: 80%;
padding-top: 35px;
resize: none;
text-align: center;
font-size: 40px;
font-weight: 600;
margin: 0;
padding: 0;
border: none;
margin-bottom: 23px;
outline: none;
line-height: 30px;
word-break: break-word;
}
.description{
resize: none;
text-align: center;
margin: 0;
padding: 0 20px;
border: none;
font-size: 24px;
font-weight: 500;
text-align: center;
background-color: white;
display: block;
margin: 0 auto;
word-break: break-word;
padding: 0;
}
.textareaDescrip{
width: 80%;
outline: none;
border: none;
resize: none;
text-align: center;
margin: 0;
margin: 0 auto;
font-size: 22px;
font-weight: 500;
word-break: break-word;
padding: 0;
}
.descripButton{
@ -60,11 +75,12 @@
}
.descButtonImg{
vertical-align: middle;
width: 28px;
}
.textButton{
vertical-align: center;
vertical-align: middle;
font-size: 24px;
font-weight: 500;
color: #7D7983;

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

@ -1,15 +1,13 @@
import React, {useState} from "react";
import React, {useState, useRef, useEffect} from "react";
import styles from './SurveyInfo.module.css'
import DescripButtonSvg from '../../../public/add_circle.svg?react'
interface SurveyInfoProps {}
const SurveyInfo: React.FC<SurveyInfoProps> = () => {
const SurveyInfo: React.FC = () => {
const [descriptionSurvey, setDescriptionSurvey] = useState('');
const [titleSurvey, setTitleSurvey] = useState('Название опроса');
const [showDescriptionField, setShowDescriptionField] = useState(false);
const [showNewTitleField, setShowNewTitleField] = useState(false);
const titleTextareaRef = useRef<HTMLTextAreaElement>(null);
const descriptionTextareaRef = useRef<HTMLTextAreaElement>(null);
const handleDescriptionChange = (descripEvent: React.ChangeEvent<HTMLTextAreaElement>) => {
setDescriptionSurvey(descripEvent.target.value);
@ -23,10 +21,22 @@ const SurveyInfo: React.FC<SurveyInfoProps> = () => {
setShowNewTitleField(true);
}
useEffect(() => {
if (showNewTitleField && titleTextareaRef.current) {
titleTextareaRef.current.focus();
}
}, [showNewTitleField]);
const handleAddDescriptionClick = () => {
setShowDescriptionField(true);
}
useEffect(() => {
if (showDescriptionField && descriptionTextareaRef.current){
descriptionTextareaRef.current.focus();
}
}, [showDescriptionField]);
const handleTitleKeyDown = (titleClickEnter: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (titleClickEnter.key === 'Enter'){
titleClickEnter.preventDefault();
@ -45,22 +55,34 @@ const SurveyInfo: React.FC<SurveyInfoProps> = () => {
setShowDescriptionField(true);
}
const handleTitleBlur = () => {
setShowNewTitleField(false);
};
const handleDescriptionBlur = () => {
setShowDescriptionField(false);
};
const renderDescription = ()=> {
if (descriptionSurvey && !showDescriptionField) {
return (
<button className={styles.description} onClick={handleParagraphClick}>
<p>{descriptionSurvey}</p>
{descriptionSurvey}
</button>
);
} else if (showDescriptionField) {
return (
<p className={styles.description}>
<textarea
className={styles.textareaDescrip}
value={descriptionSurvey}
onChange={handleDescriptionChange}
onKeyDown={handleDescriptionKeyDown}
/>
<textarea
ref={descriptionTextareaRef}
className={styles.textareaDescrip}
value={descriptionSurvey}
placeholder={'Добавить описание'}
onChange={handleDescriptionChange}
onKeyDown={handleDescriptionKeyDown}
onBlur={handleDescriptionBlur}
/>
</p>
);
} else {
@ -70,7 +92,7 @@ const SurveyInfo: React.FC<SurveyInfoProps> = () => {
onClick={handleAddDescriptionClick}
>
<span className={styles.textButton}>Добавить описание</span>
<DescripButtonSvg className={styles.descButtonImg}/>
<img src='../../../public/add_circle.svg' className={styles.descButtonImg} alt='add circle'/>
</button>
);
}
@ -83,14 +105,17 @@ const SurveyInfo: React.FC<SurveyInfoProps> = () => {
showNewTitleField ? (
<h1 className={styles.titleSurvey}>
<textarea className={styles.textareaTitle}
value={titleSurvey}
onChange={handleNewTitleChange}
onKeyDown={handleTitleKeyDown}
ref={titleTextareaRef}
value={titleSurvey === 'Название опроса' ? '' : titleSurvey}
placeholder={'Название опроса'}
onChange={handleNewTitleChange}
onKeyDown={handleTitleKeyDown}
onBlur={handleTitleBlur}
/>
</h1>
) : (
<button className={styles.titleSurvey} onClick={handleAddNewTitleClick}>
<h1>{titleSurvey}</h1>
<h1>{titleSurvey || 'Название опроса'}</h1>
</button>
)
}

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

@ -1,7 +1,9 @@
/*SurveyPagesList.module.css*/
.listSurveyPages{
display: flex;
gap: 61px;
list-style: none;
align-items: center;
margin-right: 900px;
margin-right: 40%;
}

10
SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx
View file

@ -58,11 +58,11 @@ const TypeDropdown: React.FC = () => {
<li>
<button onClick={() => handleSelect("single")}
className={styles.dropdownItem}>
<img
className={styles.dropdownItemIcon}
src={getImage("single")}
alt=""/>{' '}
Одиночный выбор
<img
className={styles.dropdownItemIcon}
src={getImage("single")}
alt=""/>{' '}
Одиночный выбор
</button>
</li>
<li>

16
SurveyFrontend/src/index.css
View file

@ -0,0 +1,16 @@
:root {
font-family: Monserrat, sans-serif;
line-height: 100%;
font-weight: 600;
font-size: 24px;
color: #000000;
background-color: white;
}
body {
margin: 0;
display: flex;
place-items: center;
width: 100%;
}

6
SurveyFrontend/src/main.tsx
View file

@ -4,7 +4,7 @@ import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
<StrictMode>
<App />
</StrictMode>,
)

13
SurveyFrontend/src/pages/Questions.tsx
View file

@ -1,13 +1,14 @@
import React from 'react';
import Header from '../components/Header/Header.tsx'
import MainComponents from '../components/MainComponent/MainComponent.tsx'
import MainComponent from "../components/MainComponent/MainComponent.tsx";
const Questions = () => {
const QuestionsPages: React.FC = () => {
return (
<>
<Header />
<MainComponents />
<MainComponent />
</>
);
};
)
}
export default Questions;
export default QuestionsPages;