Rack: put a patch panel's name above its ports
Lint / JS (eslint) (push) Successful in 8s
Lint / Python (flake8) (push) Successful in 51s
Lint / Notify on failure (push) Skipped
Lint / Deploy (push) Skipped
Security / Python Security (bandit) (push) Successful in 54s
Test / Python Tests (pytest) (push) Successful in 1m21s
Lint / Python (flake8) (pull_request) Successful in 1m7s
Lint / JS (eslint) (pull_request) Successful in 13s
Lint / Notify on failure (pull_request) Skipped
Lint / Deploy (pull_request) Skipped
Security / Python Security (bandit) (pull_request) Successful in 1m18s
Test / Python Tests (pytest) (pull_request) Successful in 1m5s
Lint / JS (eslint) (push) Successful in 8s
Lint / Python (flake8) (push) Successful in 51s
Lint / Notify on failure (push) Skipped
Lint / Deploy (push) Skipped
Security / Python Security (bandit) (push) Successful in 54s
Test / Python Tests (pytest) (push) Successful in 1m21s
Lint / Python (flake8) (pull_request) Successful in 1m7s
Lint / JS (eslint) (pull_request) Successful in 13s
Lint / Notify on failure (pull_request) Skipped
Lint / Deploy (pull_request) Skipped
Security / Python Security (bandit) (pull_request) Successful in 1m18s
Test / Python Tests (pytest) (pull_request) Successful in 1m5s
A long panel name (UACC-Rack-Panel-Patch-Blank-24) was drawn in the left ear at full size and ran under the ports. It is now a small caption in the panel's top-left corner, shortened past 48 characters with the full name in its tooltip. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
+2
-2
@@ -61,7 +61,7 @@ function panelSvg(item) {
|
||||
const rowH = (H - 20) / rows;
|
||||
// Label characters that fit under one port at the label's font size (9px, ~5.6px a character)
|
||||
const fit = Math.max(3, Math.floor((pitch - 2) / 5.6));
|
||||
const short = t => (t.length > fit ? `${t.slice(0, fit - 1)}…` : t);
|
||||
const short = (t, max = fit) => (t.length > max ? `${t.slice(0, max - 1)}…` : t);
|
||||
const ports = [];
|
||||
for (let n = 1; n <= count; n++) {
|
||||
const r = Math.floor((n - 1) / perRow), c = (n - 1) % perRow;
|
||||
@@ -81,7 +81,7 @@ function panelSvg(item) {
|
||||
return `<svg class="rack-svg" viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="group"
|
||||
aria-label="${esc(item.name)} patch panel">
|
||||
<rect class="rack-pp-body" width="${W}" height="${H}" rx="3"/>
|
||||
<text class="rack-pp-name" x="${ear - 50}" y="${H / 2 + 5}">${esc(item.name)}</text>
|
||||
<text class="rack-pp-name" x="14" y="17"><title>${esc(item.name)}</title>${esc(short(item.name, 48))}</text>
|
||||
${ports.join('')}
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
+2
-1
@@ -1464,7 +1464,8 @@ body.fp-marks-off .fp-svg .fp-mark { display: none; }
|
||||
.rack-kind-shelf .rack-plate { background: repeating-linear-gradient(90deg, var(--rk-plate-b) 0 10px, var(--rk-frame) 10px 20px); }
|
||||
|
||||
.rack-pp-body { fill: #1d2229; stroke: #39424e; }
|
||||
.rack-pp-name { fill: #9aa7b4; font-size: 15px; font-family: var(--font-mono, monospace); }
|
||||
/* The panel's name sits in its top-left corner, above the port numbers, so a long name can't run under the ports */
|
||||
.rack-pp-name { fill: #9aa7b4; font-size: 12px; font-family: var(--font-mono, monospace); }
|
||||
.rack-pp-num { fill: #7d8a97; font-size: 10px; }
|
||||
.rack-pp-label { fill: #c9d3dc; font-size: 9px; }
|
||||
.rack-pp-jack { fill: #0c0f13; stroke: #4a5560; stroke-width: 1.5; }
|
||||
|
||||
Reference in New Issue
Block a user