jocadbz
/
wireplanner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use cable color instead of hardcoded green for connected port badges 

Port spans now pick up the connection's actual color for border and a
light tint for background via inline styles. The .connected CSS class
only ups the border width to 2px for emphasis. Applied to _port_list.html
shared partial and wall_sockets.html inline rendering.
master
Joca 2026-06-09 18:55:48 -03:00
parent cada7ab6c2
commit b9ebc1d141
Signed by: jocadbz
GPG Key ID: B1836DCE2F50BDF7
3 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/style.css
View File

@ -121,7 +121,7 @@ th { background: var(--surface); font-weight: 600; }
transition: border-color 0.15s, background 0.15s; transition: border-color 0.15s, background 0.15s;
} }
.port:hover { border-color: var(--accent); } .port:hover { border-color: var(--accent); }
.port.connected { border-color: var(--green); background: #2a4a3a; } .port.connected { border-width: 2px; }
/* MODAL */ /* MODAL */
.modal-overlay { .modal-overlay {

10
templates/_port_list.html
View File

@ -4,7 +4,10 @@
<h5>Front</h5> <h5>Front</h5>
{{range .Device.Ports}}{{if eq .Side "front"}} {{range .Device.Ports}}{{if eq .Side "front"}}
{{$pid := .ID}} {{$pid := .ID}}
<span class="port {{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}connected{{else if eq .Port2.ID $pid}}connected{{end}}{{end}}{{end}}" {{$color := "#333"}}{{$bg := ""}}
{{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{else if eq .Port2.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{end}}{{end}}{{end}}
<span class="port {{if ne $bg ""}}connected{{end}}"
style="{{if ne $bg ""}}border-color:{{$color}};background:{{$color}}22{{end}}"
hx-get="/connections/{{.ID}}" hx-get="/connections/{{.ID}}"
hx-target="#modal-content" hx-target="#modal-content"
hx-trigger="click" hx-trigger="click"
@ -18,7 +21,10 @@
<h5>Back</h5> <h5>Back</h5>
{{range .Device.Ports}}{{if eq .Side "back"}} {{range .Device.Ports}}{{if eq .Side "back"}}
{{$pid := .ID}} {{$pid := .ID}}
<span class="port {{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}connected{{else if eq .Port2.ID $pid}}connected{{end}}{{end}}{{end}}" {{$color := "#333"}}{{$bg := ""}}
{{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{else if eq .Port2.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{end}}{{end}}{{end}}
<span class="port {{if ne $bg ""}}connected{{end}}"
style="{{if ne $bg ""}}border-color:{{$color}};background:{{$color}}22{{end}}"
hx-get="/connections/{{.ID}}" hx-get="/connections/{{.ID}}"
hx-target="#modal-content" hx-target="#modal-content"
hx-trigger="click" hx-trigger="click"

5
templates/wall_sockets.html
View File

@ -13,7 +13,10 @@
<td>{{.Comment}}</td> <td>{{.Comment}}</td>
<td> <td>
{{range .Ports}} {{range .Ports}}
<span class="port {{$pid := .ID}}{{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}connected{{else if eq .Port2.ID $pid}}connected{{end}}{{end}}{{end}}" {{$pid := .ID}}{{$color := "#333"}}{{$bg := ""}}
{{range $.Connections}}{{if and .Port1 .Port2}}{{if eq .Port1.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{else if eq .Port2.ID $pid}}{{$color = .Color}}{{$bg = .Color}}{{end}}{{end}}{{end}}
<span class="port {{if ne $bg ""}}connected{{end}}"
style="{{if ne $bg ""}}border-color:{{$color}};background:{{$color}}22{{end}}"
hx-get="/connections/{{.ID}}" hx-get="/connections/{{.ID}}"
hx-target="#modal-content" hx-target="#modal-content"
hx-trigger="click" hx-trigger="click"