mirror of
https://github.com/kernelkit/infix.git
synced 2026-08-02 22:03:01 +02:00
webui: fix formatting in dhcp and lldp pages
Signed-off-by: Joachim Wiberg <troglobit@gmail.com>
This commit is contained in:
Joachim Wiberg
@@ -200,6 +200,8 @@ a:hover {
|
||||
flex: 1;
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
@@ -885,6 +887,20 @@ details[open].nav-group-top > summary.nav-group-summary-top::after {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.text-muted { color: var(--fg-muted); }
|
||||
|
||||
/* Page title — used at the top of each content page */
|
||||
.page-title {
|
||||
font-size: 1.375rem;
|
||||
font-weight: 700;
|
||||
color: var(--fg);
|
||||
letter-spacing: -0.025em;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Removes the redundant wrapping div some pages use */
|
||||
.page-content { display: contents; }
|
||||
|
||||
/* ==========================================================================
|
||||
Domain Specific: Firewall, Keystore, Firmware
|
||||
========================================================================== */
|
||||
@@ -1022,6 +1038,42 @@ details[open].nav-group-top > summary.nav-group-summary-top::after {
|
||||
.light .badge-info { background: #dbeafe; color: #1e40af; }
|
||||
.light .badge-neutral { background: var(--slate-100); color: var(--slate-600); }
|
||||
|
||||
/* Sub-heading within a card body (e.g. "Active Leases" in DHCP) */
|
||||
.section-subtitle {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--fg-muted);
|
||||
padding: 1rem 1.25rem 0.5rem;
|
||||
margin: 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* Row of stat chips (e.g. DHCP counters) */
|
||||
.stats-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* Stat chip: label + value pair */
|
||||
.stat-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.3rem 0.65rem;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.stat-chip-label { color: var(--fg-muted); font-weight: 500; }
|
||||
.stat-chip-value { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* Interfaces */
|
||||
.iface-name { white-space: nowrap; font-weight: 500; }
|
||||
.iface-name a { color: var(--primary); text-decoration: none; }
|
||||
|
||||
@@ -9,24 +9,26 @@
|
||||
|
||||
{{if .DHCP}}
|
||||
<section class="info-card">
|
||||
<h2>DHCP Server</h2>
|
||||
<div class="card-header">DHCP Server</div>
|
||||
{{if .DHCP.Enabled}}
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<td>
|
||||
<span class="status-dot {{if .DHCP.Enabled}}status-up{{else}}status-down{{end}}"></span>
|
||||
{{if .DHCP.Enabled}}Enabled{{else}}Disabled{{end}}
|
||||
<span class="status-dot status-up"></span>
|
||||
Enabled
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
{{end}}
|
||||
|
||||
<div class="stats-row">
|
||||
<span class="zone-badge"><span class="zone-badge-label">Discovers</span><span class="zone-badge-value">{{.DHCP.Stats.InDiscoveries}}</span></span>
|
||||
<span class="zone-badge"><span class="zone-badge-label">Requests</span><span class="zone-badge-value">{{.DHCP.Stats.InRequests}}</span></span>
|
||||
<span class="zone-badge"><span class="zone-badge-label">Releases</span><span class="zone-badge-value">{{.DHCP.Stats.InReleases}}</span></span>
|
||||
<span class="zone-badge"><span class="zone-badge-label">Offers</span><span class="zone-badge-value">{{.DHCP.Stats.OutOffers}}</span></span>
|
||||
<span class="zone-badge"><span class="zone-badge-label">Acks</span><span class="zone-badge-value">{{.DHCP.Stats.OutAcks}}</span></span>
|
||||
<span class="zone-badge"><span class="zone-badge-label">Naks</span><span class="zone-badge-value">{{.DHCP.Stats.OutNaks}}</span></span>
|
||||
<span class="stat-chip"><span class="stat-chip-label">Discovers</span><span class="stat-chip-value">{{.DHCP.Stats.InDiscoveries}}</span></span>
|
||||
<span class="stat-chip"><span class="stat-chip-label">Requests</span><span class="stat-chip-value">{{.DHCP.Stats.InRequests}}</span></span>
|
||||
<span class="stat-chip"><span class="stat-chip-label">Releases</span><span class="stat-chip-value">{{.DHCP.Stats.InReleases}}</span></span>
|
||||
<span class="stat-chip"><span class="stat-chip-label">Offers</span><span class="stat-chip-value">{{.DHCP.Stats.OutOffers}}</span></span>
|
||||
<span class="stat-chip"><span class="stat-chip-label">Acks</span><span class="stat-chip-value">{{.DHCP.Stats.OutAcks}}</span></span>
|
||||
<span class="stat-chip"><span class="stat-chip-label">Naks</span><span class="stat-chip-value">{{.DHCP.Stats.OutNaks}}</span></span>
|
||||
</div>
|
||||
|
||||
{{if .DHCP.Leases}}
|
||||
@@ -45,8 +47,8 @@
|
||||
<tbody>
|
||||
{{range .DHCP.Leases}}
|
||||
<tr>
|
||||
<td class="num">{{.Address}}</td>
|
||||
<td class="num">{{.MAC}}</td>
|
||||
<td>{{.Address}}</td>
|
||||
<td>{{.MAC}}</td>
|
||||
<td>{{if .Hostname}}{{.Hostname}}{{else}}<span class="text-muted">—</span>{{end}}</td>
|
||||
<td>{{.Expires}}</td>
|
||||
<td>{{if .ClientID}}{{.ClientID}}{{else}}<span class="text-muted">—</span>{{end}}</td>
|
||||
@@ -56,12 +58,13 @@
|
||||
</table>
|
||||
</div>
|
||||
{{else}}
|
||||
<p class="text-muted">No active leases.</p>
|
||||
<p class="empty-message">No active leases.</p>
|
||||
{{end}}
|
||||
</section>
|
||||
{{else if not .Error}}
|
||||
<section class="info-card">
|
||||
<p class="text-muted">DHCP server data not available.</p>
|
||||
<div class="card-header">DHCP Server</div>
|
||||
<p class="empty-message">DHCP server data not available.</p>
|
||||
</section>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
{{if .Neighbors}}
|
||||
<section class="info-card">
|
||||
<h2>LLDP Neighbors</h2>
|
||||
<div class="card-header">LLDP Neighbors</div>
|
||||
<div class="data-table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
@@ -26,11 +26,11 @@
|
||||
{{range .Neighbors}}
|
||||
<tr>
|
||||
<td>{{.LocalPort}}</td>
|
||||
<td class="num">{{.ChassisID}}</td>
|
||||
<td>{{.ChassisID}}</td>
|
||||
<td>{{if .SystemName}}{{.SystemName}}{{else}}<span class="text-muted">—</span>{{end}}</td>
|
||||
<td class="num">{{if .PortID}}{{.PortID}}{{else}}<span class="text-muted">—</span>{{end}}</td>
|
||||
<td>{{if .PortID}}{{.PortID}}{{else}}<span class="text-muted">—</span>{{end}}</td>
|
||||
<td>{{if .PortDesc}}{{.PortDesc}}{{else}}<span class="text-muted">—</span>{{end}}</td>
|
||||
<td class="num">{{if .MgmtAddress}}{{.MgmtAddress}}{{else}}<span class="text-muted">—</span>{{end}}</td>
|
||||
<td>{{if .MgmtAddress}}{{.MgmtAddress}}{{else}}<span class="text-muted">—</span>{{end}}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
@@ -39,7 +39,8 @@
|
||||
</section>
|
||||
{{else if not .Error}}
|
||||
<section class="info-card">
|
||||
<p class="text-muted">No LLDP neighbors discovered.</p>
|
||||
<div class="card-header">LLDP Neighbors</div>
|
||||
<p class="empty-message">No LLDP neighbors discovered.</p>
|
||||
</section>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user