Tochka
/
legacy
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor PsychTestQuestion

This commit is contained in:
b1ek 2023-05-17 09:43:37 +10:00
parent 5f0a52a8ba
commit 6725ac6966
Signed by: blek
GPG Key ID: 14546221E3595D0C
3 changed files with 93 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pairent_frontend_react/src/components/PsychTestForm/index.jsx
View File

@ -4,6 +4,8 @@ import PsychTestAddResult from "../../API/PsychTestAddResult";
import { useNavigate } from "react-router-dom";
import "./styles/PsychTestForm.css";
import { styled } from "styled-components";
const PsychTestForm = () => {
const [isValid, setIsValid] = useState(true);
const navigate = useNavigate();

107
pairent_frontend_react/src/components/PsychTestQuestion/index.jsx
View File

@ -1,17 +1,90 @@
import React, { useState } from "react";
import "./styles/PsychTestQuestion.css";
import { styled } from "styled-components";
const Question = styled.div`
padding-top: 4px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
width: 799px;
min-height: 151px;
border-bottom: 1px solid #cccccc;
margin-bottom: 34.5px;
& h2 {
color: #cccccc;
position: absolute;
top: 0px;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 2px solid #cccccc;
border-radius: 100px;
}
`;
const QuestionTitle = styled.p`
margin-bottom: 80px;
text-align: center;
width: 638px;
font-size: 16px;
margin-right: 0;
`;
const Answers = styled.div`
display: flex;
margin-bottom: 29.5px;
& p, & span {
font-size: 14px;
}
& input, & p {
margin-right: 32px;
transform: translateY(6px)
}
& label {
transform: translateY(6px)
}
`;
const Answer = styled.label`
& span {
position: absolute;
top: -17px;
left: 3.5px
}
`;
const Id = styled.div`
color: #cccccc;
position: absolute;
top: 0px;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid #b2b4b2;
border-radius: 100px;
`;
const PsychTestQuestion = (props) => {
const answerChangeHandler = (event) => {
props.onChangeAnswer(event.target.value, event.target.name);
};
return (
<div className="question">
<div className="question__account">{+props.account + 1}</div>
<p className="question__title">{props.name}</p>
<div className="question__answers">
<Question>
<Id>{+props.account + 1}</Id>
<QuestionTitle>{props.name}</QuestionTitle>
<Answers>
<p>Не важно</p>
<label className="question__answer">
<Answer>
<input
name={props.account}
type="radio"
@ -19,8 +92,8 @@ const PsychTestQuestion = (props) => {
onChange={answerChangeHandler}
/>
<span>1</span>
</label>
<label className="question__answer">
</Answer>
<Answer>
<input
name={props.account}
type="radio"
@ -28,8 +101,8 @@ const PsychTestQuestion = (props) => {
onChange={answerChangeHandler}
/>
<span>2</span>
</label>
<label className="question__answer">
</Answer>
<Answer>
<input
name={props.account}
type="radio"
@ -37,8 +110,8 @@ const PsychTestQuestion = (props) => {
onChange={answerChangeHandler}
/>
<span>3</span>
</label>
<label className="question__answer">
</Answer>
<Answer>
<input
name={props.account}
type="radio"
@ -46,8 +119,8 @@ const PsychTestQuestion = (props) => {
onChange={answerChangeHandler}
/>
<span>4</span>
</label>
<label className="question__answer">
</Answer>
<Answer>
<input
name={props.account}
type="radio"
@ -55,10 +128,10 @@ const PsychTestQuestion = (props) => {
onChange={answerChangeHandler}
/>
<span>5</span>
</label>
</Answer>
<p>Очень важно</p>
</div>
</div>
</Answers>
</Question>
);
};

4
pairent_frontend_react/vite.config.js
View File

@ -4,7 +4,5 @@ import react from '@vitejs/plugin-react'
export default {
plugins: [
react()
],
publicDir: 'static/dist',
],
}