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

adaptive

Browse Source
This commit is contained in:
Николай Полтщук 2023-08-02 23:20:53 +03:00
parent 7d663cae09
commit 85773bd7af
7 changed files with 260 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/AuthBlock/authBlock.scss
View File

@ -7,18 +7,20 @@
display: flex; display: flex;
position: relative; position: relative;
@media (max-width: 1024px) { @media (max-width: 1000px) {
margin-top: 100px;
}
@media (max-width: 870px) {
flex-direction: column; flex-direction: column;
padding: 25px; padding: 25px;
margin-top: 0;
padding: 0;
} }
} }
&__info { &__info {
margin-right: 115px; margin-right: 115px;
@media (max-width: 1000px) {
order: 3;
}
h3 { h3 {
font-weight: 500; font-weight: 500;
font-size: 30px; font-size: 30px;
@ -33,14 +35,21 @@
font-size: 16px; font-size: 16px;
line-height: 30px; line-height: 30px;
@media (max-width: 870px) { @media (max-width: 1000px) {
max-width: none; 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; margin-right: 0;
display: flex;
align-items: center;
} }
} }
@ -61,8 +70,8 @@
font-size: 15px; font-size: 15px;
line-height: 18px; line-height: 18px;
@media (max-width: 870px) { @media (max-width: 1000px) {
max-width: 350px; max-width: 550px;
} }
} }
@ -99,11 +108,25 @@
font-weight: 500; font-weight: 500;
} }
} }
@media (max-width: 1000px) {
order: 2;
margin-bottom: 55px;
}
} }
&__img { &__img {
position: absolute; position: absolute;
right: 48px; right: 48px;
top: -90px; top: -90px;
@media (max-width: 1000px) {
order: 1;
position: inherit;
right: inherit;
top: inherit;
max-width: 115px;
margin-bottom: 35px;
}
} }
} }

4
src/components/Common/ModalLayout/modalLayout.scss
View File

@ -70,6 +70,10 @@
padding: 39px 10px 29px 10px; padding: 39px 10px 29px 10px;
} }
} }
.ck-editor {
width: 100%;
}
} }
.modal-layout.active { .modal-layout.active {

2
src/components/Modal/Tracker/ModalTicket/modalTicket.scss
View File

@ -720,7 +720,7 @@
} }
span { span {
font-size: 12px; font-size: 12px;
color: #1458DD; color: #343a40;
margin-left: 10px; margin-left: 10px;
font-weight: 500; font-weight: 500;
} }

18
src/pages/TrackerAuth/trackerAuth.scss
View File

@ -10,6 +10,10 @@
padding-top: 100px; padding-top: 100px;
} }
@media (max-width: 1000px) {
background-color: white;
}
.container { .container {
padding-bottom: 30px; padding-bottom: 30px;
} }
@ -29,7 +33,21 @@
right: 10px; right: 10px;
max-width: 300px; 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;
}
}
} }

154
src/pages/TrackerIntro/trackerIntro.scss
View File

@ -3,6 +3,14 @@
font-family: "LabGrotesque", sans-serif; font-family: "LabGrotesque", sans-serif;
background-color: #f1f1f1; background-color: #f1f1f1;
color: #000000; color: #000000;
@media (max-width: 1375px) {
padding-top: 80px;
}
@media (max-width: 1200px) {
background-color: white;
}
} }
&__intro { &__intro {
@ -14,12 +22,33 @@
&__img { &__img {
max-width: 530px; max-width: 530px;
max-height: 287px; 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 { &__info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-right: 50px; margin-right: 50px;
@media (max-width: 1100px) {
align-items: center;
}
@media (max-width: 800px) {
margin-right: 0;
}
} }
&__suptitle { &__suptitle {
@ -31,6 +60,10 @@
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
} }
@media (max-width: 1100px) {
display: none;
}
} }
&__title { &__title {
@ -48,6 +81,30 @@
bottom: -30px; bottom: -30px;
right: 0; right: 0;
max-width: 405px; 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-size: 17px;
font-weight: 500; font-weight: 500;
margin-bottom: 105px; 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; margin-bottom: 34px;
} }
.board {
width: 100%;
}
.heard { .heard {
position: absolute; position: absolute;
bottom: -64px; bottom: -64px;
left: 325px; 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 { &__info {
@ -103,8 +200,28 @@
font-weight: 500; font-weight: 500;
max-width: 695px; max-width: 695px;
margin-bottom: 30px; 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;
}
} }
&__info { &__info {
@ -132,6 +249,15 @@
position: absolute; position: absolute;
max-width: 311px; max-width: 311px;
bottom: -28px; 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; display: flex;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
@media (max-width: 850px) {
flex-direction: column;
row-gap: 50px;
}
} }
&__item { &__item {
@ -146,6 +277,10 @@
flex-direction: column; flex-direction: column;
max-width: 415px; max-width: 415px;
@media (max-width: 850px) {
max-width: none;
}
&Head { &Head {
display: flex; display: flex;
align-items: center; align-items: center;
@ -161,6 +296,12 @@
height: 71px; height: 71px;
color: #FFFFFF; color: #FFFFFF;
font-size: 30px; font-size: 30px;
@media (max-width: 650px) {
width: 50px;
height: 50px;
font-size: 24px;
}
} }
h3 { h3 {
@ -168,6 +309,15 @@
font-size: 32px; font-size: 32px;
font-weight: 500; font-weight: 500;
margin-bottom: 0; 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-size: 19px;
font-weight: 500; font-weight: 500;
line-height: 32px; line-height: 32px;
@media (max-width: 650px) {
font-size: 16px;
}
} }
} }
} }

