LotusGuild/gandalf
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix topology chain order and inspector SFP port width

Browse Source 
Topology:
- Correct series layout: UDM-Pro → USW-Agg → Pro 24 PoE (not a fork)
- Remove CSS fork divs, replace with straight vertical connectors
- Labels: WAN · 10G SFP+ (UDM→Agg), 10G trunk (Agg→PoE)
- Remove ISL from legend (no parallel switch pair)

Inspector:
- Fix USW-Agg port blocks appearing narrower than other switches
- SFP ports in rows now use same width (34px) as copper ports;
  all-SFP switches like USL8A no longer look undersized

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-03-14 22:42:38 -04:00
parent e8314b5ba3
commit 2c67944b4b
2 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
static/style.css
View File

@@ -1076,9 +1076,9 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-amber); }
letter-spacing: 0;
}
/* SFP port (in rows — slightly narrower to suggest cage) */
/* SFP port (in rows) — width overridden to 34px further down */
.switch-port-block.sfp-port {
width: 28px;
width: 34px;
height: 38px;
font-size: .55em;
}
@@ -2006,9 +2006,10 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-amber); }
letter-spacing: .04em;
border-left-width: 3px;
}
/* SFP port in rows */
/* SFP port in rows — same width as copper ports so all-SFP switches
(e.g. USW-Agg / USL8A) don't appear narrower than other switches */
.switch-port-block.sfp-port {
width: 26px;
width: 34px;
height: 40px;
font-size: .55em;
border-left-width: 2px;

69
templates/index.html
View File

@@ -62,47 +62,47 @@
</div>
</div>
<!-- Fork: UDM-Pro → both switches via CSS (no SVG distortion) -->
<div class="topo-fork">
<div class="topo-fork-stem"></div>
<div class="topo-fork-bar"><span class="topo-fork-label">10G DAC</span></div>
<div class="topo-fork-drop topo-fork-drop-l"></div>
<div class="topo-fork-drop topo-fork-drop-r"></div>
<!-- UDM-Pro → USW-Agg (10G SFP+) -->
<div class="topo-vc">
<div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
<span class="topo-vc-label">10G SFP+</span>
</div>
<!-- ══════════════════════════════════════════════════════════════
TIER 3: Switches — each in a 50% half so fork drops align
TIER 3: USW-Aggregation
══════════════════════════════════════════════════════════ -->
<div class="topo-sw-row">
<!-- USW-Aggregation in left half (center = 25% of total width) -->
<div class="topo-sw-half">
<div class="topo-v2-node topo-v2-switch" id="topo-switch-agg">
<span class="topo-v2-icon">⬡</span>
<span class="topo-v2-label">USW-Agg</span>
<span class="topo-v2-sub">Aggregation · RU22</span>
<span class="topo-v2-sub">8 × 10G SFP+</span>
<span class="topo-v2-vlan">VLAN90 · 10.10.90.x/24</span>
</div>
<div class="topo-tier">
<div class="topo-v2-node topo-v2-switch" id="topo-switch-agg">
<span class="topo-v2-icon">⬡</span>
<span class="topo-v2-label">USW-Agg</span>
<span class="topo-v2-sub">Aggregation · RU22</span>
<span class="topo-v2-sub">8 × 10G SFP+</span>
<span class="topo-v2-vlan">VLAN90 · 10.10.90.x/24</span>
</div>
<!-- Pro 24 PoE in right half (center = 75% of total width) -->
<div class="topo-sw-half">
<div class="topo-v2-node topo-v2-switch" id="topo-switch-poe">
<span class="topo-v2-icon">⬡</span>
<span class="topo-v2-label">Pro 24 PoE</span>
<span class="topo-v2-sub">24-Port · RU23</span>
<span class="topo-v2-sub">24 × 1G PoE</span>
<span class="topo-v2-vlan">DHCP · mgmt</span>
</div>
</div>
</div>
<!-- Drop connectors from switch centres down to bus rails -->
<div class="topo-sw-drops">
<div class="topo-sw-drop topo-sw-drop-l"></div>
<div class="topo-sw-drop topo-sw-drop-r"></div>
<!-- USW-Agg → Pro 24 PoE (10G trunk) -->
<div class="topo-vc">
<div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
<span class="topo-vc-label">10G trunk</span>
</div>
<!-- ══════════════════════════════════════════════════════════════
TIER 4: Pro 24 PoE
══════════════════════════════════════════════════════════ -->
<div class="topo-tier">
<div class="topo-v2-node topo-v2-switch" id="topo-switch-poe">
<span class="topo-v2-icon">⬡</span>
<span class="topo-v2-label">Pro 24 PoE</span>
<span class="topo-v2-sub">24-Port · RU23</span>
<span class="topo-v2-sub">24 × 1G PoE</span>
<span class="topo-v2-vlan">DHCP · mgmt</span>
</div>
</div>
<!-- Pro 24 PoE → host bus section -->
<div class="topo-vc">
<div class="topo-vc-wire" style="background:var(--border);opacity:.5;"></div>
</div>
<!-- ══════════════════════════════════════════════════════════════
@@ -159,7 +159,6 @@
<!-- ── Legend ── -->
<div class="topo-legend">
<div class="topo-legend-item"><span class="topo-legend-line-wan"></span> WAN / uplink</div>
<div class="topo-legend-item"><span class="topo-legend-line-isl"></span> ISL / inter-switch</div>
<div class="topo-legend-item"><span class="topo-legend-line-10g"></span> 10G SFP+ (Ceph / VLAN90)</div>
<div class="topo-legend-item"><span class="topo-legend-line-1g"></span> 1G DHCP (mgmt)</div>
<div class="topo-legend-item" style="border:1px dashed var(--border); padding:1px 5px; font-size:.56em; color:var(--text-muted);">dashed border = off-rack</div>