Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ports): use the shared lp-ui-advanced-toggle for 'Show advanced fields'

Browse Source 
The port manager's 'Show advanced fields' control was a raw <input type=
checkbox> + <span>, out of step with the modern pill switch the Services tab
uses for its Advanced toggle. Swap the markup to the shared .lp-ui-advanced-
toggle (track + thumb) structure — defined in services.css, which is loaded
globally — keeping .port-manager-show-advanced on the input for the JS hook.
Drop the now-dead .port-manager-advanced-toggle CSS.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-06-18 16:04:06 +01:00
parent 4e17346dfb
commit 626041a39e
2 changed files with 7 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
containers/libreportal/frontend/components/apps/port-manager/css/port-manager.css
View File

@ -11,17 +11,10 @@
gap: 0.75rem;
}
.port-manager-advanced-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 13px;
color: var(--text-secondary, #a0a0a0);
cursor: pointer;
user-select: none;
}
.port-manager-advanced-toggle input { margin: 0; }
/* The "Show advanced fields" switch reuses the shared .lp-ui-advanced-toggle
pill (defined in services.css, loaded globally) so it matches the Services
tab's Advanced toggle exactly — only the input keeps .port-manager-show-advanced
for the JS hook. */
/* Ensure help icons are always visible in port manager */
.port-manager .help-icon {

5
containers/libreportal/frontend/components/apps/port-manager/js/port-manager.js
View File

@ -261,9 +261,10 @@ class PortManager {
<div class="port-manager-header">
<h4>Port Configuration</h4>
<div class="port-manager-header-actions">
<label class="port-manager-advanced-toggle">
<label class="lp-ui-advanced-toggle" title="Reveal advanced port fields (protocol, host IP, bind options)">
<input type="checkbox" class="port-manager-show-advanced">
<span>Show advanced fields</span>
<span class="lp-ui-advanced-toggle-track"><span class="lp-ui-advanced-toggle-thumb"></span></span>
<span class="lp-ui-advanced-toggle-label">Show advanced fields</span>
</label>
<button type="button" class="btn btn-primary btn-sm add-port-btn">
<span class="add-icon">+</span> Add Port