denozord/MikrotikManager
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 104 Wiki Activity

fix(ui): адаптировать панели трафика для телефона

Browse Source
This commit is contained in:
Denozordec committed 2026-09-24 01:39:32 +07:00
1 parent 8ac40ba78a
commit 3dc85a22e9
4 files changed
+43 -14
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/(main)/traffic/page.tsx
+11 -11
View File
@@ -529,9 +529,9 @@ function DetailHeader({ range, setRange, children }: {
range: Range; setRange: (r: Range) => void; children: ReactNode
}) {
return (
<div className="flex items-start justify-between mb-3 gap-3">
<div className="flex flex-wrap items-start justify-between mb-3 gap-3">
<div className="flex items-center gap-2 flex-wrap min-w-0">{children}</div>
<div className="flex gap-1 shrink-0">
<div className="flex flex-wrap gap-1">
{TRAFFIC_RANGE_KEYS.map((r) => (
<Button key={r} size="sm" variant={r === range ? "default" : "ghost"}
className="h-7 px-2 text-xs" onClick={() => setRange(r)}>
@@ -1178,7 +1178,7 @@ export default function TrafficPage() {
{/* ── mode tab bar ── */}
<div className="border-b bg-background shrink-0">
<div className="flex items-center px-6">
<div className="flex items-center overflow-x-auto px-3 sm:px-6">
{GROUP_MODES.map(({ mode, icon, label }) => (
<button key={mode} onClick={() => handleModeChange(mode)}
className={cn(
@@ -1193,7 +1193,7 @@ export default function TrafficPage() {
</div>
</div>
<div className="flex-1 overflow-y-auto p-6">
<div className="flex-1 min-w-0 overflow-y-auto p-3 sm:p-6">
<div className="flex flex-col gap-5">
{!(effectiveMode === "flows" && range === "30d") && (!isLive || !(effectiveMode === "flows" ? liveError : trafficError)) && <KpiStatGrid
isLoading={isLive && (effectiveMode === "flows" ? liveBusy : trafficLoading)}
@@ -1219,7 +1219,7 @@ export default function TrafficPage() {
{flowError}
</div>
)}
<div className="grid grid-cols-[300px_1fr] gap-5 items-start">
<div className="grid min-w-0 grid-cols-1 xl:grid-cols-[300px_minmax(0,1fr)] gap-5 items-start">
<div className="flex flex-col gap-3">
<div role="group" aria-label="Источник потоков" className="flex gap-1">
<button
@@ -1275,7 +1275,7 @@ export default function TrafficPage() {
</button>
))}
</div>
{range === "30d" && <p className="text-xs text-muted-foreground">Выбор сервера: активность за последние 24 часа. Месячный отчёт — справа.</p>}
{range === "30d" && <p className="text-xs text-muted-foreground">Выбор сервера: активность за последние 24 часа. Месячный отчёт — в деталях сервера.</p>}
<div className="flex flex-col gap-2">
{sortedFlowCards.map((card) => (
<FlowEntityCardView
@@ -1292,8 +1292,8 @@ export default function TrafficPage() {
) : null}
</div>
</div>
<Frame dense className="w-full flex flex-col">
<FramePanel className="flex-1 px-5 pb-5 pt-5">
<Frame dense className="w-full min-w-0 flex flex-col">
<FramePanel className="flex-1 min-w-0 p-3 sm:p-5">
{analyticsLoading && <p role="status">Загрузка аналитики…</p>}
{currentAnalytics?.error && <Alert variant="destructive" role="alert"><AlertTitle>Аналитика недоступна</AlertTitle><AlertDescription>{currentAnalytics.error}<Button size="sm" variant="outline" onClick={() => setAnalyticsRetry(value => value + 1)}>Повторить аналитику</Button></AlertDescription></Alert>}
<FlowAnalyticsDetail
@@ -1326,7 +1326,7 @@ export default function TrafficPage() {
/>
</div>
) : (
<div className="grid grid-cols-[300px_1fr] gap-5 items-start">
<div className="grid min-w-0 grid-cols-1 xl:grid-cols-[300px_minmax(0,1fr)] gap-5 items-start">
{/* ── left panel ── */}
<div className="flex flex-col gap-3">
@@ -1375,8 +1375,8 @@ export default function TrafficPage() {
</div>
{/* ── detail panel ── */}
<Frame dense className="w-full flex flex-col">
<FramePanel className="flex-1 px-5 pb-5 pt-5">
<Frame dense className="w-full min-w-0 flex flex-col">
<FramePanel className="flex-1 min-w-0 p-3 sm:p-5">
{isLive && effectiveMode === "servers" && (
<div className="mb-3 pb-3 border-b">
<div className="flex items-center gap-2 flex-wrap">