admin/family_budget
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): адаптация под мобильные устройства

Browse Source 
- Мобильная навигация: hamburger-меню и drawer вместо фиксированного sidebar
- Модальные окна на весь экран при ширине < 480px
- Адаптивные заголовки страниц и фильтры (touch-friendly)
- Card view для таблицы операций при ширине < 600px
- Горизонтальный скролл вкладок настроек
- Увеличенные touch-targets (44px) для пагинации и кнопок
- Уменьшенная высота графиков на мобильных
- Поддержка safe-area-inset для устройств с вырезами
- theme-color в index.html

Made-with: Cursor
This commit is contained in:
Anton
2026-03-10 11:50:36 +03:00
parent a895bb4b2f
commit 56b5c81ec5
7 changed files with 477 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/index.html
View File

@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#0f172a" />
<title>Семейный бюджет</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

6
frontend/src/components/CategoryChart.tsx
View File

@@ -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 <div className="chart-empty">Нет данных за период</div>;
}
@@ -38,7 +42,7 @@ export function CategoryChart({ data }: Props) {
return (
<div className="category-chart-wrapper">
<ResponsiveContainer width="100%" height={300}>
<ResponsiveContainer width="100%" height={chartHeight}>
<PieChart>
<Pie
data={chartData}

31
frontend/src/components/Layout.tsx
View File

@@ -1,13 +1,37 @@
import type { ReactNode } from 'react';
import { useState, type ReactNode } from 'react';
import { NavLink } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
export function Layout({ children }: { children: ReactNode }) {
const { user, logout } = useAuth();
const [drawerOpen, setDrawerOpen] = useState(false);
const closeDrawer = () => setDrawerOpen(false);
return (
<div className="layout">
<aside className="sidebar">
<button
type="button"
className="burger-btn"
aria-label="Открыть меню"
onClick={() => setDrawerOpen(true)}
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<line x1="3" y1="6" x2="21" y2="6" />
<line x1="3" y1="12" x2="21" y2="12" />
<line x1="3" y1="18" x2="21" y2="18" />
</svg>
</button>
{drawerOpen && (
<div
className="sidebar-overlay"
aria-hidden="true"
onClick={closeDrawer}
/>
)}
<aside className={`sidebar ${drawerOpen ? 'sidebar-open' : ''}`}>
<div className="sidebar-brand">
<span className="sidebar-brand-icon">₽</span>
<span className="sidebar-brand-text">Семейный бюджет</span>
@@ -19,6 +43,7 @@ export function Layout({ children }: { children: ReactNode }) {
className={({ isActive }) =>
`nav-link${isActive ? ' active' : ''}`
}
onClick={closeDrawer}
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
@@ -35,6 +60,7 @@ export function Layout({ children }: { children: ReactNode }) {
className={({ isActive }) =>
`nav-link${isActive ? ' active' : ''}`
}
onClick={closeDrawer}
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<line x1="18" y1="20" x2="18" y2="10" />
@@ -49,6 +75,7 @@ export function Layout({ children }: { children: ReactNode }) {
className={({ isActive }) =>
`nav-link${isActive ? ' active' : ''}`
}
onClick={closeDrawer}
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="3" />

6
frontend/src/components/TimeseriesChart.tsx
View File

@@ -9,6 +9,7 @@ import {
ResponsiveContainer,
} from 'recharts';
import type { TimeseriesItem } from '@family-budget/shared';
import { useMediaQuery } from '../hooks/useMediaQuery';
interface Props {
data: TimeseriesItem[];
@@ -21,6 +22,9 @@ const rubFormatter = new Intl.NumberFormat('ru-RU', {
});
export function TimeseriesChart({ data }: Props) {
const isMobile = useMediaQuery('(max-width: 600px)');
const chartHeight = isMobile ? 250 : 300;
if (data.length === 0) {
return <div className="chart-empty">Нет данных за период</div>;
}
@@ -32,7 +36,7 @@ export function TimeseriesChart({ data }: Props) {
}));
return (
<ResponsiveContainer width="100%" height={300}>
<ResponsiveContainer width="100%" height={chartHeight}>
<BarChart data={chartData}>
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
<XAxis

223
frontend/src/components/TransactionTable.tsx
View File

@@ -7,18 +7,75 @@ interface Props {
onEdit: (tx: Transaction) => void;
}
const DIRECTION_LABELS: Record<string, string> = {
income: 'Приход',
expense: 'Расход',
transfer: 'Перевод',
};
const DIRECTION_CLASSES: Record<string, string> = {
income: 'amount-income',
expense: 'amount-expense',
transfer: 'amount-transfer',
};
function TransactionCard({
tx,
onEdit,
}: {
tx: Transaction;
onEdit: (tx: Transaction) => void;
}) {
const directionClass = DIRECTION_CLASSES[tx.direction] ?? '';
const isUnconfirmed =
!tx.isCategoryConfirmed && tx.categoryId != null;
return (
<div
className={`transaction-card ${isUnconfirmed ? 'row-unconfirmed' : ''}`}
>
<div className="transaction-card-header">
<span className="transaction-card-date">
{formatDateTime(tx.operationAt)}
</span>
<span className={`transaction-card-amount ${directionClass}`}>
{formatAmount(tx.amountSigned)}
</span>
</div>
<div className="transaction-card-body">
<span className="description-text">{tx.description}</span>
{tx.comment && (
<span className="comment-badge" title={tx.comment}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
</svg>
</span>
)}
</div>
<div className="transaction-card-footer">
<span className="transaction-card-meta">
{tx.accountAlias || '—'} · {tx.categoryName || '—'}
</span>
<div className="transaction-card-actions">
{tx.categoryId != null && !tx.isCategoryConfirmed && (
<span
className="badge badge-warning"
title="Категория не подтверждена"
>
?
</span>
)}
<button
type="button"
className="btn-icon btn-icon-touch"
onClick={() => onEdit(tx)}
title="Редактировать"
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
</svg>
</button>
</div>
</div>
</div>
);
}
export function TransactionTable({ transactions, loading, onEdit }: Props) {
if (loading) {
return <div className="table-loading">Загрузка операций...</div>;
@@ -29,79 +86,87 @@ export function TransactionTable({ transactions, loading, onEdit }: Props) {
}
return (
<div className="table-wrapper">
<table className="data-table">
<thead>
<tr>
<th>Дата</th>
<th>Счёт</th>
<th>Сумма</th>
<th>Описание</th>
<th>Категория</th>
<th className="th-center">Статус</th>
<th></th>
</tr>
</thead>
<tbody>
{transactions.map((tx) => (
<tr
key={tx.id}
className={
!tx.isCategoryConfirmed && tx.categoryId
? 'row-unconfirmed'
: ''
}
>
<td className="td-nowrap">
{formatDateTime(tx.operationAt)}
</td>
<td className="td-nowrap">{tx.accountAlias || '—'}</td>
<td
className={`td-nowrap td-amount ${DIRECTION_CLASSES[tx.direction] ?? ''}`}
>
{formatAmount(tx.amountSigned)}
</td>
<td className="td-description">
<span className="description-text">{tx.description}</span>
{tx.comment && (
<span className="comment-badge" title={tx.comment}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
</svg>
</span>
)}
</td>
<td className="td-nowrap">
{tx.categoryName || (
<span className="text-muted">—</span>
)}
</td>
<td className="td-center">
{tx.categoryId != null && !tx.isCategoryConfirmed && (
<span
className="badge badge-warning"
title="Категория не подтверждена"
>
?
</span>
)}
</td>
<td>
<button
className="btn-icon"
onClick={() => onEdit(tx)}
title="Редактировать"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
</svg>
</button>
</td>
<>
<div className="table-wrapper table-desktop">
<table className="data-table">
<thead>
<tr>
<th>Дата</th>
<th>Счёт</th>
<th>Сумма</th>
<th>Описание</th>
<th>Категория</th>
<th className="th-center">Статус</th>
<th></th>
</tr>
))}
</tbody>
</table>
</div>
</thead>
<tbody>
{transactions.map((tx) => (
<tr
key={tx.id}
className={
!tx.isCategoryConfirmed && tx.categoryId
? 'row-unconfirmed'
: ''
}
>
<td className="td-nowrap">
{formatDateTime(tx.operationAt)}
</td>
<td className="td-nowrap">{tx.accountAlias || '—'}</td>
<td
className={`td-nowrap td-amount ${DIRECTION_CLASSES[tx.direction] ?? ''}`}
>
{formatAmount(tx.amountSigned)}
</td>
<td className="td-description">
<span className="description-text">{tx.description}</span>
{tx.comment && (
<span className="comment-badge" title={tx.comment}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
</svg>
</span>
)}
</td>
<td className="td-nowrap">
{tx.categoryName || (
<span className="text-muted">—</span>
)}
</td>
<td className="td-center">
{tx.categoryId != null && !tx.isCategoryConfirmed && (
<span
className="badge badge-warning"
title="Категория не подтверждена"
>
?
</span>
)}
</td>
<td>
<button
className="btn-icon"
onClick={() => onEdit(tx)}
title="Редактировать"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" />
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" />
</svg>
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="transaction-cards transaction-mobile">
{transactions.map((tx) => (
<TransactionCard key={tx.id} tx={tx} onEdit={onEdit} />
))}
</div>
</>
);
}

18
frontend/src/hooks/useMediaQuery.ts Normal file
View File

@@ -0,0 +1,18 @@
import { useState, useEffect } from 'react';
export function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(() => {
if (typeof window === 'undefined') return false;
return window.matchMedia(query).matches;
});
useEffect(() => {
const mql = window.matchMedia(query);
const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
setMatches(mql.matches);
mql.addEventListener('change', handler);
return () => mql.removeEventListener('change', handler);
}, [query]);
return matches;
}

279
frontend/src/styles/index.css
View File

@@ -598,6 +598,75 @@ textarea {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Transaction cards (mobile view) */
.transaction-cards {
display: none;
flex-direction: column;
gap: 12px;
}
.transaction-card {
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: 14px 16px;
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--color-border);
}
.transaction-card.row-unconfirmed {
border-left-color: var(--color-warning);
}
.transaction-card-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 6px;
}
.transaction-card-date {
font-size: 12px;
color: var(--color-text-secondary);
}
.transaction-card-amount {
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 16px;
}
.transaction-card-body {
font-size: 14px;
word-break: break-word;
margin-bottom: 8px;
}
.transaction-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.transaction-card-meta {
font-size: 12px;
color: var(--color-text-muted);
}
.transaction-card-actions {
display: flex;
align-items: center;
gap: 6px;
}
.btn-icon-touch {
min-width: 44px;
min-height: 44px;
padding: 10px;
}
.data-table {
@@ -758,8 +827,9 @@ textarea {
.pagination-size {
width: auto;
padding: 4px 8px;
padding: 8px 12px;
font-size: 13px;
min-height: 44px;
}
.btn-page {
@@ -771,6 +841,11 @@ textarea {
font-size: 14px;
transition: all var(--transition);
font-family: inherit;
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-page:hover:not(:disabled) {
@@ -837,6 +912,12 @@ textarea {
color: var(--color-text-secondary);
padding: 0;
line-height: 1;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
margin: -8px -8px -8px 0;
}
.btn-close:hover {
@@ -986,6 +1067,13 @@ textarea {
gap: 0;
border-bottom: 2px solid var(--color-border);
margin-bottom: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
display: none;
}
.tab {
@@ -1000,6 +1088,8 @@ textarea {
cursor: pointer;
transition: all var(--transition);
font-family: inherit;
flex-shrink: 0;
min-height: 44px;
}
.tab:hover {
@@ -1311,6 +1401,61 @@ textarea {
vertical-align: middle;
}
/* ================================================================
Burger button (mobile)
================================================================ */
.burger-btn {
display: none;
position: fixed;
top: 12px;
left: 12px;
z-index: 101;
width: 44px;
height: 44px;
padding: 0;
background: var(--color-sidebar);
color: #fff;
border: none;
border-radius: var(--radius);
cursor: pointer;
align-items: center;
justify-content: center;
box-shadow: var(--shadow);
transition: all var(--transition);
}
.burger-btn:hover {
background: var(--color-sidebar-hover);
}
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 99;
animation: overlay-fade-in 0.2s ease;
}
@keyframes overlay-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes drawer-slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/* ================================================================
Responsive
================================================================ */
@@ -1322,13 +1467,29 @@ textarea {
}
@media (max-width: 768px) {
.burger-btn {
display: flex;
}
.sidebar-overlay {
display: block;
}
.sidebar {
width: 200px;
width: min(280px, 85vw);
transform: translateX(-100%);
transition: transform 0.25s ease;
box-shadow: var(--shadow-lg);
}
.sidebar.sidebar-open {
transform: translateX(0);
animation: drawer-slide-in 0.25s ease;
}
.main-content {
margin-left: 200px;
padding: 16px;
margin-left: 0;
padding: 16px 16px 16px 60px;
}
.filters-row {
@@ -1342,4 +1503,114 @@ textarea {
.summary-cards {
grid-template-columns: 1fr;
}
.page-header {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.page-header .btn {
min-height: 44px;
}
.filter-dates-wrap .btn-page {
min-width: 44px;
min-height: 44px;
padding: 8px;
}
.filter-presets {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
padding-bottom: 4px;
}
.btn-preset {
flex-shrink: 0;
}
.filter-sort .btn-sort-order {
min-width: 44px;
min-height: 44px;
}
}
@media (max-width: 600px) {
.table-desktop {
display: none !important;
}
.transaction-mobile {
display: flex !important;
}
}
@media (max-width: 480px) {
.modal-overlay {
padding: 0;
align-items: stretch;
}
.modal {
max-width: none;
max-height: none;
height: 100%;
min-height: 100dvh;
border-radius: 0;
display: flex;
flex-direction: column;
}
.modal-header {
flex-shrink: 0;
}
.modal-body {
overflow-y: auto;
flex: 1;
min-height: 0;
-webkit-overflow-scrolling: touch;
}
.modal-footer {
flex-shrink: 0;
}
.modal-footer .btn {
min-height: 44px;
min-width: 44px;
padding: 12px 20px;
}
.page-header h1 {
font-size: 20px;
}
.pagination {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.pagination-controls {
justify-content: center;
}
}
/* Safe area for devices with notches */
@supports (padding: env(safe-area-inset-bottom)) {
.burger-btn {
top: calc(12px + env(safe-area-inset-top));
left: calc(12px + env(safe-area-inset-left));
}
.main-content {
padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.modal-footer {
padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
}