Compare commits

...

2 Commits

Author SHA1 Message Date
Victor Batischev
7a3a70ccd3 fix active nav link state 2024-02-05 17:14:30 +03:00
Victor Batischev
3cc306bbc3 fix adaptive layout in project list 2024-02-05 16:44:03 +03:00
15 changed files with 54 additions and 101 deletions

View File

@ -167,12 +167,8 @@
top: -20px; top: -20px;
@media (max-width: 900px) { @media (max-width: 900px) {
order: 1; top: 100px;
position: inherit;
right: inherit;
top: inherit;
max-width: 115px; max-width: 115px;
margin-bottom: 35px;
} }
} }
} }

View File

@ -48,7 +48,7 @@
text-decoration: none; text-decoration: none;
} }
a:focus { a:focus, a.active {
color: #000000; color: #000000;
} }

View File

@ -133,7 +133,7 @@
.edit-project, .edit-project,
.add-worker, .add-worker,
.edit-column { .edit-column {
background: linear-gradient(180deg, #fff 0%, #ebebeb 37.29%); // background: linear-gradient(180deg, #fff 0%, #ebebeb 37.29%);
.title-project { .title-project {
margin-top: 20px; margin-top: 20px;
} }

View File

@ -1,8 +1,8 @@
.error-login { .error-login {
position: relative; position: relative;
padding: 54px 76px; padding: 30px;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%); background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
border-radius: 40px; border-radius: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -15,9 +15,7 @@
} }
p { p {
font-size: 12px; font-size: 15px;
line-height: 14px;
width: 176px;
text-align: center; text-align: center;
font-weight: 300; font-weight: 300;
margin-bottom: 30px; margin-bottom: 30px;

View File

@ -88,9 +88,9 @@ export const Navigation = () => {
}, []); }, []);
return ( return (
<div className="profileHeader__info"> <div className="profile-header__info">
<div className="profileHeader__container"> <div className="profile-header__container">
<nav className="profileHeader__nav"> <nav className="profile-header__nav">
{navInfo[user].map((link, index) => { {navInfo[user].map((link, index) => {
return ( return (
<NavLink <NavLink
@ -104,8 +104,8 @@ export const Navigation = () => {
})} })}
</nav> </nav>
<div className="profileHeader__personalInfo"> <div className="profile-header__personalInfo">
<h3 className="profileHeader__personalInfoName"> <h3 className="profile-header__personalInfoName">
{profileInfo?.fio ? profileInfo?.fio : profileInfo?.username} {profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
</h3> </h3>
<NavLink end to={"/profile"}> <NavLink end to={"/profile"}>
@ -113,7 +113,7 @@ export const Navigation = () => {
src={ src={
profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok
} }
className="profileHeader__personalInfoAvatar" className="profile-header__personalInfoAvatar"
alt="avatar" alt="avatar"
/> />
</NavLink> </NavLink>

View File

@ -282,15 +282,15 @@ export const ProfileCalendarComponent = React.memo(
? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
: `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}` : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}`
: activePeriod : activePeriod
? "Выберите диапазон на календаре" ? "Выберите диапазон на календаре"
: "Выбрать диапазон"} : "Выбрать диапазон"}
</span> </span>
<span> <span>
{totalRangeHours {totalRangeHours
? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
: endDate : endDate
? "0 часов" ? "0 часов"
: ""} : ""}
</span> </span>
{endDate && ( {endDate && (
<BaseButton <BaseButton

View File

@ -20,19 +20,6 @@ export const ProfileHeader = () => {
const [isLoggingOut, setIsLoggingOut] = useState(false); const [isLoggingOut, setIsLoggingOut] = useState(false);
// useEffect(() => {
// if (Object.keys(profileInfo).length) {
// return;
// }
// apiRequest(`/user/me`).then((profileInfo) => {
// dispatch(
// setProfileInfo(
// profileInfo.userCard ? profileInfo.userCard : profileInfo
// )
// );
// });
// }, [dispatch]);
useEffect(() => { useEffect(() => {
if (!Object.keys(profileInfo).length) if (!Object.keys(profileInfo).length)
apiRequest(`/user/me`).then((profileInfo) => { apiRequest(`/user/me`).then((profileInfo) => {
@ -54,16 +41,16 @@ export const ProfileHeader = () => {
}; };
return ( return (
<header className="profileHeader"> <header className="profile-header">
<div className="profileHeader__head"> <div className="profile-header__head">
<div className="profileHeader__container"> <div className="profile-header__container">
<NavLink to={"/profile"} className="profileHeader__title"> <NavLink to={"/profile"} className="profile-header__title">
itguild. itguild.
<span> <span>
{user === "developer" ? "для разработчиков" : "для партнеров"} {user === "developer" ? "для разработчиков" : "для партнеров"}
</span> </span>
</NavLink> </NavLink>
<button onClick={handler} className="profileHeader__logout"> <button onClick={handler} className="profile-header__logout">
{isLoggingOut ? <Loader /> : "Выйти"} {isLoggingOut ? <Loader /> : "Выйти"}
</button> </button>
</div> </div>

View File

@ -1,4 +1,4 @@
.profileHeader { .profile-header {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -53,24 +53,24 @@
flex-wrap: wrap; flex-wrap: wrap;
column-gap: 30px; column-gap: 30px;
.active {
color: #000000 !important;
}
a { a {
text-decoration: none !important; text-decoration: none;
cursor: pointer; cursor: pointer;
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
line-height: 32px; line-height: 32px;
color: #807777 !important; color: #807777;
transition: all 0.3s ease; transition: all 0.3s ease;
&:hover { &:hover {
color: #261a1a !important; color: #261a1a;
} }
} }
a.active {
color: #000000;
}
@media (max-width: 800px) { @media (max-width: 800px) {
column-gap: 15px; column-gap: 15px;

View File

@ -75,8 +75,6 @@ export const ProjectTicket = ({ project, index }) => {
setModalDelete(false); setModalDelete(false);
} }
function linkProject() {}
return ( return (
<div className={`project project-${project.id}`} key={index}> <div className={`project project-${project.id}`} key={index}>
<Link <Link

View File

@ -2,13 +2,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
width: 322px; width: 300px;
background: #f1f1f1; background: #f1f1f1;
border-radius: 12px; border-radius: 12px;
cursor: pointer; cursor: pointer;
max-width: 440px;
transition: 0.4s; transition: 0.4s;
&:hover { &:hover {
@ -26,15 +24,12 @@
&__link { &__link {
font-weight: 700; font-weight: 700;
width: 194px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 18px; font-size: 18px;
line-height: 32px;
color: #111112; color: #111112;
margin-bottom: 22px; margin-bottom: 10px;
max-width: 380px;
&:hover { &:hover {
color: black; color: black;
@ -45,7 +40,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
margin-bottom: 45px; margin-bottom: 30px;
p { p {
color: #6f6f6f; color: #6f6f6f;
@ -53,7 +48,6 @@
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
line-height: 17px; line-height: 17px;
width: 60px;
} }
.count { .count {
@ -97,13 +91,13 @@
} }
&__open-tracker { &__open-tracker {
padding: 17px 26px 16px; padding: 10px 15px;
} }
&__statistics { &__statistics {
position: absolute; position: absolute;
bottom: 18px; bottom: 13px;
left: 26px; left: 15px;
color: #0042b4; color: #0042b4;
text-decoration: underline; text-decoration: underline;
font-size: 14px; font-size: 14px;

View File

@ -1,14 +0,0 @@
import React from "react";
import { ActContent } from "@components/features/bookkeeping/ActContent/ActContent";
import { BookkeepingTemplete } from "@components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete";
export const ActPage = () => {
return (
<div>
<BookkeepingTemplete showBreadcrumps nameBreeadcrumps="Создание акта">
<ActContent></ActContent>
</BookkeepingTemplete>
</div>
);
};

View File

@ -15,7 +15,7 @@
&__about { &__about {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 30px; margin: 30px 0;
@media (max-width: 600px) { @media (max-width: 600px) {
flex-wrap: wrap; flex-wrap: wrap;
row-gap: 25px; row-gap: 25px;

View File

@ -201,7 +201,7 @@ export const Tracker = () => {
)) && )) &&
!loader && ( !loader && (
<div className="no-projects"> <div className="no-projects">
<div className="no-projects__createNew"> <div className="no-projects__create-new">
<div> <div>
<img src={noProjects} alt="noProjectImg" /> <img src={noProjects} alt="noProjectImg" />
<p>Создайте свой первый проект</p> <p>Создайте свой первый проект</p>
@ -251,7 +251,7 @@ export const Tracker = () => {
<p> <p>
{25} - {35} {25} - {35}
</p> </p>
<h2>Сентября,</h2> <h3>Сентября,</h3>
<h3>2023</h3> <h3>2023</h3>
</div> </div>

View File

@ -145,10 +145,10 @@
row-gap: 30px; row-gap: 30px;
display: none; display: none;
align-items: center; align-items: center;
justify-content: center;
@media (max-width: 785px) { @media (max-width: 785px) {
row-gap: 25px; row-gap: 25px;
justify-content: center;
padding: 0 15px 20px; padding: 0 15px 20px;
} }
@ -158,7 +158,7 @@
padding: 20px; padding: 20px;
width: 100%; width: 100%;
&__createNew { &__create-new {
display: flex; display: flex;
div { div {
display: flex; display: flex;
@ -177,14 +177,11 @@
} }
.create-project-btn { .create-project-btn {
max-width: 322px; width: 300px;
width: 322px; height: 113px;
height: 166px;
border-radius: 12px; border-radius: 12px;
background: #ecf8e5; background: #ecf8e5;
color: #000000; color: #000000;
font-weight: 400;
font-size: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -192,10 +189,9 @@
&__text { &__text {
text-align: left; text-align: left;
font-size: 14px; font-weight: 400;
font-weight: 250; font-size: 18px;
width: 190px; margin-left: 15px;
margin-left: 25px;
} }
&:hover { &:hover {
@ -203,10 +199,13 @@
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11); box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
} }
@media (max-width: 650px) { @media (max-width: 1068px) {
height: 40px; width: 47%;
font-size: 12px; }
height: 166px;
@media (max-width: 785px) {
max-width: 394px;
width: 100%;
} }
} }
} }

View File

@ -94,13 +94,8 @@
top: -100px; top: -100px;
right: 58px; right: 58px;
@media (max-width: 1000px) { @media (max-width: 900px) {
position: inherit; display: none;
order: 1;
top: inherit;
right: inherit;
max-width: 115px;
margin-bottom: 25px;
} }
} }
} }