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

Fix topology diagram: replace SVG fork with CSS, fix line alignment

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-03-14 22:35:02 -04:00
parent 3dce602938
commit e8314b5ba3
2 changed files with 140 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
templates/index.html
View File

@@ -62,53 +62,47 @@
</div>
</div>
<!-- Fork: UDM-Pro → two switches via SVG tree -->
<div class="topo-vc" style="height:56px; overflow:visible;">
<svg viewBox="0 0 400 56" preserveAspectRatio="none" style="width:100%;height:56px;overflow:visible;display:block;">
<!-- stem down from router -->
<line x1="200" y1="0" x2="200" y2="24" stroke="var(--green)" stroke-width="2" opacity=".6"/>
<!-- horizontal branch -->
<line x1="108" y1="24" x2="292" y2="24" stroke="var(--amber)" stroke-width="2" opacity=".5"/>
<!-- drop to Agg switch (left) -->
<line x1="108" y1="24" x2="108" y2="56" stroke="var(--amber)" stroke-width="2" opacity=".55"/>
<!-- drop to PoE switch (right) -->
<line x1="292" y1="24" x2="292" y2="56" stroke="var(--amber)" stroke-width="2" opacity=".55"/>
<!-- DAC label -->
<text x="204" y="21" fill="var(--amber)" font-size="9" font-family="monospace" opacity=".8">10G DAC</text>
</svg>
<!-- 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>
</div>
<!-- ══════════════════════════════════════════════════════════════
TIER 3: Switches (Agg + PoE)
TIER 3: Switches — each in a 50% half so fork drops align
══════════════════════════════════════════════════════════ -->
<div class="topo-tier">
<div class="topo-switch-pair">
<div class="topo-sw-row">
<!-- USW-Aggregation -->
<div class="topo-v2-node topo-v2-switch" id="topo-switch-agg" style="min-width:130px;">
<!-- 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>
<!-- Inter-switch link -->
<div class="topo-isl">
<div class="topo-isl-wire"></div>
<span class="topo-isl-label">10G SFP+</span>
</div>
<!-- Pro 24 PoE -->
<div class="topo-v2-node topo-v2-switch" id="topo-switch-poe" style="min-width:130px;">
<!-- 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>
</div>
<!-- ══════════════════════════════════════════════════════════════