apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

reports adaptive

Browse Source
This commit is contained in:
Victor Batischev 2023-12-20 19:44:03 +03:00
parent 68c6aa5327
commit 74009f60d6
2 changed files with 39 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/ReportForm/ReportForm.jsx
View File

@ -190,9 +190,10 @@ const ReportForm = () => {
key={`input__${index}`}
className="report-form__task-form"
>
<div className="report-form__task-number">{index + 1}.</div>
{/* <div className="report-form__task-number">{index + 1}.</div> */}
<div className="report-form__task-input report-form__task-input--description">
<textarea
spellCheck={false}
value={inputs[index].task}
className={
!input.task && reportSuccess === "Заполните задачи"
@ -200,7 +201,6 @@ const ReportForm = () => {
: ""
}
name="text"
type="text"
onChange={(e) =>
setInputs(
inputs.map((input, inputIndex) => {
@ -227,6 +227,7 @@ const ReportForm = () => {
name="number"
type="number"
min="1"
max="24"
onChange={(e) =>
setInputs(
inputs.map((input, inputIndex) => {
@ -270,8 +271,8 @@ const ReportForm = () => {
<img src={ellipse} alt="" />
<span>Какие сложности возникли?</span>
</div>
<input
type="text"
<textarea
spellCheck={false}
value={troublesInputValue}
onChange={(e) => setTroublesInputValue(e.target.value)}
/>
@ -279,8 +280,8 @@ const ReportForm = () => {
<img src={ellipse} alt="" />
<span>Что планируется сделать завтра?</span>
</div>
<input
type="text"
<textarea
spellCheck={false}
value={scheduledInputValue}
onChange={(e) => setScheduledInputValue(e.target.value)}
/>

75
src/components/ReportForm/reportForm.scss
View File

@ -57,7 +57,7 @@
text-align: left;
@media (max-width: 555px) {
font-size: 2.5em;
font-size: 2.4em;
}
}
@ -73,8 +73,9 @@
margin-bottom: 5px;
@media (max-width: 555px) {
margin-top: 25px;
margin-bottom: 10px;
margin-top: 15px;
margin-bottom: 0px;
font-size: 1.9em;
}
}
}
@ -89,19 +90,17 @@
display: flex;
align-items: center;
font-family: "GT Eesti Pro Display";
font-size: 13px;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
font-size: 15px;
font-weight: 500;
padding-top: 2px;
cursor: pointer;
img {
width: 20px;
height: 20px;
margin-left: 20px;
margin-right: 20px;
margin-right: 10px;
margin-top: -2px;
}
}
@ -122,12 +121,8 @@
& > span {
color: #18586e;
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-size: 1.9em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
}
img {
@ -142,7 +137,6 @@
display: flex;
justify-content: flex-start;
margin-top: 20px;
margin-left: 50px;
p {
font-family: "GT Eesti Pro Display";
@ -165,20 +159,20 @@
//}
&--hours {
margin-left: 310px;
margin-left: 300px;
@media (max-width: 810px) {
margin-left: 100px;
}
@media (max-width: 610px) {
margin-left: 25px;
margin-left: 85px;
}
}
}
&-remove {
margin-left: 20px;
margin-left: 12px;
display: flex;
align-items: center;
@ -192,14 +186,12 @@
&-form {
display: flex;
align-items: center;
margin-left: 20px;
margin-bottom: 15px;
}
&-input {
display: flex;
flex-direction: column;
margin-left: 20px;
&--description {
.checkTask {
@ -214,16 +206,16 @@
border: 1px solid #c4c4c4;
background-color: #ffffff;
outline: none;
font-size: 1.8em;
padding-left: 20px;
padding-right: 20px;
font-size: 1.5em;
padding: 2px 8px;
@media (max-width: 810px) {
width: 250px;
}
@media (max-width: 610px) {
width: 150px;
font-size: 1.3em;
width: 230px;
}
}
}
@ -234,7 +226,7 @@
}
@media (max-width: 450px) {
margin-left: 22px;
margin-left: 0px;
}
.checkTask {
@ -251,6 +243,7 @@
outline: none;
font-size: 1.8em;
text-align: center;
margin-left: 20px;
@media (max-width: 500px) {
width: 100px;
@ -269,7 +262,7 @@
}
&__form-add {
margin-left: 28px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
@ -300,19 +293,17 @@
}
&__input-box {
input {
margin-left: 10px;
textarea {
margin-top: 10px;
margin-bottom: 20px;
width: 460px;
height: 42px;
height: 84px;
box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
border-radius: 5px;
border: 1px solid #c4c4c4;
background-color: #ffffff;
font-size: 1.8em;
padding-left: 20px;
padding-right: 20px;
font-size: 1.5em;
padding: 2px 8px;
outline: none;
@media (max-width: 610px) {
@ -325,19 +316,15 @@
&__tasks,
&__troubles,
&__scheduled {
margin-top: 40px;
margin-top: 10px;
display: flex;
align-items: center;
span {
color: #18586e;
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-size: 1.9em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: 16.81px;
text-align: left;
}
img {
@ -352,7 +339,6 @@
display: flex;
flex-direction: column-reverse;
align-items: center;
margin-top: 20px;
&-btn {
width: 166px;
@ -407,15 +393,12 @@
position: relative;
display: flex;
justify-content: space-between;
margin-left: 14px;
margin-bottom: 14px;
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;
@ -489,6 +472,12 @@
max-width: 141px;
}
}
&-list {
img {
display: none;
}
}
}
}
}