From e8314b5ba3d1b651c1e7cc70e8f84619fb9b13e6 Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Sat, 14 Mar 2026 22:35:02 -0400 Subject: [PATCH] Fix topology diagram: replace SVG fork with CSS, fix line alignment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove SVG fork with preserveAspectRatio="none" (caused line width distortion and stretched 10G DAC label like a tube TV) - Replace with pure CSS .topo-fork: stem + horizontal bar + left/right drops, all absolutely positioned at consistent 2px width - Use .topo-sw-row with two 50% halves so switch centres land at exactly 25% and 75% — matching fork drop positions mathematically - ISL rendered via ::before/::after on .topo-sw-row (switch boxes with solid bg cover the line at their edges, leaving only the gap) - Add .topo-sw-drops: two vertical stubs from switch centres to bus rails - All lines are now exactly 2px, no distortion, no misalignment Co-Authored-By: Claude Sonnet 4.6 --- static/style.css | 160 +++++++++++++++++++++++++++++++------------ templates/index.html | 50 ++++++-------- 2 files changed, 140 insertions(+), 70 deletions(-) diff --git a/static/style.css b/static/style.css index 713d386..d396c15 100644 --- a/static/style.css +++ b/static/style.css @@ -1628,46 +1628,109 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-amber); } .topo-v2-switch { border-color:var(--amber); color:var(--amber); text-shadow:var(--glow-amber); } .topo-v2-host { border-color:var(--border); color:var(--text); cursor:default; } -/* ── Switch tier: both switches with inter-switch link ── */ -.topo-switch-pair { - display: flex; - align-items: center; - gap: 0; -} - -.topo-isl { - display: flex; - flex-direction: column; - align-items: center; - padding: 0 12px; - gap: 4px; -} -.topo-isl-wire { - width: 80px; - height: 2px; - background: linear-gradient(to right, var(--amber), var(--amber)); - opacity: .6; +/* ── CSS fork: UDM-Pro → two switches, no SVG distortion ── */ +/* The fork sits between the router tier and the switch row. + Drops are at left:25% and left:75%, matching each switch's + centre (each switch lives in a 50%-wide half). */ +.topo-fork { position: relative; + width: 100%; + height: 40px; + flex-shrink: 0; } -.topo-isl-wire::before, -.topo-isl-wire::after { - content: ''; +/* Vertical stem down from router centre */ +.topo-fork-stem { position: absolute; - top: -3px; + left: 50%; + top: 0; width: 2px; - height: 8px; + height: 50%; + transform: translateX(-50%); background: var(--amber); - opacity: .6; + opacity: .65; } -.topo-isl-wire::before { left: 0; } -.topo-isl-wire::after { right: 0; } -.topo-isl-label { +/* Horizontal bar at mid-height, spanning between the two drop points */ +.topo-fork-bar { + position: absolute; + left: 25%; + right: 25%; + top: calc(50% - 1px); + height: 2px; + background: var(--amber); + opacity: .55; + display: flex; + justify-content: center; +} +.topo-fork-label { + position: absolute; + top: -13px; font-size: .54em; color: var(--amber); - opacity: .75; white-space: nowrap; - letter-spacing: .05em; + letter-spacing: .06em; font-family: var(--font); + opacity: .85; + background: var(--bg); + padding: 0 4px; + text-shadow: var(--glow-amber); +} +/* Left and right vertical drops from bar down to switch tops */ +.topo-fork-drop { + position: absolute; + top: 50%; + width: 2px; + height: 50%; + background: var(--amber); + opacity: .55; +} +.topo-fork-drop-l { left: 25%; transform: translateX(-50%); } +.topo-fork-drop-r { left: 75%; transform: translateX(-50%); } + +/* ── Switch row: two equal 50% halves ── */ +/* Each switch is centred in its half, so their centres are at + exactly 25% and 75% — matching the fork drops above. */ +.topo-sw-row { + display: flex; + width: 100%; + position: relative; + align-items: center; +} +.topo-sw-half { + width: 50%; + display: flex; + justify-content: center; + padding: 0 16px; + position: relative; + z-index: 1; /* sit above the ISL line */ +} +/* ISL line rendered as ::before — switch boxes (bg3) cover it at their edges */ +.topo-sw-row::before { + content: ''; + position: absolute; + left: 25%; + right: 25%; + top: 50%; + height: 2px; + background: var(--amber); + opacity: .35; + z-index: 0; +} +/* ISL label centred between the two switches */ +.topo-sw-row::after { + content: '10G ISL'; + position: absolute; + left: 50%; + transform: translateX(-50%); + top: calc(50% - 14px); + font-size: .5em; + color: var(--amber); + white-space: nowrap; + font-family: var(--font); + letter-spacing: .06em; + opacity: .65; + background: var(--bg); + padding: 0 5px; + z-index: 2; } /* ── Dual-home bus section ── */ @@ -1839,21 +1902,34 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-amber); } .topo-v2-badge-degraded{ color:var(--orange); border-color:var(--orange); } .topo-v2-badge-unknown { color:var(--text-muted); border-color:var(--border); } -/* vertical connector from router to switch tier */ -.topo-v2-fork { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - position: relative; - height: 50px; -} +/* (removed: old SVG fork — replaced by .topo-fork CSS above) */ -/* Fork tree SVG lines from UDM-Pro down to two switches */ -.topo-v2-fork svg { +/* ── Drop wires from each switch down to the bus rails ── */ +.topo-sw-drops { + position: relative; width: 100%; + height: 20px; + flex-shrink: 0; +} +.topo-sw-drop { + position: absolute; + top: 0; + width: 2px; height: 100%; - overflow: visible; + opacity: .5; +} +.topo-sw-drop-l { + left: 25%; + transform: translateX(-50%); + background: var(--green); +} +.topo-sw-drop-r { + left: 75%; + transform: translateX(-50%); + background: var(--amber); + border-left: 2px dashed var(--amber); + width: 0; + background: none; } /* ── Improved chassis legend ── */ diff --git a/templates/index.html b/templates/index.html index b29a1f9..6d3993d 100644 --- a/templates/index.html +++ b/templates/index.html @@ -62,53 +62,47 @@ - -
- - - - - - - - - - - 10G DAC - + +
+
+
10G DAC
+
+
-
-
+
- -
+ +
+
⬡ USW-Agg Aggregation · RU22 8 × 10G SFP+ VLAN90 · 10.10.90.x/24
+
- -
-
- 10G SFP+ -
- - -
+ +
+
⬡ Pro 24 PoE 24-Port · RU23 24 × 1G PoE DHCP · mgmt
-
+ +
+ + +
+
+