From b343d33184be50f13e79e538ebd69427854ed3c2 Mon Sep 17 00:00:00 2001 From: Dozzy7528 Date: Sun, 29 Mar 2026 17:40:55 +0300 Subject: [PATCH] =?UTF-8?q?feat:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=BE=20=D0=BE=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=A1=D1=82=D0=B0=D1=82=D1=83=D1=81?= =?UTF-8?q?=D0=B0,=20=D0=B4=D0=B5=D0=B4=D0=BB=D0=B0=D0=B9=D0=BD=D0=B0=20?= =?UTF-8?q?=D0=B8=20=D0=BD=D0=B0=D0=B7=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F=20?= =?UTF-8?q?=D0=B4=D0=BE=D1=81=D0=BA=D0=B8=20=D0=BD=D0=B0=20Mainpage.js=20f?= =?UTF-8?q?ix:=20=D0=BF=D0=BE=D1=84=D0=B8=D0=BA=D1=88=D0=B5=D0=BD=20Mainpa?= =?UTF-8?q?ge.css,=20=D0=B2=20=D1=87=D0=B0=D1=81=D1=82=D0=BD=D0=BE=D1=81?= =?UTF-8?q?=D1=82=D0=B8=20=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=D0=BD?= =?UTF-8?q?=D0=BE=D1=81=D1=82=D1=8C=20=D0=B8=20=D0=BE=D1=82=D0=BE=D0=B1?= =?UTF-8?q?=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B2=D1=81=D0=B5?= =?UTF-8?q?=D0=B3=D0=BE=20=D1=87=D1=82=D0=BE=20=D0=B5=D1=81=D1=82=D1=8C=20?= =?UTF-8?q?=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mainpage.js | 91 ++++++++------- src/css/Mainpage.css | 258 +++++++++++++++++++++++++++++++++---------- 2 files changed, 250 insertions(+), 99 deletions(-) diff --git a/src/Mainpage.js b/src/Mainpage.js index a1f8ca7..0106d55 100644 --- a/src/Mainpage.js +++ b/src/Mainpage.js @@ -25,7 +25,6 @@ const Mainpage = () => { setLoading(false); } }; - checkSession(); }, []); @@ -34,10 +33,13 @@ const Mainpage = () => { 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 day = String(d.getDate()).padStart(2, '0'); + const month = String(d.getMonth() + 1).padStart(2, '0'); + const year = d.getFullYear(); + const hours = String(d.getHours()).padStart(2, '0'); + const minutes = String(d.getMinutes()).padStart(2, '0'); + // Формат: 01.04.2026 · 12:00 + return `${day}.${month}.${year} ${hours}:${minutes}`; }; const handleTaskClick = (boardId) => { @@ -48,55 +50,61 @@ const Mainpage = () => { return ( <> -
+
-

Kanban-доска Fool-Stack

+

Добро пожаловать в Kanban!

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

-
+

Мои задачи ({count})

{loading ? ( - <> -

Ваши задачи

-

Загрузка...

- +

Загрузка...

) : isAuthenticated ? ( <> -

Ваши задачи

- {count === 0 ? ( -

Нет задач

+ {tasks.length === 0 ? ( +

Нет задач

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

Ваши задачи

-

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

- +

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

)}
@@ -105,5 +113,4 @@ const Mainpage = () => { ); }; -export default Mainpage; -//TODO: проверка правильности отображения даты в отображении, приоритет задачи, отображение категории \ No newline at end of file +export default Mainpage; \ No newline at end of file diff --git a/src/css/Mainpage.css b/src/css/Mainpage.css index 7fe3348..5ae6ec9 100644 --- a/src/css/Mainpage.css +++ b/src/css/Mainpage.css @@ -1,120 +1,264 @@ .mainpage { transition: all .4s ease; + padding: 0 16px; + box-sizing: border-box; } +/* ── Основной контейнер — два равных блока рядом ── */ .mainpage__intro { background-color: #1f2430; - border-radius: 6px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - padding: 20px; - margin: 10px auto; + border-radius: 8px; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); + padding: 28px; + margin: 16px auto; max-width: 1200px; display: flex; - gap: 20px; - align-items: flex-start; /* Выравнивание по верху */ - min-height: 300px; /* Минимальная высота для стабильности */ + gap: 24px; + align-items: stretch; /* оба блока одной высоты */ + box-sizing: border-box; } +/* ── Левый блок — описание ── */ .left-content { - flex: 1; /* Берет все доступное пространство */ - min-width: 0; /* Позволяет сжиматься меньше контента */ - text-align: left; + flex: 1 1 0; /* равная база flex с tasks-container */ + min-width: 0; background-color: #2b3245; - border-radius: 6px; - padding: 20px; + border-radius: 8px; + padding: 28px 32px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; +} + +.left-content h1 { + margin: 0 0 14px 0; + font-size: 1.45rem; + font-weight: 700; + color: #e2e8f0; + line-height: 1.3; } -.left-content h1, .left-content p, .left-content li { margin: 6px 0; - text-align: left; + font-size: 1rem; + line-height: 1.65; color: #CAD1D8; } +/* ── Правый блок — задачи ── */ .tasks-container { - flex: 0 0 400px; /* Фиксированная ширина справа */ - max-width: 400px; /* Дополнительная защита */ + flex: 1 1 0; /* равная база flex с left-content */ + max-width: 480px; background-color: #2b3245; - border-radius: 6px; - padding: 10px; - height: fit-content; + border-radius: 8px; + padding: 24px 20px 20px; display: flex; flex-direction: column; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); + box-sizing: border-box; } -/* Остальной CSS без изменений */ .tasks-title { - margin: 0 0 15px 0; - color: #CAD1D8; + margin: 0 0 16px 0; + font-size: 1.15rem; + font-weight: 700; + color: #e2e8f0; text-align: center; position: sticky; top: 0; z-index: 10; background-color: #2b3245; + padding-bottom: 4px; + border-bottom: 1px solid rgba(255,255,255,0.07); +} + +.tasks-loading, +.tasks-empty { + color: #8892a4; + text-align: center; + padding: 28px 0; + font-size: 0.95rem; } .tasks-list { list-style-type: none; padding: 0; margin: 0; - max-height: 250px; + flex: 1; + display: flex; + flex-direction: column; + gap: 10px; +} + +.tasks-list--scroll { + max-height: 360px; overflow-y: auto; - padding-right: 10px; - flex: 1; /* Занимает оставшееся пространство */ + padding-right: 6px; } -.tasks-list::-webkit-scrollbar { - width: 8px; -} - -.tasks-list::-webkit-scrollbar-track { - background: #2b3245; - border-radius: 8px; -} - -.tasks-list::-webkit-scrollbar-thumb { - background: #aaa; - border-radius: 8px; -} - -.tasks-list::-webkit-scrollbar-thumb:hover { - background: #888; -} +.tasks-list::-webkit-scrollbar { width: 6px; } +.tasks-list::-webkit-scrollbar-track { background: #2b3245; border-radius: 8px; } +.tasks-list::-webkit-scrollbar-thumb { background: #6b7a99; border-radius: 8px; } +.tasks-list::-webkit-scrollbar-thumb:hover { background: #8892a4; } +/* ── Карточка задачи ── */ .task-item { background-color: #3d4763; - margin-bottom: 8px; - padding: 4px 12px; - border-radius: 8px; + padding: 14px 16px; + border-radius: 10px; color: #CAD1D8; - flex: 1; text-align: left; cursor: pointer; - transition: all 0.3s ease; + transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease; + min-width: 0; + box-sizing: border-box; + border: 1px solid rgba(255,255,255,0.05); } .task-item:hover { background-color: #4a587e; - transform: translateY(-1px); + transform: translateY(-2px); + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } -.task-item:last-child { - margin-bottom: 0; +.task-item:last-child { margin-bottom: 0; } + +/* Название задачи */ +.task-item__title { + font-weight: 700; + font-size: 1.05rem; + color: #CAD1D8; + margin-bottom: 8px; + word-break: break-word; + line-height: 1.35; } -/* Адаптивность для мобильных */ -@media (max-width: 768px) { +/* Строка метаданных */ +.task-item__meta { + display: flex; + align-items: center; + gap: 8px; + margin-top: 6px; + flex-wrap: wrap; + min-width: 0; +} + +/* Лейбл — подчёркивание + засветка + капс */ +.task-item__label { + font-size: 0.87rem; + font-weight: 700; + color: #CAD1D8; + white-space: nowrap; + flex-shrink: 0; + text-transform: uppercase; + letter-spacing: 0.08em; + background: rgba(202, 209, 216, 0.07); + padding: 1px 5px; + border-radius: 3px; +} + +/* Значение — нормальный регистр, чуть приглушённее */ +.task-item__value { + font-size: 0.87rem; + font-weight: 400; + color: #CAD1D8; + word-break: break-word; + min-width: 0; +} + +.task-item__value--truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 220px; + display: inline-block; + vertical-align: bottom; +} + +.task-item__value--muted { + color: #CAD1D8; + font-style: italic; +} + +/* Бейдж статуса */ +.task-item__badge { + display: inline-block; + font-size: 0.78rem; + font-weight: 500; + padding: 2px 10px; + border-radius: 9999px; + background-color: rgba(74, 88, 126, 0.6); + color: #CAD1D8; + border: 1px solid rgba(168, 192, 232, 0.18); + white-space: nowrap; +} + +/* ── Планшет (< 960px) ── */ +@media (max-width: 960px) { .mainpage__intro { - flex-direction: column; - gap: 15px; + padding: 20px; + gap: 18px; } .tasks-container { - flex: none; - max-width: none; - width: 100%; + max-width: 380px; + } + + .task-item__value--truncate { + max-width: 160px; } } + +/* ── Мобильный (< 768px) ── */ +@media (max-width: 768px) { + .mainpage { + padding: 0 8px; + } + + .mainpage__intro { + flex-direction: column; + align-items: stretch; + gap: 14px; + padding: 14px; + margin: 8px auto; + } + + .left-content { + padding: 20px; + } + + .tasks-container { + max-width: 100%; + width: 100%; + } + + .tasks-list--scroll { + max-height: 300px; + } + + .task-item__value--truncate { + max-width: none; + white-space: normal; + overflow: visible; + text-overflow: unset; + } +} + +/* ── Очень маленькие экраны (< 400px) ── */ +@media (max-width: 400px) { + .mainpage__intro { + padding: 10px; + border-radius: 6px; + } + + .task-item { + padding: 10px 12px; + } + + .task-item__title { + font-size: 0.98rem; + } +} \ No newline at end of file