adding qol features to network map
Deploy / deploy (push) Successful in 38s

This commit is contained in:
2026-05-12 10:27:19 +02:00
parent ae9a5306f3
commit 0acfff6bc7
3 changed files with 131 additions and 5 deletions
+7 -4
View File
@@ -90,7 +90,7 @@
<div class="row mb-3">
<div class="col-md-6">
<h4><i class="fas fa-project-diagram text-primary"></i> Network Map</h4>
<small class="text-secondary">Drag nodes & shapes &middot; Resize via corner handles &middot; <kbd class="bg-dark text-secondary">Del</kbd> to delete</small>
<small class="text-secondary">Drag nodes & shapes &middot; Resize via corner handles &middot; <kbd class="bg-dark text-secondary">Del</kbd> to delete &middot; Right-click to pan</small>
</div>
<div class="col-md-6 text-end">
<button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#nodeModal">
@@ -108,10 +108,13 @@
<div class="row">
<div class="col-md-9">
<div class="card bg-dark border-secondary">
<div class="card-body p-0" id="networkCanvasWrapper" style="height: 70vh; position: relative; overflow: hidden;">
<div class="card-body p-0" id="networkCanvasWrapper" style="height: 65vh; position: relative; overflow: hidden;">
<canvas id="networkCanvas" style="width: 100%; height: 100%;"></canvas>
</div>
</div>
<div class="d-flex flex-wrap gap-1 mt-1 p-1 rounded" style="background:#0d1117;border:1px solid var(--neptune-border);" id="nodeToolbar">
<span class="text-secondary me-1 small" style="font-size:.7rem;line-height:26px;">Drag to canvas:</span>
</div>
</div>
<div class="col-md-3">
<div class="card bg-dark border-secondary mb-2">
@@ -138,10 +141,10 @@
<div class="tab-content">
<div class="tab-pane fade show active" id="nodesPanel">
<div class="list-group list-group-flush bg-dark border-secondary rounded" id="nodeList" style="max-height: 35vh; overflow-y: auto;"></div>
<div class="list-group list-group-flush bg-dark border-secondary rounded" id="nodeList" style="max-height: 30vh; overflow-y: auto;"></div>
</div>
<div class="tab-pane fade" id="shapesPanel">
<div class="list-group list-group-flush bg-dark border-secondary rounded" id="shapeList" style="max-height: 35vh; overflow-y: auto;"></div>
<div class="list-group list-group-flush bg-dark border-secondary rounded" id="shapeList" style="max-height: 30vh; overflow-y: auto;"></div>
</div>
</div>
</div>