8
src/pages/TrackerRegistration/TrackerRegistration.js
View File

@ -34,14 +34,14 @@ export const TrackerRegistration = () => {
<span>Ваше имя *</span> <span>Ваше имя *</span>
<input placeholder="Имя" /> <input placeholder="Имя" />
</div> </div>
<div className="trackerRegistration__inputContainer">
<span>Придумайте пароль*</span>
<input placeholder="Пароль" />
</div>
<div className="trackerRegistration__inputContainer"> <div className="trackerRegistration__inputContainer">
<span>Ваш email *</span> <span>Ваш email *</span>
<input placeholder="Email" type="email" /> <input placeholder="Email" type="email" />
</div> </div>
<div className="trackerRegistration__inputContainer">
<span>Придумайте пароль*</span>
<input placeholder="Пароль" />
</div>
<div className="trackerRegistration__inputContainer"> <div className="trackerRegistration__inputContainer">
<span>Повторите пароль*</span> <span>Повторите пароль*</span>
<input placeholder="Повторите пароль" /> <input placeholder="Повторите пароль" />

46
src/pages/TrackerRegistration/trackerRegistration.scss
View File

@ -21,12 +21,26 @@
background: #FFF; background: #FFF;
padding: 59px 115px 70px 102px; padding: 59px 115px 70px 102px;
@media (max-width: 1000px) {
display: flex;
flex-direction: column;
padding: 0;
}
&__inputs { &__inputs {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
max-width: 650px; max-width: 650px;
row-gap: 25px; row-gap: 25px;
column-gap: 44px; column-gap: 44px;
@media (max-width: 1000px) {
order: 2;
}
@media (max-width: 6755px) {
margin-bottom: 35px;
}
} }
&__submit { &__submit {
@ -43,6 +57,16 @@
border: none; border: none;
margin-right: 165px; margin-right: 165px;
} }
@media (max-width: 1000px) {
order: 3;
}
@media (max-width: 675px) {
flex-direction: column;
align-items: start;
row-gap: 35px;
}
} }
&__info { &__info {
@ -50,6 +74,10 @@
align-items: center; align-items: center;
img { img {
margin-right: 31px; margin-right: 31px;
@media (max-width: 675px) {
margin-right: 27px;
}
} }
p { p {
@ -58,6 +86,10 @@
line-height: 22px; line-height: 22px;
color: #000; color: #000;
max-width: 430px; max-width: 430px;
@media (max-width: 675px) {
font-size: 14px;
}
} }
} }
@ -65,6 +97,15 @@
position: absolute; position: absolute;
top: -100px; top: -100px;
right: 58px; right: 58px;
@media (max-width: 1000px) {
position: inherit;
order: 1;
top: inherit;
right: inherit;
max-width: 115px;
margin-bottom: 25px;
}
} }
} }
&__inputContainer { &__inputContainer {
@ -91,5 +132,10 @@
font-size: 15px; font-size: 15px;
color: #000; color: #000;
} }
@media (max-width: 675px) {
margin-bottom: 0;
max-width: none;
}
} }
} }