From 66385c8b227239239868f688f360c09b3cd5b796 Mon Sep 17 00:00:00 2001 From: Dozzy7528 Date: Sun, 1 Mar 2026 17:22:32 +0300 Subject: [PATCH] =?UTF-8?q?fix:=D0=9E=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B7=D0=B0=D0=B4=D0=B0=D1=87=20?= =?UTF-8?q?=D0=B8=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Пофикшено отображение задач для неавторизованных и авторизованных пользователей. Так же пофикшено отображение информации на сайте. Пофикшено отображение "отсутсвия задач" пока пользователь незалогинен. --- src/Mainpage.js | 144 ++++++++++++++++++++++--------------------- src/css/Mainpage.css | 87 ++++++++++++++++++++------ 2 files changed, 142 insertions(+), 89 deletions(-) diff --git a/src/Mainpage.js b/src/Mainpage.js index 1230416..1d49025 100644 --- a/src/Mainpage.js +++ b/src/Mainpage.js @@ -1,103 +1,107 @@ -import {useEffect, useState} from 'react'; +import { useEffect, useState } from 'react'; import axios from 'axios'; import Header from './Header'; +import { useNavigate } from 'react-router-dom'; import './css/Mainpage.css'; const Mainpage = () => { const [tasks, setTasks] = useState([]); - const [error_message, setErrorMessage] = useState(null); + const [errorMessage, setErrorMessage] = useState(null); const [count, setCount] = useState(0); + const [loading, setLoading] = useState(true); + const navigate = useNavigate(); useEffect(() => { const checkSession = async () => { try { const response = await axios.get('/api/users/my_tasks'); - - // если нет ошибки — пользователь авторизован setTasks(response.data.tasks || []); setCount(response.data.count || 0); - setErrorMessage(''); - + setErrorMessage(null); } catch (err) { const message = err.response?.data?.message || 'Ошибка авторизации'; setErrorMessage(message); - } + } finally { + setLoading(false); + } }; checkSession(); }, []); - const isAuthenticated = !error_message; + const isAuthenticated = !errorMessage; + + const formatDeadline = (deadline) => { + if (!deadline) return 'Отсутствует'; + const d = new Date(deadline); + const day = String(d.getDate()).padStart(2, '0'); + const month = String(d.getMonth() + 1).padStart(2, '0'); + const year = d.getFullYear(); + return `${day}.${month}.${year}`; + }; + + const handleTaskClick = (boardId) => { + navigate(`/kanban-board/${boardId}`); + }; + + const showScrollbar = count > 3; return ( <> -
-
- {!isAuthenticated && ( -
-
- -

- Наведите порядок в задачах за минуту -

- -

- Kanban-доска помогает видеть весь процесс целиком: что запланировано, - что уже в работе и что готово. Перетаскивайте карточки между колонками, - фиксируйте договорённости и не теряйте контекст — всё в одном месте. -

- -

- Как это работает: -

- -
    -
  • - Создайте карточку с задачей, добавьте описание и сроки. -
    • -
  • - Перемещайте её по этапам Сделать → В работе → Готово. -
    • -
  • - Смотрите прогресс по команде и быстро находите узкие места. -
    • -
- -

- Начните сейчас -

- -

- Войдите или зарегистрируйтесь, чтобы сохранять доски, открывать доступ - коллегам и синхронизировать задачи между устройствами. -

- -
+
+
+
+
+

Kanban-доска Fool-Stack

+

+ Kanban-доска помогает видеть весь процесс целиком: что запланировано, что уже в работе и что готово. + Перетаскивайте карточки между колонками, фиксируйте договорённости и не теряйте контекст — всё в одном месте. +

- )} - {isAuthenticated && ( -
-
-

Задачи ({count})

- - {tasks.length > 0 ? ( -
    - {tasks.map((task, index) => ( -
  • - {task.title || task.name || `Задача ${index + 1}`} -
    • - ))} -
- ) : ( -

Нет задач

- )} -
+
+ {loading ? ( + <> +

Ваши задачи

+

Загрузка...

+ + ) : isAuthenticated ? ( + <> +

Ваши задачи

+ {count === 0 ? ( +

Нет задач

+ ) : ( +
+
    + {tasks.map((task) => ( +
  • handleTaskClick(task.board_id)} + > +
    {task.title}
    +
    Доска: {task.board_title}
    +
    Дедлайн: {formatDeadline(task.deadline)}
    +
    • + ))} +
+
+ )} + + ) : ( + <> +

Ваши задачи

+

Войдите, чтобы увидеть свои задачи.

+ + )}
- )} +
); }; -export default Mainpage; \ No newline at end of file +export default Mainpage; +//TODO: проверка правильности отображения даты в отображении \ No newline at end of file diff --git a/src/css/Mainpage.css b/src/css/Mainpage.css index af7977c..0881dc0 100644 --- a/src/css/Mainpage.css +++ b/src/css/Mainpage.css @@ -1,53 +1,102 @@ -.content-wrapper{ +.mainpage { transition: all .4s ease; } -.main-layout { +.mainpage__intro { background-color: #1f2430; - border-radius: 8px; + border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 20px; margin: 10px auto; max-width: 1200px; + display: flex; + gap: 20px; } .left-content { - flex: 1; - text-align: left; /* Выравнивание текста слева */ + flex: 0 0 60%; /* Сжата справа, чтобы tasks расширился в центр */ + text-align: left; + background-color: #2b3245; + border-radius: 6px; + padding: 20px; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); } .left-content h1, .left-content p, .left-content li { + margin: 6px; text-align: left; color: #CAD1D8; } -.tasks-box { - flex: 0 0 300px; /* Фиксированная ширина бокса справа */ - background-color: #33404d; - border-radius: 8px; - padding: 20px; - border: 1px solid #999; +.tasks-container { + flex: 0 0 400px; /* Расширено влево к центру */ + background-color: #2b3245; + border-radius: 6px; + padding: 10px; height: fit-content; + display: flex; + flex-direction: column; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); } -.tasks-box h3 { - margin-top: 0; +/* Остальной CSS без изменений */ +.tasks-title { + margin: 0 0 15px 0; color: #CAD1D8; text-align: center; + position: sticky; + top: 0; + z-index: 10; + background-color: #2b3245; } -.tasks-box ul { +.tasks-list { list-style-type: none; padding: 0; + margin: 0; + max-height: 250px; + overflow-y: auto; + padding-right: 10px; } -.tasks-box li { - background-color: #1f2430; - margin-bottom: 10px; - padding: 10px; - border-radius: 4px; +.tasks-list::-webkit-scrollbar { + width: 8px; +} + +.tasks-list::-webkit-scrollbar-track { + background: #fff; + border-radius: 8px; + margin-left: 8px; +} + +.tasks-list::-webkit-scrollbar-thumb { + background: #aaa; + border-radius: 8px; + margin-left: 8px; +} + +.tasks-list::-webkit-scrollbar-thumb:hover { + background: #888; +} + +.task-item { + background-color: #3d4763; + margin-bottom: 8px; + padding: 4px 12px; + border-radius: 8px; color: #CAD1D8; text-align: left; + cursor: pointer; + transition: all 0.3s ease; +} + +.task-item:hover { + background-color: #4a587e; + transform: translateY(-1px); +} + +.task-item:last-child { + margin-bottom: 0; }