finished report page
This commit is contained in:
parent
435d4fc5ad
commit
5be414307b
@ -1,6 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import style from './InputsComponent.module.css';
|
||||||
|
|
||||||
const InputsComponent = ({ inputsArr, deleteInput, remove, style }) =>
|
const InputsComponent = ({ inputsArr, deleteInput, remove }) =>
|
||||||
inputsArr.map((input) => (
|
inputsArr.map((input) => (
|
||||||
<form id={input} key={input} className={style.reportForm__form}>
|
<form id={input} key={input} className={style.reportForm__form}>
|
||||||
<span>{input}.</span>
|
<span>{input}.</span>
|
||||||
|
57
src/components/InputsComponent/InputsComponent.module.css
Normal file
57
src/components/InputsComponent/InputsComponent.module.css
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
.reportForm__form {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-left: 14px;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reportForm__form > span {
|
||||||
|
font-family: 'GT Eesti Pro Display';
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-align: left;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input__text,
|
||||||
|
.input__number {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input__text > input {
|
||||||
|
width: 460px;
|
||||||
|
height: 42px;
|
||||||
|
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #c4c4c4;
|
||||||
|
background-color: #ffffff;
|
||||||
|
outline: none;
|
||||||
|
font-size: 1.8em;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input__number > input {
|
||||||
|
width: 141px;
|
||||||
|
height: 42px;
|
||||||
|
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #c4c4c4;
|
||||||
|
background-color: #ffffff;
|
||||||
|
outline: none;
|
||||||
|
font-size: 1.8em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reportForm__form > img {
|
||||||
|
margin-top: 5px;
|
||||||
|
width: 23px;
|
||||||
|
height: 23px;
|
||||||
|
}
|
@ -48,7 +48,7 @@ const ReportForm = () => {
|
|||||||
<p className={style.text1}>Краткое описание задачи</p>
|
<p className={style.text1}>Краткое описание задачи</p>
|
||||||
<p className={style.text2}>Количество часов</p>
|
<p className={style.text2}>Количество часов</p>
|
||||||
</div>
|
</div>
|
||||||
<InputsComponent deleteInput={deleteInput} inputsArr={inputs} remove={remove} style={style} />
|
<InputsComponent deleteInput={deleteInput} inputsArr={inputs} remove={remove} />
|
||||||
<div className={style.reportForm__formAdd}>
|
<div className={style.reportForm__formAdd}>
|
||||||
<img onClick={addInput} src={addIcon} alt="" />
|
<img onClick={addInput} src={addIcon} alt="" />
|
||||||
<span>Добавить еще </span>
|
<span>Добавить еще </span>
|
||||||
|
@ -97,64 +97,6 @@
|
|||||||
margin-right: 86px;
|
margin-right: 86px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reportForm__form {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-left: 14px;
|
|
||||||
margin-bottom: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reportForm__form > span {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 2em;
|
|
||||||
font-weight: 700;
|
|
||||||
font-style: normal;
|
|
||||||
letter-spacing: normal;
|
|
||||||
text-align: left;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input__text,
|
|
||||||
.input__number {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input__text > input {
|
|
||||||
width: 460px;
|
|
||||||
height: 42px;
|
|
||||||
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 1px solid #c4c4c4;
|
|
||||||
background-color: #ffffff;
|
|
||||||
outline: none;
|
|
||||||
font-size: 1.8em;
|
|
||||||
padding-left: 20px;
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input__number > input {
|
|
||||||
width: 141px;
|
|
||||||
height: 42px;
|
|
||||||
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 1px solid #c4c4c4;
|
|
||||||
background-color: #ffffff;
|
|
||||||
outline: none;
|
|
||||||
font-size: 1.8em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reportForm__form > img {
|
|
||||||
margin-top: 5px;
|
|
||||||
width: 23px;
|
|
||||||
height: 23px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reportForm__formAdd {
|
.reportForm__formAdd {
|
||||||
margin-left: 28px;
|
margin-left: 28px;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user