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

registration adaptive

Browse Source
This commit is contained in:
Victor Batischev 2023-12-05 14:22:45 +03:00
parent 93c1dd3945
commit 522a67bf6b
11 changed files with 92 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Calendar/calendar.scss
View File

@ -125,6 +125,10 @@
margin: 50px 0 0; margin: 50px 0 0;
text-transform: capitalize; text-transform: capitalize;
@media (max-width: 500px) {
font-size: 1.7em;
}
span { span {
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;

21
src/components/Calendar/calendarComponent.scss
View File

@ -13,7 +13,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@media (max-width: 560px) { @media (max-width: 760px) {
flex-direction: column; flex-direction: column;
row-gap: 15px; row-gap: 15px;
} }
@ -21,20 +21,13 @@
&-info { &-info {
display: flex; display: flex;
@media (max-width: 685px) { @media (max-width: 760px) {
font-size: 7px;
}
@media (max-width: 560px) {
font-size: 10px; font-size: 10px;
}
@media (max-width: 560px) {
justify-content: center; justify-content: center;
} }
.calendar__hours { .calendar__hours {
margin: 0 10px; margin: 0 5px;
line-height: 0; line-height: 0;
font-weight: 500; font-weight: 500;
display: flex; display: flex;
@ -45,18 +38,14 @@
&-switcher { &-switcher {
display: flex; display: flex;
@media (max-width: 590px) { @media (max-width: 760px) {
font-size: 8px;
}
@media (max-width: 560px) {
justify-content: center; justify-content: center;
font-size: 12px; font-size: 12px;
} }
} }
h3 { h3 {
font-size: 2.5em; font-size: 2.2em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
letter-spacing: normal; letter-spacing: normal;

38
src/components/Modal/ModalRegistration/ModalRegistration.jsx
View File

@ -104,11 +104,11 @@ export const ModalRegistration = ({ active, setActive }) => {
}; };
return ( return (
<ModalLayout active={active} setActive={closeModal} styles={"registration"}> <ModalLayout active={active} setActive={closeModal} styles={"registration"}>
<div className="registration-body__left"> <div className="registration-body__main">
<h2> <h2>
Подключайтесь к <p>itguild.</p> Подключайтесь к <p>ITguild</p>
</h2> </h2>
<p className="registration-body__left-desc"> <p className="registration-body__main-desc">
Зарегистрируйтесь и начните работу уже сегодня Зарегистрируйтесь и начните работу уже сегодня
</p> </p>
@ -158,8 +158,6 @@ export const ModalRegistration = ({ active, setActive }) => {
</div> </div>
<div className="input-body__box"> <div className="input-body__box">
{/*<h5>Название компании</h5>*/}
{/*<input></input>*/}
<div className="inputContainer"> <div className="inputContainer">
<h5>Пароль</h5> <h5>Пароль</h5>
<input <input
@ -181,8 +179,30 @@ export const ModalRegistration = ({ active, setActive }) => {
/> />
{inputsError.password && <span>Минимум 6 символов</span>} {inputsError.password && <span>Минимум 6 символов</span>}
</div> </div>
<div className="inputContainer">
<h5>Повторите пароль</h5>
<input
className={inputsError.password ? "error" : ""}
type="password"
onChange={(e) => {
setInputsError({
name: false,
email: false,
password: false,
});
setInputsValue((prevValue) => ({
...prevValue,
password: e.target.value,
}));
}}
value={inputsValue.password}
placeholder="Пароль"
/>
{inputsError.password && <span>Минимум 6 символов</span>}
</div>
</div> </div>
</div> </div>
<div className="button-box"> <div className="button-box">
{loader ? ( {loader ? (
<Loader style={"green"} /> <Loader style={"green"} />
@ -202,9 +222,9 @@ export const ModalRegistration = ({ active, setActive }) => {
{/*</h5>*/} {/*</h5>*/}
</div> </div>
</div> </div>
<div className="registration-body__right"> <div className="registration-body__about">
<h4>Отказ от специалиста в любой момент</h4> <h4>Отказ от специалиста в любой момент</h4>
<div className="registration-body__right-text"> <div className="registration-body__about-text">
<img src={anyMoment}></img> <img src={anyMoment}></img>
<p> <p>
Поменяйте, откажитесь или возьмите еще специалиста в любой момент Поменяйте, откажитесь или возьмите еще специалиста в любой момент
@ -212,7 +232,7 @@ export const ModalRegistration = ({ active, setActive }) => {
</p> </p>
</div> </div>
<h4>100% постоплата</h4> <h4>100% постоплата</h4>
<div className="registration-body__right-text"> <div className="registration-body__about-text">
<img src={doc}></img> <img src={doc}></img>
<p> <p>
Договор не подразумевает какую‑либо оплату до того, как вы Договор не подразумевает какую‑либо оплату до того, как вы
@ -220,7 +240,7 @@ export const ModalRegistration = ({ active, setActive }) => {
</p> </p>
</div> </div>
<h4>Есть вопросы?</h4> <h4>Есть вопросы?</h4>
<div className="registration-body__right-text"> <div className="registration-body__about-text">
<img src={telegramLogo}></img> <img src={telegramLogo}></img>
<p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p> <p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
</div> </div>

11
src/components/Modal/ModalRegistration/modalRegistration.scss
View File

@ -6,12 +6,10 @@
justify-content: space-between; justify-content: space-between;
border: 1px solid #dde2e4; border: 1px solid #dde2e4;
border-radius: 8px; border-radius: 8px;
width: 1088px;
height: 515px;
&-body { &-body {
&__left { &__main {
padding: 33px 0 30px 77px; padding-left: 30px;
h2 { h2 {
font-weight: 500; font-weight: 500;
@ -51,6 +49,7 @@
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
line-height: 18px; line-height: 18px;
margin-left: 10px;
} }
input { input {
@ -112,9 +111,9 @@
} }
} }
&__right { &__about {
border-left: 1px solid #f1f1f1; border-left: 1px solid #f1f1f1;
padding: 30px 32px 46px 25px; padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;

5
src/components/Modal/ModalResetPassword/ModalResetPassword.jsx
View File

@ -127,7 +127,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
<h3 className="resetPassword__title">Восстановление пароля</h3> <h3 className="resetPassword__title">Восстановление пароля</h3>
{!step ? ( {!step ? (
<div className="resetPassword__email"> <div className="resetPassword__email">
<h5>Введите e-mail:</h5> <h5>Введите ваш e-mail:</h5>
<input <input
type="email" type="email"
onChange={(e) => { onChange={(e) => {
@ -145,9 +145,6 @@ export const ModalResetPassword = ({ active, setActive }) => {
value={inputsValue.email} value={inputsValue.email}
className={inputsError.email ? "error" : ""} className={inputsError.email ? "error" : ""}
/> />
{inputsError.email && (
<span className="warningText">Введите корректный e-mail</span>
)}
{loader ? ( {loader ? (
<Loader style={"green"} /> <Loader style={"green"} />
) : ( ) : (

9
src/components/Modal/ModalResetPassword/modalResetPassword.scss
View File

@ -1,5 +1,5 @@
.resetPassword { .resetPassword {
width: 370px; width: 280px;
position: relative; position: relative;
&__close { &__close {
@ -13,7 +13,7 @@
&__title { &__title {
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
margin-bottom: 15px; margin-bottom: 20px;
} }
&__email { &__email {
display: flex; display: flex;
@ -24,6 +24,7 @@
h5 { h5 {
font-size: 16px; font-size: 16px;
margin-bottom: 10px; margin-bottom: 10px;
align-self: flex-start;
} }
input { input {
@ -54,11 +55,9 @@
color: #ffffff; color: #ffffff;
font-weight: 500; font-weight: 500;
font-size: 15px; font-size: 15px;
letter-spacing: normal;
line-height: 32px;
text-align: center;
border: 2px solid #6aaf5c; border: 2px solid #6aaf5c;
transition: 0.3s; transition: 0.3s;
margin-top: 15px;
} }
.error { .error {

2
src/components/Modal/Tracker/TrackerModal/trackerModal.scss
View File

@ -742,7 +742,7 @@
.exit { .exit {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 36px; top: 20px;
right: 20px; right: 20px;
width: 13px; width: 13px;
height: 13px; height: 13px;

8
src/components/Notification/notification.scss
View File

@ -1,7 +1,7 @@
.notification { .notification {
border-radius: 40px; border-radius: 40px;
background: linear-gradient(180deg, #FFF 0%, #EBEBEB 100%); background: linear-gradient(180deg, #FFF 0%, #EBEBEB 100%);
padding: 20px 82px 17px 27px; padding: 15px 60px 15px 15px;
position: fixed; position: fixed;
bottom: 25px; bottom: 25px;
right: 25px; right: 25px;
@ -13,7 +13,7 @@
align-items: center; align-items: center;
h2 { h2 {
max-width: 194px; max-width: 210px;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
margin-bottom: 0; margin-bottom: 0;
@ -27,8 +27,8 @@
&__close { &__close {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 15px; top: 10px;
right: 25px; right: 20px;
width: 15px; width: 15px;
height: 15px; height: 15px;
} }

8
src/pages/Profile/profile.scss
View File

@ -1,8 +1,8 @@
.profile { .profile {
background: #F1F1F1; background: #f1f1f1;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
font-family: 'LabGrotesque', sans-serif; font-family: "LabGrotesque", sans-serif;
&__title { &__title {
font-weight: 700; font-weight: 700;
@ -14,7 +14,7 @@
p { p {
color: black; color: black;
} }
color: #52B709; color: #52b709;
} }
@media (max-width: 560px) { @media (max-width: 560px) {
@ -28,7 +28,7 @@
} }
&__info { &__info {
min-height: 128px; min-height: 110px;
background: white; background: white;
border-radius: 12px; border-radius: 12px;
margin-top: 30px; margin-top: 30px;

2
src/pages/RegistrationForCandidate/RegistrationForCandidate.js
View File

@ -17,7 +17,7 @@ export const RegistrationForCandidate = () => {
<div className="container"> <div className="container">
<div className="registrationCandidate__start"> <div className="registrationCandidate__start">
<h2 className="auth-candidate__start__title"> <h2 className="auth-candidate__start__title">
Хочу в команду <span>Айти специалистов</span> Хочу в команду <span>IT-специалистов</span>
</h2> </h2>
<div className="change-mode__arrow"> <div className="change-mode__arrow">
<img src={arrowBtn}></img> <img src={arrowBtn}></img>

88
src/pages/Summary/summary.scss
View File

@ -1,17 +1,8 @@
.summary { .summary {
background: #F1F1F1; background: #f1f1f1;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
font-family: 'LabGrotesque', sans-serif; font-family: "LabGrotesque", sans-serif;
//
//&__container {
// max-width: 1160px;
// padding: 0 10px;
// margin: 20px auto;
// position: relative;
// display: flex;
// flex-direction: column;
//}
&__content { &__content {
display: flex; display: flex;
@ -25,7 +16,7 @@
margin-bottom: 0; margin-bottom: 0;
span { span {
color: #52B709; color: #52b709;
} }
} }
@ -45,10 +36,10 @@
} }
&__info { &__info {
min-height: 128px; min-height: 110px;
background: white; background: white;
border-radius: 12px; border-radius: 12px;
margin-top: 30px; margin-top: 25px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 25px 0 45px; padding: 0 25px 0 45px;
@ -129,9 +120,9 @@
} }
&:after { &:after {
content: ''; content: "";
position: absolute; position: absolute;
background: #52B709; background: #52b709;
border-radius: 12px; border-radius: 12px;
width: 70%; width: 70%;
height: 8px; height: 8px;
@ -150,7 +141,14 @@
color: white; color: white;
border: none; border: none;
transition: all 0.3s ease; transition: all 0.3s ease;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), linear-gradient(36deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
&:hover { &:hover {
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%); box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
@ -169,7 +167,7 @@
} }
&__skills { &__skills {
background: #FFFFFF; background: #ffffff;
border-radius: 12px; border-radius: 12px;
margin-top: 35px; margin-top: 35px;
} }
@ -177,7 +175,7 @@
&__sections__head { &__sections__head {
display: flex; display: flex;
min-height: 69px; min-height: 69px;
background: #E1FCCF; background: #e1fccf;
border-radius: 12px 12px 0px 0px; border-radius: 12px 12px 0px 0px;
align-items: center; align-items: center;
padding: 0 35px 0 50px; padding: 0 35px 0 50px;
@ -191,6 +189,7 @@
font-style: normal; font-style: normal;
font-size: 18px; font-size: 18px;
line-height: 32px; line-height: 32px;
margin: 0;
@media (max-width: 660px) { @media (max-width: 660px) {
line-height: 20px; line-height: 20px;
@ -198,7 +197,7 @@
} }
button { button {
background: #FFFFFF; background: #ffffff;
border-radius: 44px; border-radius: 44px;
padding: 10px 20px; padding: 10px 20px;
display: flex; display: flex;
@ -228,7 +227,7 @@
padding: 25px 35px 25px 50px; padding: 25px 35px 25px 50px;
@media (max-width: 550px) { @media (max-width: 550px) {
padding: 15px 15px 20px; padding: 15px;
} }
&__wrapper { &__wrapper {
@ -260,7 +259,7 @@
.experience { .experience {
&__block { &__block {
background: #FFFFFF; background: #ffffff;
border-radius: 12px; border-radius: 12px;
} }
@ -316,9 +315,9 @@
.noGitItems { .noGitItems {
width: 100%; width: 100%;
font-size: 20px; font-size: 20px;
background: #FFFFFF; background: #ffffff;
border-radius: 12px; border-radius: 12px;
padding: 35px 30px 30px 45px; padding: 10px;
color: #000000; color: #000000;
font-weight: 600; font-weight: 600;
} }
@ -328,9 +327,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: #FFFFFF; background: #ffffff;
border-radius: 12px; border-radius: 12px;
padding: 35px 30px 30px 45px; padding: 10px;
transition: all 0.3s ease; transition: all 0.3s ease;
color: #000000; color: #000000;
@ -375,29 +374,11 @@
p { p {
font-weight: 300; font-weight: 300;
font-size: 16px; font-size: 16px;
line-height: 32px;
margin-bottom: 0; margin-bottom: 0;
white-space: nowrap;
max-width: 300px; max-width: 300px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@media (max-width: 1040px) {
max-width: 250px;
}
@media (max-width: 890px) {
max-width: 200px;
}
@media (max-width: 825px) {
max-width: 500px;
}
@media (max-width: 720px) {
max-width: 250px;
}
@media (max-width: 470px) { @media (max-width: 470px) {
max-width: 200px; max-width: 200px;
} }
@ -405,7 +386,6 @@
} }
&__specification { &__specification {
margin-top: 30px;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 10px; padding-left: 10px;
@ -416,7 +396,7 @@
} }
span { span {
background: #D4F123; background: #d4f123;
border-radius: 12px; border-radius: 12px;
max-width: 260px; max-width: 260px;
width: 100%; width: 100%;
@ -434,7 +414,7 @@
&__link { &__link {
border-radius: 50%; border-radius: 50%;
background: #DDEEC6; background: #ddeec6;
min-width: 48px; min-width: 48px;
height: 48px; height: 48px;
cursor: pointer; cursor: pointer;
@ -447,15 +427,15 @@
} }
footer { footer {
margin-top: 70px; margin-top: 10px;
} }
.container { .container {
max-width: 1160px; max-width: 1160px;
margin-top: 23px; margin-top: 23px;
@media (max-width: 570px) { @media (max-width: 570px) {
margin-top: 0; margin-top: 0;
} }
} }
} }