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

refactor(ServerCard): update layout and styling of expanded information section to use Tabler datagrid format
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m4s
Details

Browse Source
This commit is contained in:
denozord
2026-02-17 13:58:58 +07:00
parent 1959b1d1d0
commit ba0557e877
1 changed files with 35 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/server/ServerCard.jsx
+16 -25
View File
@@ -169,38 +169,28 @@ export default function ServerCard({
</div>
</div>
{/* Расширенная информация */}
{/* Расширенная информация в стиле Tabler datagrid */}
{expanded && (
<div className="border-top bg-light" style={{ borderBottomLeftRadius: '7px', borderBottomRightRadius: '7px' }}>
<div className="row g-0">
{/* IP адреса */}
<div className="col-md-6 p-3 border-end">
<div className="text-muted small mb-2 fw-medium">
<IconWorld size={14} className="me-1" />
Сетевые адреса
<div className="border-top bg-light p-3" style={{ borderBottomLeftRadius: '7px', borderBottomRightRadius: '7px' }}>
<div className="datagrid">
<div className="datagrid-item">
<div className="datagrid-title">IP</div>
<div className="datagrid-content"><code className="small">{server.ip}</code></div>
</div>
<div className="row g-2">
<div className="col-4">
<div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>IP</div>
<code className="small">{server.ip}</code>
<div className="datagrid-item">
<div className="datagrid-title">Внешний</div>
<div className="datagrid-content"><code className="small">{server.extIp || '—'}</code></div>
</div>
<div className="col-4">
<div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>Внешний</div>
<code className="small">{server.extIp || '—'}</code>
<div className="datagrid-item">
<div className="datagrid-title">Внутренний</div>
<div className="datagrid-content"><code className="small">{server.internalIp || '—'}</code></div>
</div>
<div className="col-4">
<div className="text-muted" style={{ fontSize: '0.65rem', textTransform: 'uppercase' }}>Внутренний</div>
<code className="small">{server.internalIp || '—'}</code>
</div>
</div>
</div>
{/* Шлюзы */}
<div className="col-md-6 p-3">
<div className="text-muted small mb-2 fw-medium">
<div className="datagrid-item">
<div className="datagrid-title">
<IconServer size={14} className="me-1" />
Шлюзы ({server.gateways?.length || 0})
</div>
<div className="datagrid-content">
{server.gateways?.length > 0 ? (
<div className="d-flex flex-wrap gap-2">
{server.gateways.map((gw, idx) => (
@@ -221,6 +211,7 @@ export default function ServerCard({
</div>
</div>
</div>
</div>
)}
</div>
</div>