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

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

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