adaptive

2023-08-02 23:20:53 +03:00 · 2023-08-02 23:20:53 +03:00 · 85773bd7af
commit 85773bd7af
parent 7d663cae09
7 changed files with 260 additions and 15 deletions
--- a/src/components/AuthBlock/authBlock.scss
+++ b/src/components/AuthBlock/authBlock.scss
@ -7,18 +7,20 @@
    display: flex;
    position: relative;

-    @media (max-width: 1024px) {
-      margin-top: 100px;
-    }
-
-    @media (max-width: 870px) {
+    @media (max-width: 1000px) {
      flex-direction: column;
      padding: 25px;
+      margin-top: 0;
+      padding: 0;
    }
  }

  &__info {
    margin-right: 115px;
+
+    @media (max-width: 1000px) {
+      order: 3;
+    }
    h3 {
      font-weight: 500;
      font-size: 30px;
@ -33,14 +35,21 @@
      font-size: 16px;
      line-height: 30px;

-      @media (max-width: 870px) {
+      @media (max-width: 1000px) {
        max-width: none;
-        margin-bottom: 15px;
+        margin: 15px 25px;
+      }
+
+      @media (max-width: 600px) {
+        font-size: 14px;
+        line-height: 22px;
      }
    }

-    @media (max-width: 870px) {
+    @media (max-width: 1000px) {
      margin-right: 0;
+      display: flex;
+      align-items: center;
    }
  }

@ -61,8 +70,8 @@
      font-size: 15px;
      line-height: 18px;

-      @media (max-width: 870px) {
-        max-width: 350px;
+      @media (max-width: 1000px) {
+        max-width: 550px;
      }
    }

@ -99,11 +108,25 @@
        font-weight: 500;
      }
    }
+
+    @media (max-width: 1000px) {
+      order: 2;
+      margin-bottom: 55px;
+    }
  }

  &__img {
    position: absolute;
    right: 48px;
    top: -90px;
+
+    @media (max-width: 1000px) {
+      order: 1;
+      position: inherit;
+      right: inherit;
+      top: inherit;
+      max-width: 115px;
+      margin-bottom: 35px;
+    }
  }
 }
--- a/src/components/Common/ModalLayout/modalLayout.scss
+++ b/src/components/Common/ModalLayout/modalLayout.scss
@ -70,6 +70,10 @@
      padding: 39px 10px 29px 10px;
    }
  }
+
+  .ck-editor {
+    width: 100%;
+  }
 }

 .modal-layout.active {
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
@ -720,7 +720,7 @@
        }
        span {
          font-size: 12px;
-          color: #1458DD;
+          color: #343a40;
          margin-left: 10px;
          font-weight: 500;
        }
--- a/src/pages/TrackerAuth/trackerAuth.scss
+++ b/src/pages/TrackerAuth/trackerAuth.scss
@ -10,6 +10,10 @@
      padding-top: 100px;
    }

+    @media (max-width: 1000px) {
+      background-color: white;
+    }
+
    .container {
      padding-bottom: 30px;
    }
@ -29,7 +33,21 @@
        right: 10px;
        max-width: 300px;

+        @media (max-width: 600px) {
+          max-width: 257px;
+          right: 0;
+        }
+
+        @media (max-width: 483px) {
+          max-width: 160px;
+          left: -175px;
+        }
      }
    }
+
+    @media (max-width: 600px) {
+      font-size: 24px;
+      margin-bottom: 25px;
+    }
  }
 }
--- a/src/pages/TrackerIntro/trackerIntro.scss
+++ b/src/pages/TrackerIntro/trackerIntro.scss
@ -3,6 +3,14 @@
    font-family: "LabGrotesque", sans-serif;
    background-color: #f1f1f1;
    color: #000000;
+
+    @media (max-width: 1375px) {
+      padding-top: 80px;
+    }
+
+    @media (max-width: 1200px) {
+      background-color: white;
+    }
  }

  &__intro {
@ -14,12 +22,33 @@
    &__img {
      max-width: 530px;
      max-height: 287px;
+
+      @media (max-width: 1100px) {
+        max-width: 35%;
+      }
+
+      @media (max-width: 800px) {
+        margin-top: 25px;
+        max-width: 350px;
+      }
+
+      @media (max-width: 450px) {
+        max-width: 280px;
+      }
    }

    &__info {
      display: flex;
      flex-direction: column;
      margin-right: 50px;
+
+      @media (max-width: 1100px) {
+        align-items: center;
+      }
+
+      @media (max-width: 800px) {
+        margin-right: 0;
+      }
    }

    &__suptitle {
@ -31,6 +60,10 @@
        font-weight: 500;
        font-size: 16px;
      }
+
+      @media (max-width: 1100px) {
+        display: none;
+      }
    }

    &__title {
@ -48,6 +81,30 @@
        bottom: -30px;
        right: 0;
        max-width: 405px;
+
+        @media (max-width: 1175px) {
+          max-width: none;
+          width: 100%;
+        }
+
+        @media (max-width: 800px) {
+          max-width: 250px;
+          left: 50%;
+          margin-left: -120px;
+        }
+      }
+
+      @media (max-width: 1100px) {
+        text-align: center;
+      }
+
+      @media (max-width: 800px) {
+        font-size: 28px;
+        display: block;
+      }
+
+      @media (max-width: 450px) {
+        margin-bottom: 55px;
      }
    }

@ -55,6 +112,27 @@
      font-size: 17px;
      font-weight: 500;
      margin-bottom: 105px;
+
+      @media (max-width: 1100px) {
+        text-align: center;
+        margin-bottom: 50px;
+      }
+
+      @media (max-width: 500px) {
+        display: none;
+      }
+    }
+
+    @media (max-width: 1200px) {
+      align-items: center;
+    }
+
+    @media (max-width: 800px) {
+      flex-direction: column;
+    }
+
+    @media (max-width: 800px) {
+      padding: 40px 0;
    }
  }

