Fixed settings page and modals

This commit is contained in:
MaxOvs19 2023-04-03 14:37:27 +03:00
parent 9bab7d17cd
commit 8bd7bb7535
3 changed files with 75 additions and 10 deletions

View File

@ -4,7 +4,7 @@ import { setProject } from "../../../redux/projectsTrackerSlice";
import "./ModalCreate.scss"; import "./ModalCreate.scss";
export const ModalCreate = ({ active, setActive, title }) => { export const ModalCreate = ({ active, setActive, title, desc }) => {
const [inputValue, setInputValue] = useState(""); const [inputValue, setInputValue] = useState("");
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -33,6 +33,7 @@ export const ModalCreate = ({ active, setActive, title }) => {
> >
<div className="title-project"> <div className="title-project">
<h4>{title}</h4> <h4>{title}</h4>
<p>{desc}</p>
<div className="input-container"> <div className="input-container">
<input <input
className="name-project" className="name-project"

View File

@ -2,7 +2,7 @@
background: #f1f1f1; background: #f1f1f1;
height: 100%; height: 100%;
min-height: 100vh; min-height: 100vh;
font-family: 'LabGrotesque', sans-serif; font-family: "LabGrotesque", sans-serif;
.infoPersonal__title { .infoPersonal__title {
color: #000000; color: #000000;
@ -92,6 +92,19 @@
} }
} }
@media (max-width: 1200px) {
&__input {
width: 100%;
}
&__buttons {
&-cancel,
&-save {
width: 120px;
}
}
}
@media (max-width: 570px) { @media (max-width: 570px) {
&__input { &__input {
width: 95%; width: 95%;
@ -191,15 +204,54 @@
@media (max-width: 1200px) { @media (max-width: 1200px) {
margin-bottom: 15px; margin-bottom: 15px;
&__logo {
flex-direction: column;
align-items: flex-start;
}
&__body {
margin-bottom: 100px;
}
&__report,
&__login {
width: 45%;
height: auto;
}
&__label {
&-second,
&-first {
flex-direction: row;
}
}
}
@media (max-width: 950px) {
&__body { &__body {
flex-direction: column; flex-direction: column;
margin-bottom: 20px;
align-items: center;
} }
&__report,
&__login {
width: 60%;
}
&__report { &__report {
margin-top: 50px; margin-top: 55px;
margin-bottom: 55px;
} }
} }
@media (max-width: 570px) { @media (max-width: 570px) {
&__body {
flex-direction: column;
margin-bottom: 20px;
align-items: center;
}
&__report, &__report,
&__login { &__login {
width: 100%; width: 100%;
@ -207,6 +259,10 @@
padding: 20px 30px; padding: 20px 30px;
} }
&__report {
margin-top: 55px;
}
&__logo { &__logo {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@ -218,6 +274,7 @@
flex-direction: row; flex-direction: row;
} }
} }
.checkbox { .checkbox {
&__second { &__second {
margin: 0px 0 0 20px; margin: 0px 0 0 20px;

View File

@ -364,6 +364,12 @@ export const Tracker = () => {
function createTiket() { function createTiket() {
tabTaskMok.filter((item) => { tabTaskMok.filter((item) => {
if (item.name == selectedTab.name) { if (item.name == selectedTab.name) {
let idItem = 0;
item.tasks.forEach((item) => {
idItem = item.id;
});
let newTiket = { let newTiket = {
task: valueTiket, task: valueTiket,
description: "Сверстать часть таблицы. Сверстать часть таблицы", description: "Сверстать часть таблицы. Сверстать часть таблицы",
@ -371,7 +377,7 @@ export const Tracker = () => {
files: 0, files: 0,
avatarCreated: avatarTest, avatarCreated: avatarTest,
avatarDo: avatarTest, avatarDo: avatarTest,
id: item.tasks.length + 1, id: idItem + 1,
}; };
item.tasks.push(newTiket); item.tasks.push(newTiket);
@ -398,9 +404,10 @@ export const Tracker = () => {
<ProfileHeader /> <ProfileHeader />
<div className="container"> <div className="container">
<div className="tracker__content"> <div className="tracker__content">
<ProfileBreadcrumbs links={[ <ProfileBreadcrumbs
{name: 'Главная', link: '/profile'}, links={[
{name: 'Трекер', link: '/profile/tracker'} { name: "Главная", link: "/profile" },
{ name: "Трекер", link: "/profile/tracker" },
]} ]}
/> />
<h2 className="tracker__title">Трекер</h2> <h2 className="tracker__title">Трекер</h2>
@ -477,7 +484,7 @@ export const Tracker = () => {
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<div className="title-project"> <div className="title-project">
<h4>Введите название карточки</h4> <h4>Введите название новой колонки</h4>
<div className="input-container"> <div className="input-container">
<input <input
className="name-project" className="name-project"