fix active nav link state

fix adaptive layout in project list
2024-02-05 17:14:30 +03:00 · 2024-02-05 16:44:03 +03:00
15 changed files with 54 additions and 101 deletions
--- a/src/components/AuthBlock/authBlock.scss
+++ b/src/components/AuthBlock/authBlock.scss
@ -167,12 +167,8 @@
    top: -20px;

    @media (max-width: 900px) {
-      order: 1;
-      position: inherit;
-      right: inherit;
-      top: inherit;
+      top: 100px;
      max-width: 115px;
-      margin-bottom: 35px;
    }
  }
 }
--- a/src/components/Common/AuthHeader/authHeader.scss
+++ b/src/components/Common/AuthHeader/authHeader.scss
@ -48,7 +48,7 @@
            text-decoration: none;
          }

-          a:focus {
+          a:focus, a.active {
            color: #000000;
          }

--- a/src/components/Common/ModalLayout/modalLayout.scss
+++ b/src/components/Common/ModalLayout/modalLayout.scss
@ -133,7 +133,7 @@
 .edit-project,
 .add-worker,
 .edit-column {
-  background: linear-gradient(180deg, #fff 0%, #ebebeb 37.29%);
+  // background: linear-gradient(180deg, #fff 0%, #ebebeb 37.29%);
  .title-project {
    margin-top: 20px;
  }
--- a/src/components/Modal/ModalErrorLogin/modalErrorLogin.scss
+++ b/src/components/Modal/ModalErrorLogin/modalErrorLogin.scss
@ -1,8 +1,8 @@
 .error-login {
  position: relative;
-  padding: 54px 76px;
+  padding: 30px;
  background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
-  border-radius: 40px;
+  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
@ -15,9 +15,7 @@
  }

  p {
-    font-size: 12px;
-    line-height: 14px;
-    width: 176px;
+    font-size: 15px;
    text-align: center;
    font-weight: 300;
    margin-bottom: 30px;
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@ -88,9 +88,9 @@ export const Navigation = () => {
  }, []);

  return (
-    <div className="profileHeader__info">
-      <div className="profileHeader__container">
-        <nav className="profileHeader__nav">
+    <div className="profile-header__info">
+      <div className="profile-header__container">
+        <nav className="profile-header__nav">
          {navInfo[user].map((link, index) => {
            return (
              <NavLink
@ -104,8 +104,8 @@ export const Navigation = () => {
          })}
        </nav>

-        <div className="profileHeader__personalInfo">
-          <h3 className="profileHeader__personalInfoName">
+        <div className="profile-header__personalInfo">
+          <h3 className="profile-header__personalInfoName">
            {profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
          </h3>
          <NavLink end to={"/profile"}>
@ -113,7 +113,7 @@ export const Navigation = () => {
              src={
                profileInfo?.photo ? urlForLocal(profileInfo.photo) : avatarMok
              }
-              className="profileHeader__personalInfoAvatar"
+              className="profile-header__personalInfoAvatar"
              alt="avatar"
            />
          </NavLink>
--- a/src/components/ProfileHeader/ProfileHeader.jsx
+++ b/src/components/ProfileHeader/ProfileHeader.jsx
@ -20,19 +20,6 @@ export const ProfileHeader = () => {

  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(() => {
    if (!Object.keys(profileInfo).length)
      apiRequest(`/user/me`).then((profileInfo) => {
@ -54,16 +41,16 @@ export const ProfileHeader = () => {
  };

  return (
-    <header className="profileHeader">
-      <div className="profileHeader__head">
-        <div className="profileHeader__container">
-          <NavLink to={"/profile"} className="profileHeader__title">
+    <header className="profile-header">
+      <div className="profile-header__head">
+        <div className="profile-header__container">
+          <NavLink to={"/profile"} className="profile-header__title">
            itguild.
            <span>
              {user === "developer" ? "для разработчиков" : "для партнеров"}
            </span>
          </NavLink>
-          <button onClick={handler} className="profileHeader__logout">
+          <button onClick={handler} className="profile-header__logout">
            {isLoggingOut ? <Loader /> : "Выйти"}
          </button>
        </div>
--- a/src/components/ProfileHeader/profileHeader.scss
+++ b/src/components/ProfileHeader/profileHeader.scss
@ -1,4 +1,4 @@
-.profileHeader {
+.profile-header {
  width: 100%;
  display: flex;
  flex-direction: column;
@ -53,24 +53,24 @@
    flex-wrap: wrap;
    column-gap: 30px;

-    .active {
-      color: #000000 !important;
-    }
-
    a {
-      text-decoration: none !important;
+      text-decoration: none;
      cursor: pointer;
      font-weight: 700;
      font-size: 18px;
      line-height: 32px;
-      color: #807777 !important;
+      color: #807777;
      transition: all 0.3s ease;

      &:hover {
-        color: #261a1a !important;
+        color: #261a1a;
      }
    }

+    a.active {
+      color: #000000;
+    }
+
    @media (max-width: 800px) {
      column-gap: 15px;

--- a/src/components/ProjectTicket/ProjectTicket.jsx
+++ b/src/components/ProjectTicket/ProjectTicket.jsx
@ -75,8 +75,6 @@ export const ProjectTicket = ({ project, index }) => {
    setModalDelete(false);
  }

-  function linkProject() {}
-
  return (
    <div className={`project project-${project.id}`} key={index}>
      <Link
--- a/src/components/ProjectTicket/projectTicket.scss
+++ b/src/components/ProjectTicket/projectTicket.scss
@ -2,13 +2,11 @@
  display: flex;
  flex-direction: column;
  position: relative;
-  width: 322px;
-
+  width: 300px;
  background: #f1f1f1;
  border-radius: 12px;

  cursor: pointer;
-  max-width: 440px;
  transition: 0.4s;

  &:hover {
@ -26,15 +24,12 @@

  &__link {
    font-weight: 700;
-    width: 194px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
-    line-height: 32px;
    color: #111112;
-    margin-bottom: 22px;
-    max-width: 380px;
+    margin-bottom: 10px;

    &:hover {
      color: black;
@ -45,7 +40,7 @@
    display: flex;
    align-items: center;
    position: relative;
-    margin-bottom: 45px;
+    margin-bottom: 30px;

    p {
      color: #6f6f6f;
@ -53,7 +48,6 @@
      font-size: 12px;
      font-weight: 500;
      line-height: 17px;
-      width: 60px;
    }

    .count {
@ -97,13 +91,13 @@
  }

  &__open-tracker {
-    padding: 17px 26px 16px;
+    padding: 10px 15px;
  }

  &__statistics {
    position: absolute;
-    bottom: 18px;
-    left: 26px;
+    bottom: 13px;
+    left: 15px;
    color: #0042b4;
    text-decoration: underline;
    font-size: 14px;
--- a/src/pages/ActPage/ActPage.jsx
+++ b/src/pages/ActPage/ActPage.jsx
@ -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>
-  );
-};
--- a/src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.scss
+++ b/src/pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions.scss
@ -15,7 +15,7 @@
  &__about {
    display: flex;
    align-items: center;
-    margin-bottom: 30px;
+    margin: 30px 0;
    @media (max-width: 600px) {
      flex-wrap: wrap;
      row-gap: 25px;
--- a/src/pages/Tracker/Tracker.jsx
+++ b/src/pages/Tracker/Tracker.jsx
@ -201,7 +201,7 @@ export const Tracker = () => {
                )) &&
              !loader && (
                <div className="no-projects">
-                  <div className="no-projects__createNew">
+                  <div className="no-projects__create-new">
                    <div>
                      <img src={noProjects} alt="noProjectImg" />
                      <p>Создайте свой первый проект</p>
@ -251,7 +251,7 @@ export const Tracker = () => {
                  <p>
                    {25} - {35}
                  </p>
-                  <h2>Сентября,</h2>
+                  <h3>Сентября,</h3>
                  <h3>2023</h3>
                </div>

--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@ -145,10 +145,10 @@
        row-gap: 30px;
        display: none;
        align-items: center;
+        justify-content: center;

        @media (max-width: 785px) {
          row-gap: 25px;
-          justify-content: center;
          padding: 0 15px 20px;
        }

@ -158,7 +158,7 @@
          padding: 20px;
          width: 100%;

-          &__createNew {
+          &__create-new {
            display: flex;
            div {
              display: flex;
@ -177,14 +177,11 @@
        }

        .create-project-btn {
-          max-width: 322px;
-          width: 322px;
-          height: 166px;
+          width: 300px;
+          height: 113px;
          border-radius: 12px;
          background: #ecf8e5;
          color: #000000;
-          font-weight: 400;
-          font-size: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
@ -192,10 +189,9 @@

          &__text {
            text-align: left;
-            font-size: 14px;
-            font-weight: 250;
-            width: 190px;
-            margin-left: 25px;
+            font-weight: 400;
+            font-size: 18px;
+            margin-left: 15px;
          }

          &:hover {
@ -203,10 +199,13 @@
            box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
          }

-          @media (max-width: 650px) {
-            height: 40px;
-            font-size: 12px;
-            height: 166px;
+          @media (max-width: 1068px) {
+            width: 47%;
+          }
+
+          @media (max-width: 785px) {
+            max-width: 394px;
+            width: 100%;
          }
        }
      }
--- a/src/pages/TrackerRegistration/trackerRegistration.scss
+++ b/src/pages/TrackerRegistration/trackerRegistration.scss
@ -94,13 +94,8 @@
      top: -100px;
      right: 58px;

-      @media (max-width: 1000px) {
-        position: inherit;
-        order: 1;
-        top: inherit;
-        right: inherit;
-        max-width: 115px;
-        margin-bottom: 25px;
+      @media (max-width: 900px) {
+        display: none;
      }
    }
  }
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