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

Compare commits

base: Webstar:4e17346dfbbf218f097f6c7f648b283b6aa34cc6
Branches Tags
Webstar:main
Webstar:claude/2
Webstar:v0.1.0
...
compare: Webstar:fb9c1ee14a316a515c4c5bedba213fcc3a9ee40e
Branches Tags
Webstar:main
Webstar:claude/2
Webstar:v0.1.0

2 Commits
4e17346dfb ... fb9c1ee14a

Author SHA1 Message Date
librelad
fb9c1ee14a Merge claude/2 2026-06-18 16:04:07 +01:00
librelad
626041a39e style(ports): use the shared lp-ui-advanced-toggle for 'Show advanced fields' 
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>
 2026-06-18 16:04:06 +01:00
2 changed files with 7 additions and 13 deletions
Show Stats 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