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

refactor(NetworkConfigManager): enhance layout and styling for improved responsiveness; adjust flex properties for better alignment and display of elements
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m46s
Details

Browse Source
This commit is contained in:
denozord
2026-01-22 15:05:49 +07:00
parent e9a029e568
commit 8f81cf9645
1 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/NetworkConfigManager.jsx
+22 -22
View File
@@ -967,14 +967,14 @@ function NetworkConfigManager() {
</div>
{/* Центральная часть: информация */}
<div className="flex-grow-1 py-2 px-3" style={{ minWidth: 0 }}>
<div className="flex-grow-1 py-2 px-3" style={{ minWidth: 0, flex: '1 1 auto' }}>
{/* Верхняя строка: флаг, название, провайдер */}
<div className="d-flex align-items-center mb-1">
<div className="d-flex align-items-center me-3" style={{ minWidth: 0 }}>
<div className="d-flex align-items-center mb-1 flex-wrap">
<div className="d-flex align-items-center me-3" style={{ flex: '0 0 auto' }}>
{displayCountry && (
<span className="me-2" style={{ fontSize: '1.25rem' }}>{countryToFlag(displayCountry)}</span>
<span className="me-2" style={{ fontSize: '1.25rem', flexShrink: 0 }}>{countryToFlag(displayCountry)}</span>
)}
<div style={{ minWidth: 0 }}>
<div style={{ whiteSpace: 'nowrap' }}>
<span className="fw-semibold">{gateway.description || provider || gateway.ip || '—'}</span>
{provider && (
<>
@@ -987,20 +987,20 @@ function NetworkConfigManager() {
{/* Зеленый блок с маршрутом */}
{displayText && (
<span className="badge bg-success-lt text-success ms-auto" style={{ whiteSpace: 'nowrap' }}>
<span className="badge bg-success-lt text-success ms-auto" style={{ whiteSpace: 'nowrap', flexShrink: 0, fontSize: '0.875rem' }}>
{displayText}
</span>
)}
</div>
{/* Нижняя строка: DNS + badges */}
<div className="d-flex align-items-center gap-2">
<div className="d-flex align-items-center gap-2 flex-wrap">
{server && (
<code className="text-muted" style={{ fontSize: '0.8rem' }}>
<code className="text-muted" style={{ fontSize: '0.8rem', wordBreak: 'break-all' }}>
{server.dns || server.ip || gateway.serverId}
</code>
)}
<span className={`badge bg-${gatewayType.color}-lt text-${gatewayType.color}`}>
<span className={`badge bg-${gatewayType.color}-lt text-${gatewayType.color}`} style={{ flexShrink: 0 }}>
{gatewayType.label}
</span>
{gateway.ip && (
@@ -1008,7 +1008,7 @@ function NetworkConfigManager() {
className="btn btn-ghost-secondary btn-icon btn-sm p-1"
onClick={() => copyToClipboard(gateway.ip)}
title="Копировать IP"
style={{ width: '20px', height: '20px' }}
style={{ width: '20px', height: '20px', flexShrink: 0 }}
>
<IconCopy size={12} />
</button>
@@ -1017,7 +1017,7 @@ function NetworkConfigManager() {
</div>
{/* Правая часть: действия */}
<div className="d-flex align-items-center gap-2 px-3 border-start">
<div className="d-flex align-items-center gap-2 px-3 border-start" style={{ flexShrink: 0 }}>
<button
className="btn btn-outline-secondary btn-sm"
onClick={() => handleEditGateway(gateway)}
@@ -1102,34 +1102,34 @@ function NetworkConfigManager() {
</div>
{/* Центральная часть: информация */}
<div className="flex-grow-1 py-2 px-3" style={{ minWidth: 0 }}>
<div className="flex-grow-1 py-2 px-3" style={{ minWidth: 0, flex: '1 1 auto' }}>
{/* Верхняя строка: флаг, название */}
<div className="d-flex align-items-center mb-1">
<div className="d-flex align-items-center me-3" style={{ minWidth: 0 }}>
<div className="d-flex align-items-center mb-1 flex-wrap">
<div className="d-flex align-items-center me-3" style={{ flex: '0 0 auto' }}>
{displayCountry && (
<span className="me-2" style={{ fontSize: '1.25rem' }}>{countryToFlag(displayCountry)}</span>
<span className="me-2" style={{ fontSize: '1.25rem', flexShrink: 0 }}>{countryToFlag(displayCountry)}</span>
)}
<div style={{ minWidth: 0 }}>
<div style={{ whiteSpace: 'nowrap' }}>
<span className="fw-semibold">{interfaceName}</span>
</div>
</div>
{/* Зеленый блок с IP */}
{displayIp && displayIp !== '—' && (
<span className="badge bg-success-lt text-success ms-auto" style={{ whiteSpace: 'nowrap' }}>
<span className="badge bg-success-lt text-success ms-auto" style={{ whiteSpace: 'nowrap', flexShrink: 0, fontSize: '0.875rem' }}>
→ {displayIp}
</span>
)}
</div>
{/* Нижняя строка: DNS + badges */}
<div className="d-flex align-items-center gap-2">
<div className="d-flex align-items-center gap-2 flex-wrap">
{displayServerName && (
<code className="text-muted" style={{ fontSize: '0.8rem' }}>
<code className="text-muted" style={{ fontSize: '0.8rem', wordBreak: 'break-all' }}>
{displayServerName}
</code>
)}
<span className={`badge bg-${interfaceTypeColor}-lt text-${interfaceTypeColor}`}>
<span className={`badge bg-${interfaceTypeColor}-lt text-${interfaceTypeColor}`} style={{ flexShrink: 0 }}>
{iface.type}
</span>
{displayIp && displayIp !== '—' && (
@@ -1137,7 +1137,7 @@ function NetworkConfigManager() {
className="btn btn-ghost-secondary btn-icon btn-sm p-1"
onClick={() => copyToClipboard(displayIp)}
title="Копировать IP"
style={{ width: '20px', height: '20px' }}
style={{ width: '20px', height: '20px', flexShrink: 0 }}
>
<IconCopy size={12} />
</button>
@@ -1146,7 +1146,7 @@ function NetworkConfigManager() {
</div>
{/* Правая часть: действия */}
<div className="d-flex align-items-center gap-2 px-3 border-start">
<div className="d-flex align-items-center gap-2 px-3 border-start" style={{ flexShrink: 0 }}>
<button
className="btn btn-outline-secondary btn-sm"
onClick={() => handleEditInterface(iface)}