fix adaptive tracker tabs
This commit is contained in:
parent
8c68366152
commit
455be87e26
@ -616,7 +616,7 @@ export const TicketFullScreen = () => {
|
|||||||
<div className="tracker__tabs__head">
|
<div className="tracker__tabs__head">
|
||||||
<Link
|
<Link
|
||||||
to="/profile/tracker"
|
to="/profile/tracker"
|
||||||
className="tab active-tab projectsTab"
|
className="tab active-tab"
|
||||||
onClick={() => toggleTabs(1)}
|
onClick={() => toggleTabs(1)}
|
||||||
>
|
>
|
||||||
<img src={project} alt="img" />
|
<img src={project} alt="img" />
|
||||||
@ -624,7 +624,7 @@ export const TicketFullScreen = () => {
|
|||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to="/profile/tracker"
|
to="/profile/tracker"
|
||||||
className="tab tasksTab"
|
className="tab"
|
||||||
onClick={() => toggleTabs(2)}
|
onClick={() => toggleTabs(2)}
|
||||||
>
|
>
|
||||||
<img src={tasks} alt="img" />
|
<img src={tasks} alt="img" />
|
||||||
@ -632,7 +632,7 @@ export const TicketFullScreen = () => {
|
|||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to="/profile/tracker"
|
to="/profile/tracker"
|
||||||
className="tab archiveTab"
|
className="tab"
|
||||||
onClick={() => toggleTabs(3)}
|
onClick={() => toggleTabs(3)}
|
||||||
>
|
>
|
||||||
<img src={archive} alt="img" />
|
<img src={archive} alt="img" />
|
||||||
|
@ -71,22 +71,6 @@ export const Navigation = () => {
|
|||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (localStorage.getItem("role_status") === "18") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// if (Object.keys(profileInfo).length) {
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// apiRequest(`/user/me`).then((profileInfo) =>
|
|
||||||
// dispatch(
|
|
||||||
// setProfileInfo(
|
|
||||||
// profileInfo.userCard ? profileInfo.userCard : profileInfo
|
|
||||||
// )
|
|
||||||
// )
|
|
||||||
// );
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="profile-header__info">
|
<div className="profile-header__info">
|
||||||
<div className="profile-header__container">
|
<div className="profile-header__container">
|
||||||
|
@ -25,13 +25,13 @@ export const QuizReport = ({ info }) => {
|
|||||||
<div className="report__value">
|
<div className="report__value">
|
||||||
{Boolean(correctAnswers()) ? correctAnswers() : 0}
|
{Boolean(correctAnswers()) ? correctAnswers() : 0}
|
||||||
</div>
|
</div>
|
||||||
<div className="report__text">Правильных ответов</div>
|
<div className="report__text">правильных ответов</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="report__column">
|
<div className="report__column">
|
||||||
<div className="report__value report__value_false">
|
<div className="report__value report__value_false">
|
||||||
{Boolean(correctWrongAnswers()) ? correctWrongAnswers() : 0}
|
{Boolean(correctWrongAnswers()) ? correctWrongAnswers() : 0}
|
||||||
</div>
|
</div>
|
||||||
<div className="report__text">Не правильных ответов</div>
|
<div className="report__text">неправильных ответов</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="report__column">
|
<div className="report__column">
|
||||||
<div className="report__status-text">Статус:</div>
|
<div className="report__status-text">Статус:</div>
|
||||||
|
@ -444,7 +444,7 @@ export const ProjectTracker = () => {
|
|||||||
<div className="tracker__tabs__head">
|
<div className="tracker__tabs__head">
|
||||||
<Link
|
<Link
|
||||||
to="/profile/tracker"
|
to="/profile/tracker"
|
||||||
className="tab active-tab tab projectsTab"
|
className="tab active-tab tab"
|
||||||
onClick={() => dispatch(setToggleTab(1))}
|
onClick={() => dispatch(setToggleTab(1))}
|
||||||
>
|
>
|
||||||
<img src={project} alt="img" />
|
<img src={project} alt="img" />
|
||||||
@ -452,7 +452,7 @@ export const ProjectTracker = () => {
|
|||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to="/profile/tracker"
|
to="/profile/tracker"
|
||||||
className="tab tasksTab"
|
className="tab"
|
||||||
onClick={() => dispatch(setToggleTab(2))}
|
onClick={() => dispatch(setToggleTab(2))}
|
||||||
>
|
>
|
||||||
<img src={tasks} alt="img" />
|
<img src={tasks} alt="img" />
|
||||||
@ -460,7 +460,7 @@ export const ProjectTracker = () => {
|
|||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to="/profile/tracker"
|
to="/profile/tracker"
|
||||||
className="tab archiveTab"
|
className="tab"
|
||||||
onClick={() => dispatch(setToggleTab(3))}
|
onClick={() => dispatch(setToggleTab(3))}
|
||||||
>
|
>
|
||||||
<img src={archive} alt="img" />
|
<img src={archive} alt="img" />
|
||||||
|
@ -76,7 +76,7 @@ const Statistics = () => {
|
|||||||
<div className="tracker__tabs__head">
|
<div className="tracker__tabs__head">
|
||||||
<Link
|
<Link
|
||||||
to="/profile/tracker"
|
to="/profile/tracker"
|
||||||
className="tab active-tab projectsTab"
|
className="tab active-tab"
|
||||||
onClick={() => toggleTabs(1)}
|
onClick={() => toggleTabs(1)}
|
||||||
>
|
>
|
||||||
<img src={project} alt="img" />
|
<img src={project} alt="img" />
|
||||||
@ -84,7 +84,7 @@ const Statistics = () => {
|
|||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to="/profile/tracker"
|
to="/profile/tracker"
|
||||||
className="tab tasksTab"
|
className="tab"
|
||||||
onClick={() => toggleTabs(2)}
|
onClick={() => toggleTabs(2)}
|
||||||
>
|
>
|
||||||
<img src={tasks} alt="img" />
|
<img src={tasks} alt="img" />
|
||||||
@ -92,7 +92,7 @@ const Statistics = () => {
|
|||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to="/profile/tracker"
|
to="/profile/tracker"
|
||||||
className="tab archiveTab"
|
className="tab"
|
||||||
onClick={() => toggleTabs(3)}
|
onClick={() => toggleTabs(3)}
|
||||||
>
|
>
|
||||||
<img src={archive} alt="img" />
|
<img src={archive} alt="img" />
|
||||||
|
@ -51,7 +51,6 @@ export const Tracker = () => {
|
|||||||
const [allCompletedTasks, setAllCompletedTasks] = useState([]);
|
const [allCompletedTasks, setAllCompletedTasks] = useState([]);
|
||||||
|
|
||||||
const [modalCreateProject, setModalCreateProject] = useState(false);
|
const [modalCreateProject, setModalCreateProject] = useState(false);
|
||||||
const tabs = ["projectsTab", "tasksTab", "archiveTab"];
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setLoader(true);
|
setLoader(true);
|
||||||
@ -143,32 +142,28 @@ export const Tracker = () => {
|
|||||||
<div className="tracker__tabs">
|
<div className="tracker__tabs">
|
||||||
<div className="tracker__tabs__head">
|
<div className="tracker__tabs__head">
|
||||||
<div
|
<div
|
||||||
className={
|
className={tab === 1 ? "tab active-tab" : "tab"}
|
||||||
tab === 1 ? "tab active-tab projectsTab" : "tab projectsTab"
|
|
||||||
}
|
|
||||||
onClick={() => toggleTabs(1)}
|
onClick={() => toggleTabs(1)}
|
||||||
>
|
>
|
||||||
<img src={project} alt="img" />
|
<img src={project} alt="img" />
|
||||||
<p>Проекты </p>
|
<p>Проекты </p>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={tab === 2 ? "tab active-tab tasksTab" : "tab tasksTab"}
|
className={tab === 2 ? "tab active-tab" : "tab"}
|
||||||
onClick={() => toggleTabs(2)}
|
onClick={() => toggleTabs(2)}
|
||||||
>
|
>
|
||||||
<img src={tasks} alt="img" />
|
<img src={tasks} alt="img" />
|
||||||
<p>Все мои задачи</p>
|
<p>Все мои задачи</p>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={
|
className={tab === 3 ? "tab active-tab" : "tab"}
|
||||||
tab === 3 ? "tab active-tab archiveTab" : "tab archiveTab"
|
|
||||||
}
|
|
||||||
onClick={() => toggleTabs(3)}
|
onClick={() => toggleTabs(3)}
|
||||||
>
|
>
|
||||||
<img src={archive} alt="img" />
|
<img src={archive} alt="img" />
|
||||||
<p>Архив</p>
|
<p>Архив</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={`tracker__tabs__content ${tabs[tab - 1]}`}>
|
<div className={`tracker__tabs__content`}>
|
||||||
<div
|
<div
|
||||||
className={
|
className={
|
||||||
tab === 1
|
tab === 1
|
||||||
|
@ -49,11 +49,9 @@
|
|||||||
height: 60px;
|
height: 60px;
|
||||||
|
|
||||||
@media (max-width: 650px) {
|
@media (max-width: 650px) {
|
||||||
background: none;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 15px;
|
top: 15px;
|
||||||
height: auto;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -90,22 +88,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 650px) {
|
@media (max-width: 650px) {
|
||||||
border-radius: 10px;
|
border-radius: 10px 10px 0 0;
|
||||||
flex-direction: column;
|
padding: 10px;
|
||||||
padding: 20px;
|
align-items: center;
|
||||||
align-items: start;
|
|
||||||
row-gap: 20px;
|
|
||||||
height: auto !important;
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-left: 0;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.active-tab {
|
.active-tab {
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 12px 12px 5px 5px;
|
border-radius: 12px 12px 0px 0px;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 73px;
|
height: 73px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -122,9 +117,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 650px) {
|
@media (max-width: 650px) {
|
||||||
border-radius: 10px;
|
padding: 10px 20px;
|
||||||
align-items: start;
|
|
||||||
top: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -231,10 +224,6 @@
|
|||||||
padding: 0 15px 15px;
|
padding: 0 15px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 650px) {
|
|
||||||
background-color: #dff1ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
max-width: 1400px;
|
max-width: 1400px;
|
||||||
@ -1913,25 +1902,12 @@
|
|||||||
@media (max-width: 650px) {
|
@media (max-width: 650px) {
|
||||||
&__content {
|
&__content {
|
||||||
padding: 28px 0 0;
|
padding: 28px 0 0;
|
||||||
background-color: #dff1ff;
|
|
||||||
|
|
||||||
.project {
|
.project {
|
||||||
background-color: white;
|
background-color: #eeeeee;
|
||||||
max-width: 394px;
|
max-width: 394px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectsTab {
|
|
||||||
background-color: #dff1ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tasksTab {
|
|
||||||
background-color: #e8ffeb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.archiveTab {
|
|
||||||
background-color: #ffecef;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user