@ -87,10 +165,29 @@
      margin-bottom: 34px;
    }

+    .board {
+      width: 100%;
+    }
+
    .heard {
      position: absolute;
      bottom: -64px;
      left: 325px;
+
+      @media (max-width: 1320px) {
+        left: inherit;
+        right: 80px;
+        bottom: inherit;
+        top: 30px;
+      }
+
+      @media (max-width: 900px) {
+        max-width: 70px;
+      }
+
+      @media (max-width: 650px) {
+        display: none;
+      }
    }

    &__info {
@ -103,7 +200,27 @@
        font-weight: 500;
        max-width: 695px;
        margin-bottom: 30px;
+
+        @media (max-width: 700px) {
+          font-size: 20px;
+        }
      }
+
+      @media (max-width: 880px) {
+        width: 100%;
+        padding: 0 30px;
+        align-items: center;
+
+        p {
+          text-align: center;
+          max-width: none;
+          margin-bottom: 10px;
+        }
+      }
+    }
+
+    @media (max-width: 1000px) {
+      margin-bottom: 60px;
    }
  }

@ -132,6 +249,15 @@
        position: absolute;
        max-width: 311px;
        bottom: -28px;
+
+        @media (max-width: 650px) {
+          max-width: 196px;
+        }
+      }
+
+      @media (max-width: 650px) {
+        font-size: 24px;
+        margin-bottom: 65px;
      }
    }

@ -139,6 +265,11 @@
      display: flex;
      justify-content: space-between;
      width: 100%;
+
+      @media (max-width: 850px) {
+        flex-direction: column;
+        row-gap: 50px;
+      }
    }

    &__item {
@ -146,6 +277,10 @@
      flex-direction: column;
      max-width: 415px;

+      @media (max-width: 850px) {
+        max-width: none;
+      }
+
      &Head {
        display: flex;
        align-items: center;
@ -161,6 +296,12 @@
          height: 71px;
          color: #FFFFFF;
          font-size: 30px;
+
+          @media (max-width: 650px) {
+            width: 50px;
+            height: 50px;
+            font-size: 24px;
+          }
        }

        h3 {
@ -168,6 +309,15 @@
          font-size: 32px;
          font-weight: 500;
          margin-bottom: 0;
+
+          @media (max-width: 650px) {
+            margin-left: 26px;
+            font-size: 21px;
+          }
+        }
+
+        @media (max-width: 650px) {
+          margin-bottom: 26px;
        }
      }

@ -175,6 +325,10 @@
        font-size: 19px;
        font-weight: 500;
        line-height: 32px;
+
+        @media (max-width: 650px) {
+          font-size: 16px;
+        }
      }
    }
  }
--- a/src/pages/TrackerRegistration/TrackerRegistration.js
+++ b/src/pages/TrackerRegistration/TrackerRegistration.js
@ -34,14 +34,14 @@ export const TrackerRegistration = () => {
                <span>Ваше имя *</span>
                <input placeholder="Имя" />
              </div>
-              <div className="trackerRegistration__inputContainer">
-                <span>Придумайте пароль*</span>
-                <input placeholder="Пароль" />
-              </div>
              <div className="trackerRegistration__inputContainer">
                <span>Ваш email *</span>
                <input placeholder="Email" type="email" />
              </div>
+              <div className="trackerRegistration__inputContainer">
+                <span>Придумайте пароль*</span>
+                <input placeholder="Пароль" />
+              </div>
              <div className="trackerRegistration__inputContainer">
                <span>Повторите пароль*</span>
                <input placeholder="Повторите пароль" />
--- a/src/pages/TrackerRegistration/trackerRegistration.scss
+++ b/src/pages/TrackerRegistration/trackerRegistration.scss
@ -21,12 +21,26 @@
    background: #FFF;
    padding: 59px 115px 70px 102px;

+    @media (max-width: 1000px) {
+      display: flex;
+      flex-direction: column;
+      padding: 0;
+    }
+
    &__inputs {
      display: flex;
      flex-wrap: wrap;
      max-width: 650px;
      row-gap: 25px;
      column-gap: 44px;
+
+      @media (max-width: 1000px) {
+        order: 2;
+      }
+
+      @media (max-width: 6755px) {
+        margin-bottom: 35px;
+      }
    }

    &__submit {
@ -43,6 +57,16 @@
        border: none;
        margin-right: 165px;
      }
+
+      @media (max-width: 1000px) {
+        order: 3;
+      }
+
+      @media (max-width: 675px) {
+        flex-direction: column;
+        align-items: start;
+        row-gap: 35px;
+      }
    }

    &__info {
@ -50,6 +74,10 @@
      align-items: center;
      img {
        margin-right: 31px;
+
+        @media (max-width: 675px) {
+          margin-right: 27px;
+        }
      }

      p {
@ -58,6 +86,10 @@
        line-height: 22px;
        color: #000;
        max-width: 430px;
+
+        @media (max-width: 675px) {
+          font-size: 14px;
+        }
      }
    }

@ -65,6 +97,15 @@
      position: absolute;
      top: -100px;
      right: 58px;
+
+      @media (max-width: 1000px) {
+        position: inherit;
+        order: 1;
+        top: inherit;
+        right: inherit;
+        max-width: 115px;
+        margin-bottom: 25px;
+      }
    }
  }
  &__inputContainer {
@ -91,5 +132,10 @@
      font-size: 15px;
      color: #000;
    }
+
+    @media (max-width: 675px) {
+      margin-bottom: 0;
+      max-width: none;
+    }
  }
 }