finished report page
This commit is contained in:
parent
435d4fc5ad
commit
5be414307b
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import style from './InputsComponent.module.css';
|
||||
|
||||
const InputsComponent = ({ inputsArr, deleteInput, remove, style }) =>
|
||||
const InputsComponent = ({ inputsArr, deleteInput, remove }) =>
|
||||
inputsArr.map((input) => (
|
||||
<form id={input} key={input} className={style.reportForm__form}>
|
||||
<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.text2}>Количество часов</p>
|
||||
</div>
|
||||
<InputsComponent deleteInput={deleteInput} inputsArr={inputs} remove={remove} style={style} />
|
||||
<InputsComponent deleteInput={deleteInput} inputsArr={inputs} remove={remove} />
|
||||
<div className={style.reportForm__formAdd}>
|
||||
<img onClick={addInput} src={addIcon} alt="" />
|
||||
<span>Добавить еще </span>
|
||||
|
@ -97,64 +97,6 @@
|
||||
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 {
|
||||
margin-left: 28px;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user