From 74009f60d6fb3e3f25f698bd4bf858e4b980b583 Mon Sep 17 00:00:00 2001
From: Victor Batischev <office@edoldnr.ru>
Date: Wed, 20 Dec 2023 19:44:03 +0300
Subject: [PATCH] reports adaptive

---
 src/components/ReportForm/ReportForm.jsx  | 13 ++--
 src/components/ReportForm/reportForm.scss | 75 ++++++++++-------------
 2 files changed, 39 insertions(+), 49 deletions(-)

diff --git a/src/components/ReportForm/ReportForm.jsx b/src/components/ReportForm/ReportForm.jsx
index 89baa399..3482c29e 100644
--- a/src/components/ReportForm/ReportForm.jsx
+++ b/src/components/ReportForm/ReportForm.jsx
@@ -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)}
                 />
diff --git a/src/components/ReportForm/reportForm.scss b/src/components/ReportForm/reportForm.scss
index db534bc4..5c185a7c 100644
--- a/src/components/ReportForm/reportForm.scss
+++ b/src/components/ReportForm/reportForm.scss
@@ -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;
+        }
+      }
     }
   }
 }