From 56b5c81ec5b4e8901a405a40e6382136be7fb976 Mon Sep 17 00:00:00 2001 From: Anton Date: Tue, 10 Mar 2026 11:50:36 +0300 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=D0=B0=D0=B4=D0=B0=D0=BF?= =?UTF-8?q?=D1=82=D0=B0=D1=86=D0=B8=D1=8F=20=D0=BF=D0=BE=D0=B4=20=D0=BC?= =?UTF-8?q?=D0=BE=D0=B1=D0=B8=D0=BB=D1=8C=D0=BD=D1=8B=D0=B5=20=D1=83=D1=81?= =?UTF-8?q?=D1=82=D1=80=D0=BE=D0=B9=D1=81=D1=82=D0=B2=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Мобильная навигация: hamburger-меню и drawer вместо фиксированного sidebar - Модальные окна на весь экран при ширине < 480px - Адаптивные заголовки страниц и фильтры (touch-friendly) - Card view для таблицы операций при ширине < 600px - Горизонтальный скролл вкладок настроек - Увеличенные touch-targets (44px) для пагинации и кнопок - Уменьшенная высота графиков на мобильных - Поддержка safe-area-inset для устройств с вырезами - theme-color в index.html Made-with: Cursor --- frontend/index.html | 1 + frontend/src/components/CategoryChart.tsx | 6 +- frontend/src/components/Layout.tsx | 31 ++- frontend/src/components/TimeseriesChart.tsx | 6 +- frontend/src/components/TransactionTable.tsx | 223 +++++++++------ frontend/src/hooks/useMediaQuery.ts | 18 ++ frontend/src/styles/index.css | 279 ++++++++++++++++++- 7 files changed, 477 insertions(+), 87 deletions(-) create mode 100644 frontend/src/hooks/useMediaQuery.ts diff --git a/frontend/index.html b/frontend/index.html index efdac18..48e510c 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,6 +3,7 @@ + Семейный бюджет diff --git a/frontend/src/components/CategoryChart.tsx b/frontend/src/components/CategoryChart.tsx index 9d65e5c..7d532ed 100644 --- a/frontend/src/components/CategoryChart.tsx +++ b/frontend/src/components/CategoryChart.tsx @@ -7,6 +7,7 @@ import { } from 'recharts'; import type { ByCategoryItem } from '@family-budget/shared'; import { formatAmount } from '../utils/format'; +import { useMediaQuery } from '../hooks/useMediaQuery'; interface Props { data: ByCategoryItem[]; @@ -25,6 +26,9 @@ const rubFormatter = new Intl.NumberFormat('ru-RU', { }); export function CategoryChart({ data }: Props) { + const isMobile = useMediaQuery('(max-width: 600px)'); + const chartHeight = isMobile ? 250 : 300; + if (data.length === 0) { return
Нет данных за период
; } @@ -38,7 +42,7 @@ export function CategoryChart({ data }: Props) { return (
- + setDrawerOpen(false); return (
-