alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle main page: collapsible sections, theme-aware ticks, UI polish
Some checks failed
Validate / validate (push) Failing after 9s
Details

Browse Source 
- Make Devices and Displays sections collapsible with persistent state
- Move WLED config tip from footer to under Devices heading
- Add theme-aware colors for calibration canvas ticks and chevrons
- Rename sections to "Devices" and "Displays" with emoji prefix icons
- Fix display layout scaling to fill available space
- Remove unused footer-tip and modal code

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-09 01:57:43 +03:00
parent 57e6754461
commit c9929e3b7f
5 changed files with 116 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
server/src/wled_controller/static/index.html
View File

@@ -32,31 +32,13 @@
</div>
</header>
<section class="displays-section">
<h2 data-i18n="displays.layout">Display Layout</h2>
<div class="display-layout-preview">
<div id="display-layout-canvas" class="display-layout-canvas">
<div class="loading" data-i18n="displays.loading">Loading layout...</div>
</div>
</div>
<div id="displays-list" style="display: none;"></div>
</section>
<section class="devices-section">
<div class="section-header">
<h2 data-i18n="devices.title">WLED Devices</h2>
<h2 class="collapsible-header" onclick="toggleSection('devices')" data-section="devices"><span data-i18n="devices.title">💡 Devices</span><span class="collapse-chevron">▼</span></h2>
<button class="btn btn-icon btn-primary" onclick="showAddDevice()" data-i18n-title="devices.add" title="Add New Device">+</button>
</div>
<div id="devices-list" class="devices-grid">
<div class="loading" data-i18n="devices.loading">Loading devices...</div>
</div>
</section>
<footer class="app-footer">
<div class="footer-content">
<p class="footer-tip">
<div id="devices-content" class="collapsible-content">
<p class="section-tip">
<strong><span data-i18n="devices.wled_config">WLED Configuration:</span></strong> <span data-i18n="devices.wled_note">Configure your WLED device (effects, segments, color order, power limits, etc.) using the</span>
<a href="https://kno.wled.ge/" target="_blank" rel="noopener" data-i18n="devices.wled_link">official WLED app</a>
<span data-i18n="devices.wled_note_or">or the built-in</span>
@@ -64,6 +46,26 @@
<span data-i18n="devices.wled_note_webui">(open your device's IP in a browser).</span>
<span data-i18n="devices.wled_note2">This controller sends pixel color data and controls brightness per device.</span>
</p>
<div id="devices-list" class="devices-grid">
<div class="loading" data-i18n="devices.loading">Loading devices...</div>
</div>
</div>
</section>
<section class="displays-section">
<h2 class="collapsible-header" onclick="toggleSection('displays')" data-section="displays"><span data-i18n="displays.layout">🖥️ Displays</span><span class="collapse-chevron">▼</span></h2>
<div id="displays-content" class="collapsible-content">
<div class="display-layout-preview">
<div id="display-layout-canvas" class="display-layout-canvas">
<div class="loading" data-i18n="displays.loading">Loading layout...</div>
</div>
</div>
<div id="displays-list" style="display: none;"></div>
</div>
</section>
<footer class="app-footer">
<div class="footer-content">
<p>
Created by <strong>Alexei Dolgolyov</strong>
• <a href="mailto:dolgolyov.alexei@gmail.com">dolgolyov.alexei@gmail.com</a>