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>
{/* Центральная часть: информация */} {/* Центральная часть: информация */}
<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 mb-1 flex-wrap">
<div className="d-flex align-items-center me-3" style={{ minWidth: 0 }}> <div className="d-flex align-items-center me-3" style={{ flex: '0 0 auto' }}>
{displayCountry && ( {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> <span className="fw-semibold">{gateway.description || provider || gateway.ip || '—'}</span>
{provider && ( {provider && (
<> <>
@@ -987,20 +987,20 @@ function NetworkConfigManager() {
{/* Зеленый блок с маршрутом */} {/* Зеленый блок с маршрутом */}
{displayText && ( {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} {displayText}
</span> </span>
)} )}
</div> </div>
{/* Нижняя строка: DNS + badges */} {/* Нижняя строка: DNS + badges */}
<div className="d-flex align-items-center gap-2"> <div className="d-flex align-items-center gap-2 flex-wrap">
{server && ( {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} {server.dns || server.ip || gateway.serverId}
</code> </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} {gatewayType.label}
</span> </span>
{gateway.ip && ( {gateway.ip && (
@@ -1008,7 +1008,7 @@ function NetworkConfigManager() {
className="btn btn-ghost-secondary btn-icon btn-sm p-1" className="btn btn-ghost-secondary btn-icon btn-sm p-1"
onClick={() => copyToClipboard(gateway.ip)} onClick={() => copyToClipboard(gateway.ip)}
title="Копировать IP" title="Копировать IP"
style={{ width: '20px', height: '20px' }} style={{ width: '20px', height: '20px', flexShrink: 0 }}
> >
<IconCopy size={12} /> <IconCopy size={12} />
</button> </button>
@@ -1017,7 +1017,7 @@ function NetworkConfigManager() {
</div> </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 <button
className="btn btn-outline-secondary btn-sm" className="btn btn-outline-secondary btn-sm"
onClick={() => handleEditGateway(gateway)} onClick={() => handleEditGateway(gateway)}
@@ -1102,34 +1102,34 @@ function NetworkConfigManager() {
</div> </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 mb-1 flex-wrap">
<div className="d-flex align-items-center me-3" style={{ minWidth: 0 }}> <div className="d-flex align-items-center me-3" style={{ flex: '0 0 auto' }}>
{displayCountry && ( {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> <span className="fw-semibold">{interfaceName}</span>
</div> </div>
</div> </div>
{/* Зеленый блок с IP */} {/* Зеленый блок с IP */}
{displayIp && displayIp !== '—' && ( {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} → {displayIp}
</span> </span>
)} )}
</div> </div>
{/* Нижняя строка: DNS + badges */} {/* Нижняя строка: DNS + badges */}
<div className="d-flex align-items-center gap-2"> <div className="d-flex align-items-center gap-2 flex-wrap">
{displayServerName && ( {displayServerName && (
<code className="text-muted" style={{ fontSize: '0.8rem' }}> <code className="text-muted" style={{ fontSize: '0.8rem', wordBreak: 'break-all' }}>
{displayServerName} {displayServerName}
</code> </code>
)} )}
<span className={`badge bg-${interfaceTypeColor}-lt text-${interfaceTypeColor}`}> <span className={`badge bg-${interfaceTypeColor}-lt text-${interfaceTypeColor}`} style={{ flexShrink: 0 }}>
{iface.type} {iface.type}
</span> </span>
{displayIp && displayIp !== '—' && ( {displayIp && displayIp !== '—' && (
@@ -1137,7 +1137,7 @@ function NetworkConfigManager() {
className="btn btn-ghost-secondary btn-icon btn-sm p-1" className="btn btn-ghost-secondary btn-icon btn-sm p-1"
onClick={() => copyToClipboard(displayIp)} onClick={() => copyToClipboard(displayIp)}
title="Копировать IP" title="Копировать IP"
style={{ width: '20px', height: '20px' }} style={{ width: '20px', height: '20px', flexShrink: 0 }}
> >
<IconCopy size={12} /> <IconCopy size={12} />
</button> </button>
@@ -1146,7 +1146,7 @@ function NetworkConfigManager() {
</div> </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 <button
className="btn btn-outline-secondary btn-sm" className="btn btn-outline-secondary btn-sm"
onClick={() => handleEditInterface(iface)} onClick={() => handleEditInterface(iface)}