fix mobile resolution

This commit is contained in:
Victor Batischev 2023-12-04 19:28:40 +03:00
parent d4eba820e0
commit cdf06c7984
23 changed files with 54 additions and 72 deletions

View File

@ -1,7 +1,7 @@
{ {
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"homepage": "https://html.craft-group.xyz/", "homepage": "https://itguild.info/",
"dependencies": { "dependencies": {
"@ckeditor/ckeditor5-build-classic": "^38.0.1", "@ckeditor/ckeditor5-build-classic": "^38.0.1",
"@ckeditor/ckeditor5-react": "^6.0.0", "@ckeditor/ckeditor5-react": "^6.0.0",

View File

@ -13,10 +13,10 @@ export const AuthBlock = ({ title, description, img, resetModal }) => {
<p>{description}</p> <p>{description}</p>
</div> </div>
<form className="auth__form"> <form className="auth__form">
<label htmlFor="login">Ваш email *</label> <label htmlFor="login">Ваш e-mail</label>
<input id="login" type="text" name="username" placeholder="Email" /> <input id="login" type="text" name="username" placeholder="E-mail" />
<label htmlFor="password">Ваш пароль*</label> <label htmlFor="password">Ваш пароль</label>
<input <input
id="password" id="password"
type="password" type="password"
@ -24,11 +24,7 @@ export const AuthBlock = ({ title, description, img, resetModal }) => {
placeholder="Пароль" placeholder="Пароль"
/> />
<div className="auth__form__buttons"> <div className="auth__form__buttons">
<button <button onClick={(e) => e.preventDefault()}>
onClick={(e) => {
e.preventDefault();
}}
>
Войти Войти
</button> </button>
<span onClick={() => resetModal(true)}>Восстановить пароль</span> <span onClick={() => resetModal(true)}>Восстановить пароль</span>

View File

@ -85,10 +85,10 @@ export const AuthBox = ({ title }) => {
</div> </div>
)} )}
<form ref={ref} className="auth-box__form"> <form ref={ref} className="auth-box__form">
<label htmlFor="login">Ваш email *</label> <label htmlFor="login">Ваш e-mail</label>
<input id="login" type="text" name="username" placeholder="Логин" /> <input id="login" type="text" name="username" placeholder="Логин" />
<label htmlFor="password">Ваш пароль*</label> <label htmlFor="password">Ваш пароль</label>
<div className="inputWrapper"> <div className="inputWrapper">
<input <input
id="password" id="password"

View File

@ -102,6 +102,10 @@
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 15px; top: 15px;
@media (min-width: 576px) {
left: 330px;
}
} }
} }
@ -153,7 +157,6 @@
letter-spacing: normal; letter-spacing: normal;
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
border: 2px solid #6aaf5c;
margin-right: 1.5rem; margin-right: 1.5rem;
transition: 0.3s; transition: 0.3s;

View File

