denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(App): implement mobile sidebar overlay with backdrop and responsive adjustments; enhance layout for better usability on small screens

Browse Source
This commit is contained in:
denozord
2026-02-23 23:56:55 +07:00
parent 0b5ec5bd85
commit 00afe2d6b2
14 changed files with 241 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.css
+71 -1
View File
@@ -347,6 +347,52 @@
padding-left: 0; padding-left: 0;
} }
/* ===== Мобильный сайдбар: оверлей и бэкдроп (Tabler-style) ===== */
.sidebar-backdrop {
position: fixed;
inset: 0;
z-index: 1035;
background: rgba(0, 0, 0, 0.4);
transition: opacity 0.2s ease;
}
body.sidebar-overlay-open {
overflow: hidden;
touch-action: none;
}
@media (max-width: 767.98px) {
.page .navbar-vertical .navbar-collapse {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(100vw, 280px);
max-width: 280px;
z-index: 1040;
background: #1e293b;
margin: 0;
padding: 1rem 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
flex-direction: column;
}
.page .navbar-vertical .navbar-collapse.show {
display: flex !important;
}
.page-wrapper {
margin-left: 0 !important;
}
.navbar-vertical .nav-link,
.navbar-vertical .dropdown-item {
min-height: 44px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
display: flex;
align-items: center;
}
}
/* Responsive navbar */ /* Responsive navbar */
@media (max-width: 991.98px) { @media (max-width: 991.98px) {
.navbar-collapse { .navbar-collapse {
@@ -461,7 +507,7 @@
/* Responsive sizing for small screens */ /* Responsive sizing for small screens */
@media (max-width: 992px) { @media (max-width: 992px) {
.header-actions { gap: 0.4rem; } .header-actions { gap: 0.4rem; flex-wrap: wrap; }
.header-actions .btn { .header-actions .btn {
padding: 0.35rem 0.6rem; padding: 0.35rem 0.6rem;
font-size: 0.875rem; font-size: 0.875rem;
@@ -474,6 +520,30 @@
.header-actions { width: 100%; } .header-actions { width: 100%; }
} }
/* Мобильные отступы контента */
@media (max-width: 767.98px) {
.page-body .container-fluid,
.page-body .container-xl {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.card .card-body {
padding: 0.75rem 1rem;
}
.offcanvas-start {
width: min(320px, 100vw) !important;
max-width: 100vw !important;
}
.modal-dialog {
margin: 0.5rem;
max-width: calc(100% - 1rem);
}
.modal-fullscreen-sm-down .modal-dialog {
max-width: 100%;
margin: 0;
}
}
/* Custom responsive adjustments */ /* Custom responsive adjustments */
@media (max-width: 992px) { @media (max-width: 992px) {
.page-wrapper { .page-wrapper {
frontend/src/App.jsx
+54 -4
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, createContext, useContext } from 'react'; import { useState, useEffect, createContext, useContext, useRef } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { import {
BrowserRouter as Router, BrowserRouter as Router,
@@ -142,16 +142,56 @@ function App() {
const LAYOUT_FLUID = 'fluid'; const LAYOUT_FLUID = 'fluid';
const LAYOUT_HORIZONTAL = 'horizontal'; const LAYOUT_HORIZONTAL = 'horizontal';
const SIDEBAR_COLLAPSE_ID = 'sidebar-menu';
const MOBILE_BREAKPOINT = 768;
function MainLayout() { function MainLayout() {
const location = useLocation(); const location = useLocation();
const { lang, setLang, t } = useContext(LanguageContext); const { lang, setLang, t } = useContext(LanguageContext);
const { theme, setTheme } = useContext(ThemeContext); const { theme, setTheme } = useContext(ThemeContext);
const [layout, setLayout] = useState(() => localStorage.getItem('layout') || LAYOUT_FLUID); const [layout, setLayout] = useState(() => localStorage.getItem('layout') || LAYOUT_FLUID);
const [sidebarBackdrop, setSidebarBackdrop] = useState(false);
const sidebarTogglerRef = useRef(null);
useEffect(() => { useEffect(() => {
localStorage.setItem('layout', layout); localStorage.setItem('layout', layout);
}, [layout]); }, [layout]);
// Мобильный сайдбар: бэкдроп при открытом меню и закрытие при навигации
useEffect(() => {
if (layout !== LAYOUT_FLUID) return;
const collapseEl = document.getElementById(SIDEBAR_COLLAPSE_ID);
const toggler = () => sidebarTogglerRef.current?.click?.();
const onShow = () => {
if (window.innerWidth < MOBILE_BREAKPOINT) {
setSidebarBackdrop(true);
document.body.classList.add('sidebar-overlay-open');
}
};
const onHide = () => {
setSidebarBackdrop(false);
document.body.classList.remove('sidebar-overlay-open');
};
if (collapseEl) {
collapseEl.addEventListener('show.bs.collapse', onShow);
collapseEl.addEventListener('hide.bs.collapse', onHide);
return () => {
collapseEl.removeEventListener('show.bs.collapse', onShow);
collapseEl.removeEventListener('hide.bs.collapse', onHide);
};
}
}, [layout]);
useEffect(() => {
if (layout !== LAYOUT_FLUID || window.innerWidth >= MOBILE_BREAKPOINT) return;
setSidebarBackdrop(false);
document.body.classList.remove('sidebar-overlay-open');
const collapseEl = document.getElementById(SIDEBAR_COLLAPSE_ID);
if (collapseEl?.classList.contains('show')) {
sidebarTogglerRef.current?.click?.();
}
}, [location.pathname, layout]);
// Состояние для управления выпадающими меню // Состояние для управления выпадающими меню
const [dropdownStates, setDropdownStates] = useState({ const [dropdownStates, setDropdownStates] = useState({
data: false, data: false,
@@ -445,18 +485,19 @@ function MainLayout() {
</Link> </Link>
<div className="navbar-nav flex-row d-md-none"> <div className="navbar-nav flex-row d-md-none">
<button <button
ref={sidebarTogglerRef}
className="navbar-toggler" className="navbar-toggler"
type="button" type="button"
data-bs-toggle="collapse" data-bs-toggle="collapse"
data-bs-target="#sidebar-menu" data-bs-target={`#${SIDEBAR_COLLAPSE_ID}`}
aria-controls="sidebar-menu" aria-controls={SIDEBAR_COLLAPSE_ID}
aria-expanded="false" aria-expanded="false"
aria-label="Открыть меню" aria-label="Открыть меню"
> >
<IconMenu2 /> <IconMenu2 />
</button> </button>
</div> </div>
<div className="collapse navbar-collapse" id="sidebar-menu"> <div className="collapse navbar-collapse" id={SIDEBAR_COLLAPSE_ID}>
<ul className="navbar-nav pt-lg-3"> <ul className="navbar-nav pt-lg-3">
{navCategories.map(category => ( {navCategories.map(category => (
<li key={category.id} className={`nav-item${category.items ? ' dropdown' : ''}${(category.single && activeTab === category.id) || (category.items && category.items.some(i => activeTab === i.id)) ? ' active' : ''}`}> <li key={category.id} className={`nav-item${category.items ? ' dropdown' : ''}${(category.single && activeTab === category.id) || (category.items && category.items.some(i => activeTab === i.id)) ? ' active' : ''}`}>
@@ -553,6 +594,15 @@ function MainLayout() {
</div> </div>
</header> </header>
{/* Бэкдроп мобильного меню: закрытие по клику */}
{sidebarBackdrop && (
<div
className="sidebar-backdrop d-md-none"
aria-hidden="true"
onClick={() => sidebarTogglerRef.current?.click?.()}
/>
)}
<div className="page-wrapper"> <div className="page-wrapper">
<div className="page-body"> <div className="page-body">
<div className="container-fluid"> <div className="container-fluid">
frontend/src/Dashboard.jsx
+15 -15
View File
@@ -357,12 +357,12 @@ function Dashboard() {
title="Панель" title="Панель"
icon={<IconCloud size={24} />} icon={<IconCloud size={24} />}
actions={( actions={(
<div className="d-flex align-items-center gap-3"> <div className="header-actions d-flex align-items-center flex-wrap gap-2 gap-sm-3">
{lastFetchTime && ( {lastFetchTime && (
<LastSaved timestamp={lastFetchTime} variant="compact" /> <LastSaved timestamp={lastFetchTime} variant="compact" />
)} )}
<Tooltip content="Обновить данные" shortcut="⌘R"> <Tooltip content="Обновить данные" shortcut="⌘R">
<button className="btn btn-outline-primary" onClick={() => window.location.reload()}> <button className="btn btn-outline-primary btn-sm" onClick={() => window.location.reload()}>
<IconRefresh className="me-2" /> Обновить <IconRefresh className="me-2" /> Обновить
</button> </button>
</Tooltip> </Tooltip>
@@ -371,12 +371,12 @@ function Dashboard() {
/> />
{/* Пинг до сервисов (список из настроек / Пинг сервисов) */} {/* Пинг до сервисов (список из настроек / Пинг сервисов) */}
<div className="d-flex align-items-center justify-content-between mb-2"> <div className="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-2 mb-2">
<h3 className="mb-0">Пинг сервисов</h3> <h3 className="mb-0">Пинг сервисов</h3>
<Tooltip content="Принудительно обновить пинг (без учёта кэша), история и тренд накапливаются"> <Tooltip content="Принудительно обновить пинг (без учёта кэша), история и тренд накапливаются">
<button <button
type="button" type="button"
className="btn btn-outline-primary btn-sm" className="btn btn-outline-primary btn-sm w-100 w-sm-auto"
onClick={() => fetchPingServices(true)} onClick={() => fetchPingServices(true)}
disabled={pingLoading} disabled={pingLoading}
> >
@@ -389,7 +389,7 @@ function Dashboard() {
{pingServicesConfig.map((config) => ( {pingServicesConfig.map((config) => (
<div <div
key={config.id} key={config.id}
className={expandedPingId === config.id ? 'col-12' : 'col-6 col-md-3'} className={expandedPingId === config.id ? 'col-12' : 'col-12 col-sm-6 col-md-3'}
> >
<PingServiceCard <PingServiceCard
config={config} config={config}
@@ -408,8 +408,8 @@ function Dashboard() {
</div> </div>
{/* Основные метрики */} {/* Основные метрики */}
<div className="row g-3 mb-4"> <div className="row g-2 g-md-3 mb-4">
<div className="col-md-3"> <div className="col-6 col-lg-3">
<div className="animate-in"> <div className="animate-in">
<StatCard <StatCard
icon={IconWorld} icon={IconWorld}
@@ -423,7 +423,7 @@ function Dashboard() {
/> />
</div> </div>
</div> </div>
<div className="col-md-3"> <div className="col-6 col-lg-3">
<div className="animate-in" style={{animationDelay: '0.1s'}}> <div className="animate-in" style={{animationDelay: '0.1s'}}>
<StatCard <StatCard
icon={IconNetwork} icon={IconNetwork}
@@ -437,7 +437,7 @@ function Dashboard() {
/> />
</div> </div>
</div> </div>
<div className="col-md-3"> <div className="col-6 col-lg-3">
<div className="animate-in" style={{animationDelay: '0.2s'}}> <div className="animate-in" style={{animationDelay: '0.2s'}}>
<StatCard <StatCard
icon={IconNetwork} icon={IconNetwork}
@@ -451,7 +451,7 @@ function Dashboard() {
/> />
</div> </div>
</div> </div>
<div className="col-md-3"> <div className="col-6 col-lg-3">
<div className="animate-in" style={{animationDelay: '0.3s'}}> <div className="animate-in" style={{animationDelay: '0.3s'}}>
<StatCard <StatCard
icon={IconServer} icon={IconServer}
@@ -468,8 +468,8 @@ function Dashboard() {
</div> </div>
{/* Дополнительные метрики */} {/* Дополнительные метрики */}
<div className="row g-3 mb-4 justify-content-center"> <div className="row g-2 g-md-3 mb-4 justify-content-center">
<div className="col-sm-6 col-md-3"> <div className="col-6 col-md-6 col-lg-3">
<MetricCard <MetricCard
title="Стран" title="Стран"
value={loading ? '...' : stats.countriesCount ?? '—'} value={loading ? '...' : stats.countriesCount ?? '—'}
@@ -478,7 +478,7 @@ function Dashboard() {
description="Географическое покрытие" description="Географическое покрытие"
/> />
</div> </div>
<div className="col-sm-6 col-md-3"> <div className="col-6 col-md-6 col-lg-3">
<MetricCard <MetricCard
title="Провайдеров" title="Провайдеров"
value={loading ? '...' : stats.providersCount ?? '—'} value={loading ? '...' : stats.providersCount ?? '—'}
@@ -487,7 +487,7 @@ function Dashboard() {
description="Облачные провайдеры" description="Облачные провайдеры"
/> />
</div> </div>
<div className="col-sm-6 col-md-3"> <div className="col-6 col-md-6 col-lg-3">
<MetricCard <MetricCard
title="Онлайн серверов" title="Онлайн серверов"
value={loading ? '...' : `${stats.onlineServers ?? '—'}/${stats.totalServers ?? '—'}`} value={loading ? '...' : `${stats.onlineServers ?? '—'}/${stats.totalServers ?? '—'}`}
@@ -496,7 +496,7 @@ function Dashboard() {
description="Активные серверы" description="Активные серверы"
/> />
</div> </div>
<div className="col-sm-6 col-md-3"> <div className="col-6 col-md-6 col-lg-3">
<MetricCard <MetricCard
title="Последнее обновление" title="Последнее обновление"
value={loading ? '...' : (stats.lastModified ? stats.lastModified : '—')} value={loading ? '...' : (stats.lastModified ? stats.lastModified : '—')}
frontend/src/DataManager.jsx
+5 -5
View File
@@ -212,8 +212,8 @@ function DataManager({ entityName, entityKey, placeholder }) {
</div> </div>
)} )}
<div className="row"> <div className="row g-2 g-lg-3">
<div className="col-lg-4"> <div className="col-12 col-lg-4">
{/* Add New Item Card */} {/* Add New Item Card */}
<div className="card card-md"> <div className="card card-md">
<div className="card-header"> <div className="card-header">
@@ -333,11 +333,11 @@ function DataManager({ entityName, entityKey, placeholder }) {
</div> </div>
</div> </div>
<div className="col-lg-8"> <div className="col-12 col-lg-8">
<div className="card"> <div className="card">
<div className="card-header d-flex justify-content-between align-items-center"> <div className="card-header d-flex flex-column flex-md-row justify-content-between align-items-stretch align-items-md-center gap-2">
<h3 className="card-title mb-0">Список {entityName === 'домен' ? 'доменов' : entityName}</h3> <h3 className="card-title mb-0">Список {entityName === 'домен' ? 'доменов' : entityName}</h3>
<div className="d-flex gap-2 w-50"> <div className="d-flex flex-wrap gap-2 flex-grow-1 flex-md-grow-0">
{/* Фильтр по шлюзу */} {/* Фильтр по шлюзу */}
<select className="form-select w-auto" value={filterType} onChange={e => { setFilterType(e.target.value); setCurrentPage(1); }}> <select className="form-select w-auto" value={filterType} onChange={e => { setFilterType(e.target.value); setCurrentPage(1); }}>
<option value="">Все шлюзы</option> <option value="">Все шлюзы</option>
frontend/src/DomainsNewManager.jsx
+4 -4
View File
@@ -950,10 +950,10 @@ function DomainsNewManager() {
<button type="button" className="btn-close" onClick={() => setShowDiff(false)}></button> <button type="button" className="btn-close" onClick={() => setShowDiff(false)}></button>
<div className="modal-header"><h3 className="modal-title">Изменения</h3></div> <div className="modal-header"><h3 className="modal-title">Изменения</h3></div>
<div className="modal-body"> <div className="modal-body">
<div className="row g-3"> <div className="row g-2 g-md-3">
<div className="col-md-4"><div className="card"><div className="card-body"><strong>Добавлено</strong><div className="text-muted">{diff.added.length}</div></div></div></div> <div className="col-6 col-md-4"><div className="card"><div className="card-body py-2"><strong>Добавлено</strong><div className="text-muted">{diff.added.length}</div></div></div></div>
<div className="col-md-4"><div className="card"><div className="card-body"><strong>Удалено</strong><div className="text-muted">{diff.removed.length}</div></div></div></div> <div className="col-6 col-md-4"><div className="card"><div className="card-body py-2"><strong>Удалено</strong><div className="text-muted">{diff.removed.length}</div></div></div></div>
<div className="col-md-4"><div className="card"><div className="card-body"><strong>Изменено</strong><div className="text-muted">{diff.changed.length}</div></div></div></div> <div className="col-6 col-md-4"><div className="card"><div className="card-body py-2"><strong>Изменено</strong><div className="text-muted">{diff.changed.length}</div></div></div></div>
</div> </div>
</div> </div>
<div className="modal-footer"> <div className="modal-footer">
frontend/src/ServerManager.jsx
+12 -12
View File
@@ -800,8 +800,8 @@ function ServerManager() {
{/* Toolbar */} {/* Toolbar */}
<div className="card mb-3"> <div className="card mb-3">
<div className="card-body py-2"> <div className="card-body py-2">
<div className="d-flex align-items-center justify-content-between"> <div className="d-flex flex-column flex-sm-row flex-wrap align-items-stretch align-items-sm-center justify-content-between gap-2">
<div className="d-flex align-items-center gap-2"> <div className="d-flex flex-wrap align-items-center gap-2">
{/* Открыть фильтры (offcanvas) */} {/* Открыть фильтры (offcanvas) */}
<button <button
type="button" type="button"
@@ -1087,22 +1087,22 @@ function ServerManager() {
<h3 className="card-title mb-0">Добавить связь между серверами</h3> <h3 className="card-title mb-0">Добавить связь между серверами</h3>
</div> </div>
<div className="card-body"> <div className="card-body">
<div className="row g-3"> <div className="row g-2 g-md-3">
<div className="col-md-6"> <div className="col-12 col-md-6">
<label className="form-label">Сервер A</label> <label className="form-label">Сервер A</label>
<select className="form-select" value={newConnection.from} onChange={e => setNewConnection({ ...newConnection, from: e.target.value })}> <select className="form-select" value={newConnection.from} onChange={e => setNewConnection({ ...newConnection, from: e.target.value })}>
<option value="">Выберите сервер</option> <option value="">Выберите сервер</option>
{servers.map(s => <option key={s.ip} value={s.ip}>{s.ip} ({s.dns})</option>)} {servers.map(s => <option key={s.ip} value={s.ip}>{s.ip} ({s.dns})</option>)}
</select> </select>
</div> </div>
<div className="col-md-6"> <div className="col-12 col-md-6">
<label className="form-label">Сервер B</label> <label className="form-label">Сервер B</label>
<select className="form-select" value={newConnection.to} onChange={e => setNewConnection({ ...newConnection, to: e.target.value })}> <select className="form-select" value={newConnection.to} onChange={e => setNewConnection({ ...newConnection, to: e.target.value })}>
<option value="">Выберите сервер</option> <option value="">Выберите сервер</option>
{servers.map(s => <option key={s.ip} value={s.ip}>{s.ip} ({s.dns})</option>)} {servers.map(s => <option key={s.ip} value={s.ip}>{s.ip} ({s.dns})</option>)}
</select> </select>
</div> </div>
<div className="col-md-4"> <div className="col-12 col-md-4">
<label className="form-label">Тип туннеля</label> <label className="form-label">Тип туннеля</label>
<select className="form-select" value={newConnection.tunnelType} onChange={e => setNewConnection({ ...newConnection, tunnelType: e.target.value })}> <select className="form-select" value={newConnection.tunnelType} onChange={e => setNewConnection({ ...newConnection, tunnelType: e.target.value })}>
<option value="GRE">GRE</option> <option value="GRE">GRE</option>
@@ -1111,11 +1111,11 @@ function ServerManager() {
<option value="OpenVPN">OpenVPN</option> <option value="OpenVPN">OpenVPN</option>
</select> </select>
</div> </div>
<div className="col-md-4"> <div className="col-12 col-md-4">
<label className="form-label">IP туннеля A</label> <label className="form-label">IP туннеля A</label>
<input className="form-control" value={newConnection.ipA} onChange={e => setNewConnection({ ...newConnection, ipA: e.target.value })} placeholder="10.10.100.1" /> <input className="form-control" value={newConnection.ipA} onChange={e => setNewConnection({ ...newConnection, ipA: e.target.value })} placeholder="10.10.100.1" />
</div> </div>
<div className="col-md-4"> <div className="col-12 col-md-4">
<label className="form-label">IP туннеля B</label> <label className="form-label">IP туннеля B</label>
<input className="form-control" value={newConnection.ipB} onChange={e => setNewConnection({ ...newConnection, ipB: e.target.value })} placeholder="10.10.100.2" /> <input className="form-control" value={newConnection.ipB} onChange={e => setNewConnection({ ...newConnection, ipB: e.target.value })} placeholder="10.10.100.2" />
</div> </div>
@@ -1255,8 +1255,8 @@ function ServerManager() {
<span className="badge bg-blue-lt text-blue">{newConnection.to || 'B'}</span> <span className="badge bg-blue-lt text-blue">{newConnection.to || 'B'}</span>
</div> </div>
</div> </div>
<div className="row g-3"> <div className="row g-2 g-md-3">
<div className="col-md-4"> <div className="col-12 col-md-4">
<FormField <FormField
label="Туннель" label="Туннель"
name="tunnelType" name="tunnelType"
@@ -1272,7 +1272,7 @@ function ServerManager() {
]} ]}
/> />
</div> </div>
<div className="col-md-4"> <div className="col-12 col-md-4">
<FormField <FormField
label="IP сервера A" label="IP сервера A"
name="ipA" name="ipA"
@@ -1282,7 +1282,7 @@ function ServerManager() {
required required
/> />
</div> </div>
<div className="col-md-4"> <div className="col-12 col-md-4">
<FormField <FormField
label="IP сервера B" label="IP сервера B"
name="ipB" name="ipB"
frontend/src/SettingsPage.jsx
+14 -14
View File
@@ -577,7 +577,7 @@ export default function SettingsPage() {
<> <>
<SectionHeading title="Сеть и AS" icon={IconNetwork} /> <SectionHeading title="Сеть и AS" icon={IconNetwork} />
<div className="row g-2"> <div className="row g-2">
<div className="col-md-6"> <div className="col-12 col-md-6">
<FormField <FormField
label="Базовая AS" label="Базовая AS"
name="baseAS" name="baseAS"
@@ -597,7 +597,7 @@ export default function SettingsPage() {
<> <>
<SectionHeading title="Пинг через MikroTik" icon={IconCloud} /> <SectionHeading title="Пинг через MikroTik" icon={IconCloud} />
<div className="row g-2"> <div className="row g-2">
<div className="col-md-6"> <div className="col-12 col-md-6">
<FormField <FormField
label="Домен для пинга" label="Домен для пинга"
name="pingDomain" name="pingDomain"
@@ -609,7 +609,7 @@ export default function SettingsPage() {
disabled={saving} disabled={saving}
/> />
</div> </div>
<div className="col-md-6"> <div className="col-12 col-md-6">
<FormField <FormField
label="Срок кеша пинга (мин)" label="Срок кеша пинга (мин)"
name="pingCacheMinutes" name="pingCacheMinutes"
@@ -622,7 +622,7 @@ export default function SettingsPage() {
min={0} min={0}
/> />
</div> </div>
<div className="col-md-6"> <div className="col-12 col-md-6">
<FormField <FormField
label="Кеш пингов на карте сети (сек)" label="Кеш пингов на карте сети (сек)"
name="networkMapPingCacheSeconds" name="networkMapPingCacheSeconds"
@@ -638,7 +638,7 @@ export default function SettingsPage() {
<div className="col-12 mt-3"> <div className="col-12 mt-3">
<h4 className="subheader">Измерение скорости (интерфейсы)</h4> <h4 className="subheader">Измерение скорости (интерфейсы)</h4>
</div> </div>
<div className="col-md-4"> <div className="col-12 col-md-4">
<label className="form-label">Протокол измерения</label> <label className="form-label">Протокол измерения</label>
<select <select
className="form-select" className="form-select"
@@ -656,7 +656,7 @@ export default function SettingsPage() {
умолчанию для инструментов RouterOS. умолчанию для инструментов RouterOS.
</div> </div>
</div> </div>
<div className="col-md-4"> <div className="col-12 col-md-4">
<FormField <FormField
label="Время замера (сек)" label="Время замера (сек)"
name="interfaceSpeedTestDurationSeconds" name="interfaceSpeedTestDurationSeconds"
@@ -670,7 +670,7 @@ export default function SettingsPage() {
max={600} max={600}
/> />
</div> </div>
<div className="col-md-4"> <div className="col-12 col-md-4">
<FormField <FormField
label="Кеш результата замера (мин)" label="Кеш результата замера (мин)"
name="interfaceSpeedTestCacheMinutes" name="interfaceSpeedTestCacheMinutes"
@@ -750,7 +750,7 @@ export default function SettingsPage() {
</div> </div>
{pingServicesSource === 'router' && ( {pingServicesSource === 'router' && (
<div className="row g-2"> <div className="row g-2">
<div className="col-md-6"> <div className="col-12 col-md-6">
<label className="form-label">Домашний роутер</label> <label className="form-label">Домашний роутер</label>
<div className={saving ? 'opacity-75 pe-none' : ''}> <div className={saving ? 'opacity-75 pe-none' : ''}>
<ServerAutocompleteInput <ServerAutocompleteInput
@@ -769,7 +769,7 @@ export default function SettingsPage() {
первый jumphost. первый jumphost.
</div> </div>
</div> </div>
<div className="col-md-6"> <div className="col-12 col-md-6">
<FormField <FormField
label="IP шлюза (не обязательно)" label="IP шлюза (не обязательно)"
name="pingServicesGatewayIp" name="pingServicesGatewayIp"
@@ -793,7 +793,7 @@ export default function SettingsPage() {
Настройки страницы «Uptime Monitor»: интервал проверки доступности Jumphost/Home и способ проверки. Настройки страницы «Uptime Monitor»: интервал проверки доступности Jumphost/Home и способ проверки.
</p> </p>
<div className="row g-2"> <div className="row g-2">
<div className="col-md-6"> <div className="col-12 col-md-6">
<FormField <FormField
label="Интервал проверки (сек)" label="Интервал проверки (сек)"
name="uptimeMonitorIntervalSeconds" name="uptimeMonitorIntervalSeconds"
@@ -807,7 +807,7 @@ export default function SettingsPage() {
max={86400} max={86400}
/> />
</div> </div>
<div className="col-md-6"> <div className="col-12 col-md-6">
<label className="form-label">Тип проверки</label> <label className="form-label">Тип проверки</label>
<select <select
className="form-select" className="form-select"
@@ -823,7 +823,7 @@ export default function SettingsPage() {
HTTP: подключение к RouterOS API. Внутренний: пинг через туннель (как на карте сети). Внешний: пинг внешнего IP с другого jumphost. HTTP: подключение к RouterOS API. Внутренний: пинг через туннель (как на карте сети). Внешний: пинг внешнего IP с другого jumphost.
</div> </div>
</div> </div>
<div className="col-md-6"> <div className="col-12 col-md-6">
<FormField <FormField
label="Кеш результатов (сек)" label="Кеш результатов (сек)"
name="uptimeMonitorCacheSeconds" name="uptimeMonitorCacheSeconds"
@@ -872,7 +872,7 @@ export default function SettingsPage() {
<> <>
<SectionHeading title="Настройка PTR зоны" icon={IconWorld} /> <SectionHeading title="Настройка PTR зоны" icon={IconWorld} />
<div className="row g-2"> <div className="row g-2">
<div className="col-md-6"> <div className="col-12 col-md-6">
<FormField <FormField
label="Заменить в DNS домене" label="Заменить в DNS домене"
name="ptrZoneReplaceFrom" name="ptrZoneReplaceFrom"
@@ -884,7 +884,7 @@ export default function SettingsPage() {
disabled={saving} disabled={saving}
/> />
</div> </div>
<div className="col-md-6"> <div className="col-12 col-md-6">
<FormField <FormField
label="Заменить на" label="Заменить на"
name="ptrZoneReplaceTo" name="ptrZoneReplaceTo"
frontend/src/components/CommunityStats.jsx
+6 -6
View File
@@ -100,8 +100,8 @@ function CommunityStats({ communities = [] }) {
) : ( ) : (
<> <>
{/* Общая статистика */} {/* Общая статистика */}
<div className="row mb-4"> <div className="row g-2 g-md-3 mb-4">
<div className="col-md-4"> <div className="col-6 col-md-4">
<div className="card card-sm bg-blue-lt"> <div className="card card-sm bg-blue-lt">
<div className="card-body"> <div className="card-body">
<div className="h1 mb-0">{stats.length}</div> <div className="h1 mb-0">{stats.length}</div>
@@ -109,7 +109,7 @@ function CommunityStats({ communities = [] }) {
</div> </div>
</div> </div>
</div> </div>
<div className="col-md-4"> <div className="col-6 col-md-4">
<div className="card card-sm bg-green-lt"> <div className="card card-sm bg-green-lt">
<div className="card-body"> <div className="card-body">
<div className="h1 mb-0">{totalUsage}</div> <div className="h1 mb-0">{totalUsage}</div>
@@ -117,7 +117,7 @@ function CommunityStats({ communities = [] }) {
</div> </div>
</div> </div>
</div> </div>
<div className="col-md-4"> <div className="col-6 col-md-4">
<div className="card card-sm bg-purple-lt"> <div className="card card-sm bg-purple-lt">
<div className="card-body"> <div className="card-body">
<div className="h1 mb-0">{Object.keys(statsByCategory).length}</div> <div className="h1 mb-0">{Object.keys(statsByCategory).length}</div>
@@ -198,12 +198,12 @@ function CommunityStats({ communities = [] }) {
{Object.keys(statsByCategory).length > 1 && ( {Object.keys(statsByCategory).length > 1 && (
<div> <div>
<h4 className="mb-3">По категориям</h4> <h4 className="mb-3">По категориям</h4>
<div className="row g-3"> <div className="row g-2 g-md-3">
{Object.entries(statsByCategory).map(([category, items]) => { {Object.entries(statsByCategory).map(([category, items]) => {
const categoryTotal = items.reduce((sum, item) => sum + item.count, 0); const categoryTotal = items.reduce((sum, item) => sum + item.count, 0);
const categoryPercentage = ((categoryTotal / totalUsage) * 100).toFixed(1); const categoryPercentage = ((categoryTotal / totalUsage) * 100).toFixed(1);
return ( return (
<div key={category} className="col-md-6"> <div key={category} className="col-12 col-md-6">
<div className="card card-sm"> <div className="card card-sm">
<div className="card-body"> <div className="card-body">
<div className="d-flex justify-content-between align-items-start mb-2"> <div className="d-flex justify-content-between align-items-start mb-2">
frontend/src/components/ImportModal.jsx
+2 -2
View File
@@ -178,7 +178,7 @@ function ImportModal({
{/* Stats */} {/* Stats */}
<div className="row g-2"> <div className="row g-2">
<div className="col-md-6"> <div className="col-12 col-md-6">
<div className="card bg-green-lt"> <div className="card bg-green-lt">
<div className="card-body py-2"> <div className="card-body py-2">
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
@@ -191,7 +191,7 @@ function ImportModal({
</div> </div>
</div> </div>
</div> </div>
<div className="col-md-6"> <div className="col-12 col-md-6">
<div className="card bg-red-lt"> <div className="card bg-red-lt">
<div className="card-body py-2"> <div className="card-body py-2">
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
frontend/src/components/PageHeader.jsx
+1 -1
View File
@@ -29,7 +29,7 @@ function PageHeader({ title, icon, pretitle, actions, meta }) {
</div> </div>
{actions && ( {actions && (
<div className="row mt-2"> <div className="row mt-2">
<div className="col d-print-none"> <div className="col d-print-none overflow-auto">
{actions} {actions}
</div> </div>
</div> </div>
frontend/src/components/QuickAddBar.jsx
+1 -1
View File
@@ -59,7 +59,7 @@ function QuickAddBar({
value={value} value={value}
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
/> />
<div className="row g-3 mt-2"> <div className="row g-2 g-md-3 mt-2">
<div className="col"> <div className="col">
<div className="card"><div className="card-body p-2"> <div className="card"><div className="card-body p-2">
<div className="text-muted">Готово</div> <div className="text-muted">Готово</div>
frontend/src/components/TopNStats.jsx
+3 -3
View File
@@ -58,9 +58,9 @@ function TopNStats({ data, loading }) {
}; };
return ( return (
<div className="row g-3"> <div className="row g-2 g-md-3">
{/* Top Страны */} {/* Top Страны */}
<div className="col-md-6"> <div className="col-12 col-md-6">
<div className="card h-100"> <div className="card h-100">
<div className="card-header"> <div className="card-header">
<h3 className="card-title"> <h3 className="card-title">
@@ -107,7 +107,7 @@ function TopNStats({ data, loading }) {
</div> </div>
{/* Top Провайдеры */} {/* Top Провайдеры */}
<div className="col-md-6"> <div className="col-12 col-md-6">
<div className="card h-100"> <div className="card h-100">
<div className="card-header"> <div className="card-header">
<h3 className="card-title"> <h3 className="card-title">
frontend/src/components/server/LinkGeneratorModal.jsx
+3 -3
View File
@@ -55,8 +55,8 @@ function LinkGeneratorModal({ show, server, urlSettings, onUrlSettingsChange, on
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="row"> <div className="row g-2">
<div className="col-md-6"> <div className="col-12 col-md-6">
<h6 className="mb-3">Настройки URL</h6> <h6 className="mb-3">Настройки URL</h6>
<div className="mb-3"> <div className="mb-3">
<label className="form-label">Базовый URL</label> <label className="form-label">Базовый URL</label>
@@ -99,7 +99,7 @@ function LinkGeneratorModal({ show, server, urlSettings, onUrlSettingsChange, on
/> />
</div> </div>
</div> </div>
<div className="col-md-6"> <div className="col-12 col-md-6">
<div className="mb-3"> <div className="mb-3">
<label className="form-label">Telegram Gateway</label> <label className="form-label">Telegram Gateway</label>
<input <input
frontend/src/index.css
+50 -5
View File
@@ -166,20 +166,29 @@ button:focus-visible,
transform: scale(1.05); transform: scale(1.05);
} }
/* Minimum touch target size for mobile */ /* Minimum touch target size for mobile (Tabler / a11y) */
@media (max-width: 768px) { @media (max-width: 768px) {
.btn, .page-link, .dropdown-item { .btn:not(.btn-icon), .page-link, .dropdown-item {
min-height: 44px; min-height: 44px;
min-width: 44px; padding-top: 0.5rem;
padding-bottom: 0.5rem;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.btn-icon { .btn-icon {
min-width: 44px;
min-height: 44px;
width: 44px; width: 44px;
height: 44px; height: 44px;
} }
.navbar-toggler {
min-width: 44px;
min-height: 44px;
padding: 0.5rem;
}
} }
/* Enhanced table row interactions */ /* Enhanced table row interactions */
@@ -429,21 +438,57 @@ button:focus-visible,
} }
/* ===== Responsive Improvements ===== */ /* ===== Responsive Improvements ===== */
@media (min-width: 576px) {
.w-sm-auto { width: auto !important; }
}
@media (max-width: 768px) { @media (max-width: 768px) {
.card-sm .avatar { .card-sm .avatar,
.card .avatar.avatar-lg {
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
} }
.card-sm .h2 { .card-sm .h2,
.card .h3.mb-0 {
font-size: 1.25rem; font-size: 1.25rem;
} }
.table-responsive { .table-responsive {
font-size: 0.875rem; font-size: 0.875rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-responsive .table {
margin-bottom: 0;
}
.table-responsive .table th,
.table-responsive .table td {
white-space: nowrap;
} }
.btn-group { .btn-group {
flex-wrap: wrap; flex-wrap: wrap;
} }
.page-title {
font-size: 1.35rem;
}
.page-header .header-actions {
width: 100%;
}
/* Карточки и ряды: компактные отступы на мобильных */
.row.g-3 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
.card-title { font-size: 1rem; }
.card-header { padding: 0.5rem 0.75rem; }
}
/* Универсальные мобильные колонки: явный full-width ниже md */
@media (max-width: 767.98px) {
.row .col-md-4:not([class*="col-12"]):not([class*="col-sm"]),
.row .col-md-6:not([class*="col-12"]):not([class*="col-sm"]) {
flex: 0 0 100%;
max-width: 100%;
}
} }