Gitea-Admin/led2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): replace JS toggle with native <details> for device manage section

Browse Source
This commit is contained in:
Claude
2026-04-05 21:38:48 +00:00
parent 06845d862d
commit e3dd78bee2
3 changed files with 41 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
lightsync/frontend/app.js
View File

@@ -115,13 +115,6 @@ function escapeHtml(str) {
loadDevices();
document.getElementById("devices-manage-toggle").addEventListener("click", () => {
const panel = document.getElementById("devices-panel");
const btn = document.getElementById("devices-manage-toggle");
const active = panel.classList.toggle("manage-active");
btn.classList.toggle("active", active);
});
document.getElementById("add-device-form").addEventListener("submit", async (e) => {
e.preventDefault();
const form = e.target;

29
lightsync/frontend/index.html
View File

@@ -21,22 +21,25 @@
<aside class="sidebar">
<div class="panel" id="devices-panel" style="flex: 0 0 auto;">
<div class="panel-header">DEVICES <button type="button" class="panel-manage-btn" id="devices-manage-toggle" title="Manage devices">⚙ MANAGE</button></div>
<div class="panel-header">DEVICES</div>
<div class="panel-content" id="device-list">
<span class="text-dim">loading...</span>
</div>
<form id="add-device-form" class="device-form">
<input type="text" name="name" placeholder="Device name" required>
<select name="strip_type" required>
<option value="sk6812">SK6812</option>
<option value="ws2801">WS2801</option>
<option value="generic">Generic</option>
</select>
<input type="number" name="led_count" placeholder="LED count" min="1" max="1000" required>
<input type="text" name="ip" placeholder="IP address" required>
<input type="number" name="port" placeholder="Port" min="1" max="65535" value="21324" required>
<button type="submit">+ ADD DEVICE</button>
</form>
<details class="device-manage-section">
<summary>⚙ MANAGE DEVICES</summary>
<form id="add-device-form" class="device-form">
<input type="text" name="name" placeholder="Device name" required>
<select name="strip_type" required>
<option value="sk6812">SK6812</option>
<option value="ws2801">WS2801</option>
<option value="generic">Generic</option>
</select>
<input type="number" name="led_count" placeholder="LED count" min="1" max="1000" required>
<input type="text" name="ip" placeholder="IP address" required>
<input type="number" name="port" placeholder="Port" min="1" max="65535" value="21324" required>
<button type="submit">+ ADD DEVICE</button>
</form>
</details>
</div>
<div class="panel" id="animations-panel" style="flex: 1; min-height: 0;">
<div class="panel-header">ANIMATIONS</div>

45
lightsync/frontend/style.css
View File

@@ -92,35 +92,40 @@ body {
justify-content: space-between;
}
.panel-manage-btn {
background: none;
border: 1px solid transparent;
color: var(--text-dim);
font-family: var(--font-mono);
/* Device manage section — collapsible via <details> */
.device-manage-section {
border-top: 1px solid var(--border-dim);
}
.device-manage-section > summary {
padding: 5px 12px;
font-size: 10px;
letter-spacing: 0.08em;
cursor: pointer;
padding: 1px 6px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
cursor: pointer;
user-select: none;
list-style: none;
}
.panel-manage-btn:hover {
border-color: var(--border-dim);
.device-manage-section > summary::-webkit-details-marker { display: none; }
.device-manage-section > summary::before {
content: "▶ ";
font-size: 8px;
}
.device-manage-section[open] > summary {
color: var(--text-accent);
}
.panel-manage-btn.active {
border-color: var(--accent);
color: var(--text-accent);
.device-manage-section[open] > summary::before {
content: "▼ ";
}
/* Management controls hidden by default */
#devices-panel .device-remove { display: none; }
#devices-panel .device-form { display: none; }
/* Shown when manage mode active */
#devices-panel.manage-active .device-remove { display: block; }
#devices-panel.manage-active .device-form { display: flex; }
.device-manage-section > summary:hover {
color: var(--text-accent);
}
.panel-content {
flex: 1;