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

Fix rack front/back column misalignment 

Replaced independent flex columns with a single table where each rack
unit is a <tr> containing both front and back content. Row heights now
stay locked together regardless of device name length. Device-start
rows get a top border and surface background for visual grouping.
master
Joca 2026-06-09 18:54:04 -03:00
parent 459eef5d10
commit cfc4dc564a
Signed by: jocadbz
GPG Key ID: B1836DCE2F50BDF7
2 changed files with 32 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
static/style.css
View File

@ -91,17 +91,14 @@ th, td { padding: 0.4em 0.7em; text-align: left; border-bottom: 1px solid var(--
th { background: var(--surface); font-weight: 600; } th { background: var(--surface); font-weight: 600; }
/* RACK LAYOUT */ /* RACK LAYOUT */
.rack-layout { display: flex; gap: 2em; margin: 1em 0; } .rack-table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.rack-panel { flex: 1; } .rack-table th { background: var(--surface); font-weight: 600; padding: 0.3em 0.6em; text-align: center; }
.rack-panel h3 { margin-top: 0; } .rack-table td { padding: 0; border-bottom: 1px solid #222; vertical-align: top; }
.rack-slot { .rack-table .unit-num { color: var(--text-muted); width: 2.5em; text-align: center; font-size: 0.75em; vertical-align: middle; }
display: flex; align-items: center; gap: 0.5em; .rack-table .rack-cell { width: 45%; padding: 2px 0.4em; }
padding: 1px 0.4em; border-bottom: 1px solid #222; .rack-table tr.device-start td { border-top: 2px solid #444; }
font-size: 0.85em; .rack-table tr.device-start td.rack-cell { background: var(--surface); }
} .rack-device { display: flex; flex-direction: column; padding: 0.15em 0; }
.rack-slot.occupied { background: var(--surface); }
.unit-num { color: var(--text-muted); width: 2em; text-align: right; font-size: 0.75em; flex-shrink: 0; }
.rack-device { display: flex; flex-direction: column; }
.rack-device strong { font-size: 0.9em; } .rack-device strong { font-size: 0.9em; }
.rack-device small { font-size: 0.75em; } .rack-device small { font-size: 0.75em; }

45
templates/rack.html
View File

@ -20,37 +20,34 @@
</details> </details>
</div> </div>
<div class="rack-layout"> <table class="rack-table">
<div class="rack-panel"> <thead><tr><th>U</th><th>Front</th><th>U</th><th>Back</th></tr></thead>
<h3>Front</h3> <tbody>
{{range .FrontSlots}} {{range $i, $fs := .FrontSlots}}
<div class="rack-slot {{if .Device}}occupied{{end}}" style="{{if .IsStart}}border-top:2px solid #444;{{end}} min-height:28px;"> <tr {{if or $fs.IsStart (index $.BackSlots $i).IsStart}}class="device-start"{{end}}>
<span class="unit-num">{{.Unit}}</span> <td class="unit-num">{{$fs.Unit}}</td>
{{if .IsStart}} <td class="rack-cell">
{{if $fs.IsStart}}
<div class="rack-device"> <div class="rack-device">
<a href="/devices/{{.Device.ID}}"><strong>{{.Device.Name}}</strong></a> <a href="/devices/{{$fs.Device.ID}}"><strong>{{$fs.Device.Name}}</strong></a>
{{if .Device.Model}}<small>{{.Device.Model.Manufacturer}} {{.Device.Model.Name}} ({{.Height}}U)</small>{{end}} {{if $fs.Device.Model}}<small>{{$fs.Device.Model.Manufacturer}} {{$fs.Device.Model.Name}} ({{$fs.Height}}U)</small>{{end}}
{{if .Device.UsageDescription}}<small>{{.Device.UsageDescription}}</small>{{end}} {{if $fs.Device.UsageDescription}}<small>{{$fs.Device.UsageDescription}}</small>{{end}}
</div> </div>
{{end}} {{end}}
</div> </td>
{{end}} <td class="unit-num">{{(index $.BackSlots $i).Unit}}</td>
</div> <td class="rack-cell">
<div class="rack-panel"> {{if (index $.BackSlots $i).IsStart}}
<h3>Back</h3>
{{range .BackSlots}}
<div class="rack-slot {{if .Device}}occupied{{end}}" style="{{if .IsStart}}border-top:2px solid #444;{{end}} min-height:28px;">
<span class="unit-num">{{.Unit}}</span>
{{if .IsStart}}
<div class="rack-device"> <div class="rack-device">
<a href="/devices/{{.Device.ID}}"><strong>{{.Device.Name}}</strong></a> <a href="/devices/{{(index $.BackSlots $i).Device.ID}}"><strong>{{(index $.BackSlots $i).Device.Name}}</strong></a>
{{if .Device.Model}}<small>{{.Device.Model.Manufacturer}} {{.Device.Model.Name}} ({{.Height}}U)</small>{{end}} {{if (index $.BackSlots $i).Device.Model}}<small>{{(index $.BackSlots $i).Device.Model.Manufacturer}} {{(index $.BackSlots $i).Device.Model.Name}} ({{(index $.BackSlots $i).Height}}U)</small>{{end}}
</div> </div>
{{end}} {{end}}
</div> </td>
</tr>
{{end}} {{end}}
</div> </tbody>
</div> </table>
<h3>Devices &amp; Ports</h3> <h3>Devices &amp; Ports</h3>
{{range .RackedDevices}} {{range .RackedDevices}}