fix adaptive tracker tabs

This commit is contained in:
Victor Batischev 2024-02-06 19:57:27 +03:00
parent 8c68366152
commit 455be87e26
7 changed files with 22 additions and 67 deletions

View File

@ -616,7 +616,7 @@ export const TicketFullScreen = () => {
<div className="tracker__tabs__head">
<Link
to="/profile/tracker"
className="tab active-tab projectsTab"
className="tab active-tab"
onClick={() => toggleTabs(1)}
>
<img src={project} alt="img" />
@ -624,7 +624,7 @@ export const TicketFullScreen = () => {
</Link>
<Link
to="/profile/tracker"
className="tab tasksTab"
className="tab"
onClick={() => toggleTabs(2)}
>
<img src={tasks} alt="img" />
@ -632,7 +632,7 @@ export const TicketFullScreen = () => {
</Link>
<Link
to="/profile/tracker"
className="tab archiveTab"
className="tab"
onClick={() => toggleTabs(3)}
>
<img src={archive} alt="img" />

View File

@ -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 (
<div className="profile-header__info">
<div className="profile-header__container">

View File

@ -25,13 +25,13 @@ export const QuizReport = ({ info }) => {
<div className="report__value">
{Boolean(correctAnswers()) ? correctAnswers() : 0}
</div>
<div className="report__text">Правильных ответов</div>
<div className="report__text">правильных ответов</div>
</div>
<div className="report__column">
<div className="report__value report__value_false">
{Boolean(correctWrongAnswers()) ? correctWrongAnswers() : 0}
</div>
<div className="report__text">Не правильных ответов</div>
<div className="report__text">неправильных ответов</div>
</div>
<div className="report__column">
<div className="report__status-text">Статус:</div>

View File

@ -444,7 +444,7 @@ export const ProjectTracker = () => {
<div className="tracker__tabs__head">
<Link
to="/profile/tracker"
className="tab active-tab tab projectsTab"
className="tab active-tab tab"
onClick={() => dispatch(setToggleTab(1))}
>
<img src={project} alt="img" />
@ -452,7 +452,7 @@ export const ProjectTracker = () => {
</Link>
<Link
to="/profile/tracker"
className="tab tasksTab"
className="tab"
onClick={() => dispatch(setToggleTab(2))}
>
<img src={tasks} alt="img" />
@ -460,7 +460,7 @@ export const ProjectTracker = () => {
</Link>
<Link
to="/profile/tracker"
className="tab archiveTab"
className="tab"
onClick={() => dispatch(setToggleTab(3))}
>
<img src={archive} alt="img" />

View File

@ -76,7 +76,7 @@ const Statistics = () => {
<div className="tracker__tabs__head">
<Link
to="/profile/tracker"
className="tab active-tab projectsTab"
className="tab active-tab"
onClick={() => toggleTabs(1)}
>
<img src={project} alt="img" />
@ -84,7 +84,7 @@ const Statistics = () => {
</Link>
<Link
to="/profile/tracker"
className="tab tasksTab"
className="tab"
onClick={() => toggleTabs(2)}
>
<img src={tasks} alt="img" />
@ -92,7 +92,7 @@ const Statistics = () => {
</Link>
<Link
to="/profile/tracker"
className="tab archiveTab"
className="tab"
onClick={() => toggleTabs(3)}
>
<img src={archive} alt="img" />

View File

@ -51,7 +51,6 @@ export const Tracker = () => {
const [allCompletedTasks, setAllCompletedTasks] = useState([]);
const [modalCreateProject, setModalCreateProject] = useState(false);
const tabs = ["projectsTab", "tasksTab", "archiveTab"];
useEffect(() => {
setLoader(true);
@ -143,32 +142,28 @@ export const Tracker = () => {
<div className="tracker__tabs">
<div className="tracker__tabs__head">
<div
className={
tab === 1 ? "tab active-tab projectsTab" : "tab projectsTab"
}
className={tab === 1 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(1)}
>
<img src={project} alt="img" />
<p>Проекты </p>
</div>
<div
className={tab === 2 ? "tab active-tab tasksTab" : "tab tasksTab"}
className={tab === 2 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(2)}
>
<img src={tasks} alt="img" />
<p>Все мои задачи</p>
</div>
<div
className={
tab === 3 ? "tab active-tab archiveTab" : "tab archiveTab"
}
className={tab === 3 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(3)}
>
<img src={archive} alt="img" />
<p>Архив</p>
</div>
</div>
<div className={`tracker__tabs__content ${tabs[tab - 1]}`}>
<div className={`tracker__tabs__content`}>
<div
className={
tab === 1

View File

@ -49,11 +49,9 @@
height: 60px;
@media (max-width: 650px) {
background: none;
justify-content: space-between;
position: relative;
top: 15px;
height: auto;
}
}
@ -90,22 +88,19 @@
}
@media (max-width: 650px) {
border-radius: 10px;
flex-direction: column;
padding: 20px;
align-items: start;
row-gap: 20px;
height: auto !important;
border-radius: 10px 10px 0 0;
padding: 10px;
align-items: center;
p {
margin-left: 0;
margin-left: 5px;
}
}
}
.active-tab {
background: white;
border-radius: 12px 12px 5px 5px;
border-radius: 12px 12px 0px 0px;
position: relative;
height: 73px;
display: flex;
@ -122,9 +117,7 @@
}
@media (max-width: 650px) {
border-radius: 10px;
align-items: start;
top: 0;
padding: 10px 20px;
}
}
@ -231,10 +224,6 @@
padding: 0 15px 15px;
}
@media (max-width: 650px) {
background-color: #dff1ff;
}
&__wrapper {
display: flex;
max-width: 1400px;
@ -1913,25 +1902,12 @@
@media (max-width: 650px) {
&__content {
padding: 28px 0 0;
background-color: #dff1ff;
.project {
background-color: white;
background-color: #eeeeee;
max-width: 394px;
}
}
.projectsTab {
background-color: #dff1ff;
}
.tasksTab {
background-color: #e8ffeb;
}
.archiveTab {
background-color: #ffecef;
}
}
}
}