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;
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;
}
}
}

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

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

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

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

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

@ -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;
}
}
}

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

@ -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,8 +200,28 @@
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;
}
}
&__info {
@ -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;
}
}
}
}

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

@ -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="Повторите пароль" />

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

@ -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;
}
}
}