@ -85,13 +85,13 @@ const Form = () => {
<div className="row"> <div className="row">
<div className="col-sm-12"> <div className="col-sm-12">
<form className="form" id="test"> <form className="form" id="test">
<label htmlFor="email">Емейл:</label> <label htmlFor="email">E-mail:</label>
<input <input
onChange={handleChange} onChange={handleChange}
id="email" id="email"
name="Email" name="Email"
type="email" type="email"
placeholder="Емейл" placeholder="E-mail"
value={data.email} value={data.email}
/> />

View File

@ -86,7 +86,7 @@ export const FreeDevelopers = () => {
</div> </div>
<div className="login"> <div className="login">
<h3>Для просмотра полного резюме разработчика авторизуйтесь</h3> <h3>Для просмотра полного резюме разработчика, авторизуйтесь</h3>
<BaseButton styles={"dev-code"}> <BaseButton styles={"dev-code"}>
<Link to={"/auth"}>Войти</Link> <Link to={"/auth"}>Войти</Link>
</BaseButton> </BaseButton>

View File

@ -10,7 +10,7 @@ export const ModalReset = ({ setModalReset }) => {
<h3 className="modalReset__title">Восстановление доступа</h3> <h3 className="modalReset__title">Восстановление доступа</h3>
<div className="modalReset__input"> <div className="modalReset__input">
<span>Укажите e-mail, для которого хотите восстановить пароль.</span> <span>Укажите e-mail, для которого хотите восстановить пароль.</span>
<input placeholder="email" /> <input placeholder="e-mail" />
</div> </div>
<button className="modalReset__submit">Восстановить</button> <button className="modalReset__submit">Восстановить</button>
<img <img

View File

@ -50,7 +50,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
setInputsError((prevValue) => ({ ...prevValue, email: true })); setInputsError((prevValue) => ({ ...prevValue, email: true }));
return showNotification({ return showNotification({
show: true, show: true,
text: "Введите корректный email", text: "Введите корректный e-mail",
type: "error", type: "error",
}); });
} }
@ -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>Введите email:</h5> <h5>Введите e-mail:</h5>
<input <input
type="email" type="email"
onChange={(e) => { onChange={(e) => {
@ -141,12 +141,12 @@ export const ModalResetPassword = ({ active, setActive }) => {
token: false, token: false,
}); });
}} }}
placeholder="Email" placeholder="E-mail"
value={inputsValue.email} value={inputsValue.email}
className={inputsError.email ? "error" : ""} className={inputsError.email ? "error" : ""}
/> />
{inputsError.email && ( {inputsError.email && (
<span className="warningText">Введите корректный email</span> <span className="warningText">Введите корректный e-mail</span>
)} )}
{loader ? ( {loader ? (
<Loader style={"green"} /> <Loader style={"green"} />

View File

@ -468,7 +468,7 @@ export const TrackerModal = ({
<div className="input-container invitePersonBlock__input"> <div className="input-container invitePersonBlock__input">
<input <input
className="name-project" className="name-project"
placeholder="email" placeholder="e-mail"
type="email" type="email"
/> />
</div> </div>

View File

@ -26,7 +26,7 @@ export const Navigation = () => {
}, },
{ {
path: "/calendar", path: "/calendar",
name: "Отчетность", name: "Отчеты",
}, },
{ {
path: "/tracker", path: "/tracker",

View File

@ -9,7 +9,7 @@
a { a {
color: #5b6871; color: #5b6871;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 13px;
line-height: 16px; line-height: 16px;
transition: 0.3s all ease; transition: 0.3s all ease;
position: relative; position: relative;
@ -17,14 +17,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
@media (max-width: 525px) {
font-size: 10px;
}
@media (max-width: 455px) {
font-size: 9px;
}
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: #000000; color: #000000;

View File

@ -89,7 +89,7 @@ export const ProfileCalendar = () => {
<ProfileBreadcrumbs <ProfileBreadcrumbs
links={[ links={[
{ name: "Главная", link: "/profile" }, { name: "Главная", link: "/profile" },
{ name: "Ваша отчетность", link: "/profile/calendar" }, { name: "Отчеты", link: "/profile/calendar" },
]} ]}
/> />
<h2 className="summary__title">Ваши отчеты</h2> <h2 className="summary__title">Ваши отчеты</h2>

View File

@ -78,7 +78,6 @@
margin: 0; margin: 0;
max-width: 220px; max-width: 220px;
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }

View File

@ -18,10 +18,6 @@ code {
monospace; monospace;
} }
h1 {
}
.container { .container {
position: relative !important; position: relative !important;
} }

View File

@ -9,5 +9,5 @@ import { store } from "./store/store";
ReactDOM.createRoot(document.getElementById("root")).render( ReactDOM.createRoot(document.getElementById("root")).render(
<Provider store={store}> <Provider store={store}>
<App /> <App />
</Provider>, </Provider>
); );

View File

@ -88,11 +88,11 @@ export const PartnerSettings = () => {
<ProfileBreadcrumbs <ProfileBreadcrumbs
links={[ links={[
{ name: "Главная", link: "/profile" }, { name: "Главная", link: "/profile" },
{ name: "Настройка профиля", link: "/profile/settings" }, { name: "Настройки", link: "/profile/settings" },
]} ]}
/> />
<div className="partner-settings"> <div className="partner-settings">
<h2 className="infoPersonal__title">Настройки акаунта</h2> <h2 className="infoPersonal__title">Настройки профиля</h2>
<div className="partner-settings__body"> <div className="partner-settings__body">
<div className="partner-settings__login"> <div className="partner-settings__login">
<h3 className="settings__title">Вход в систему</h3> <h3 className="settings__title">Вход в систему</h3>

View File

@ -36,7 +36,7 @@ export const Profile = () => {
{ {
path: "profile/summary", path: "profile/summary",
img: summaryIcon, img: summaryIcon,
title: "Данные и резюме", title: "Резюме",
description: "Ваше резюме<br/><span>заполнено</span>", description: "Ваше резюме<br/><span>заполнено</span>",
}, },
{ {
@ -54,7 +54,7 @@ export const Profile = () => {
{ {
path: "profile/settings", path: "profile/settings",
img: settingIcon, img: settingIcon,
title: "Настройки аккаунта", title: "Настройки профиля",
description: "Перейдите чтобы начать<br/> редактирование", description: "Перейдите чтобы начать<br/> редактирование",
}, },
], ],
@ -87,7 +87,7 @@ export const Profile = () => {
{ {
path: "profile/settings", path: "profile/settings",
img: settingIcon, img: settingIcon,
title: "Настройки аккаунта", title: "Настройки профиля",
description: "Перейдите чтобы начать<br/> редактирование", description: "Перейдите чтобы начать<br/> редактирование",
}, },
], ],

View File

@ -25,7 +25,7 @@ export const ProfileCandidate = () => {
{ {
path: "profile/settings", path: "profile/settings",
img: settingIcon, img: settingIcon,
title: "Настройки аккаунта", title: "Настройки профиля",
description: "Перейдите чтобы начать редактирование", description: "Перейдите чтобы начать редактирование",
}, },
]); ]);

View File

@ -41,7 +41,7 @@ export const RegistrationForCandidate = () => {
</div> </div>
<form className="registrationCandidate__form"> <form className="registrationCandidate__form">
<div className="registrationCandidate__form__input"> <div className="registrationCandidate__form__input">
<label htmlFor="name">Ваше имя *</label> <label htmlFor="name">Ваше имя</label>
<input id="name" type="text" placeholder="Имя" /> <input id="name" type="text" placeholder="Имя" />
</div> </div>
<div className="registrationCandidate__form__input"> <div className="registrationCandidate__form__input">
@ -49,19 +49,19 @@ export const RegistrationForCandidate = () => {
<input id="summary" type="text" placeholder="Резюме" /> <input id="summary" type="text" placeholder="Резюме" />
</div> </div>
<div className="registrationCandidate__form__input"> <div className="registrationCandidate__form__input">
<label htmlFor="email">Ваш email *</label> <label htmlFor="email">Ваш e-mail</label>
<input id="email" type="text" placeholder="Email" /> <input id="email" type="text" placeholder="E-mail" />
</div> </div>
<div className="registrationCandidate__form__input"> <div className="registrationCandidate__form__input">
<label htmlFor="tg">Ваш телеграм*</label> <label htmlFor="tg">Ваш telegram</label>
<input id="tg" type="text" placeholder="Телеграм" /> <input id="tg" type="text" placeholder="Telegram" />
</div> </div>
<div className="registrationCandidate__form__input"> <div className="registrationCandidate__form__input">
<label htmlFor="password">Придумайте пароль*</label> <label htmlFor="password">Придумайте пароль</label>
<input id="password" type="text" placeholder="Пароль" /> <input id="password" type="text" placeholder="Пароль" />
</div> </div>
<div className="registrationCandidate__form__input"> <div className="registrationCandidate__form__input">
<label htmlFor="secondPassword">Повторите пароль*</label> <label htmlFor="secondPassword">Повторите пароль</label>
<input id="secondPassword" type="text" placeholder="Пароль" /> <input id="secondPassword" type="text" placeholder="Пароль" />
</div> </div>
<div className="registrationCandidate__form__submit"> <div className="registrationCandidate__form__submit">

View File

@ -59,7 +59,7 @@ export const Summary = () => {
<ProfileBreadcrumbs <ProfileBreadcrumbs
links={[ links={[
{ name: "Главная", link: "/profile" }, { name: "Главная", link: "/profile" },
{ name: "Данные и резюме", link: "/profile/summary" }, { name: "Резюме", link: "/profile/summary" },
]} ]}
/> />
<h2 className="summary__title"> <h2 className="summary__title">
@ -98,7 +98,7 @@ export const Summary = () => {
<div className="summary__skills skills__section"> <div className="summary__skills skills__section">
<div className="summary__sections__head"> <div className="summary__sections__head">
<h3>Основной стек</h3> <h3>Основной стек</h3>
<button>Редактировать раздел</button> <button>Редактировать</button>
</div> </div>
<div className="skills__section__items"> <div className="skills__section__items">
<div className="skills__section__items__wrapper"> <div className="skills__section__items__wrapper">
@ -127,7 +127,7 @@ export const Summary = () => {
setEditSummeryOpen(!editSummeryOpen); setEditSummeryOpen(!editSummeryOpen);
}} }}
> >
{editSummeryOpen ? "Сохранить" : "Редактировать раздел"} {editSummeryOpen ? "Сохранить" : "Редактировать"}
</button> </button>
</div> </div>
{editSummeryOpen ? ( {editSummeryOpen ? (
@ -165,8 +165,8 @@ export const Summary = () => {
{openGit && ( {openGit && (
<div className="summary__sectionGit"> <div className="summary__sectionGit">
<div className="summary__sections__head"> <div className="summary__sections__head">
<h3>Страница портфолио кода разработчика</h3> <h3>Ваши репозитории</h3>
<button>Редактировать раздел</button> <button>Редактировать</button>
</div> </div>
<div className="summary__sectionGitItems"> <div className="summary__sectionGitItems">
{Boolean(gitInfo.length) && {Boolean(gitInfo.length) &&

View File

@ -110,14 +110,6 @@
font-size: 16px; font-size: 16px;
line-height: 32px; line-height: 32px;
position: relative; position: relative;
white-space: nowrap;
//@media (max-width: 915px) {
// max-width: 220px;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
//}
@media (max-width: 690px) { @media (max-width: 690px) {
font-size: 14px; font-size: 14px;
@ -128,13 +120,12 @@
@media (max-width: 550px) { @media (max-width: 550px) {
max-width: 200px; max-width: 200px;
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0; margin: 0;
} }
@media (max-width: 450px) { @media (max-width: 450px) {
max-width: 150px; max-width: 160px;
} }
&:after { &:after {
@ -170,6 +161,11 @@
width: 120px; width: 120px;
height: 50px; height: 50px;
} }
@media (max-width: 450px) {
width: 80px;
height: 40px;
}
} }
&__skills { &__skills {

View File

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

View File

@ -14,7 +14,7 @@ export function createMarkup(text) {
// `<div class='experience__block'> // `<div class='experience__block'>
// <div class="summary__sections__head"> // <div class="summary__sections__head">
// <h3>Описание опыта работы</h3> // <h3>Описание опыта работы</h3>
// <button>Редактировать раздел</button> // <button>Редактировать</button>
// </div> // </div>
// <div class="experience__content">${item.split("<h3>")[0]}</div> // <div class="experience__content">${item.split("<h3>")[0]}</div>
// </div>` // </div>`