luci-theme-openwrt-2020: button rendering (wireguard/ advanced-reboot)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 7.9k
- Forks
- 2.9k
- Avg merge
- 4d 17h
- Merged PRs (30d)
- 28
Description
Hi
Using current OpenWrt/ master on ipq806x/ nbg6817 (also seen on ipq40xx/ map-ac2200)
master/r12964-35f208da3c
src-git packages https://git.openwrt.org/feed/packages.git^a4d19d8
src-git luci https://git.openwrt.org/project/luci.git^d0daa2c
src-git routing https://git.openwrt.org/feed/routing.git^f71d733
src-git telephony https://git.openwrt.org/feed/telephony.git^bf49bc5
I notice a strange rendering for the buttons used in luci-app-wireguard and luci-app-advanced-reboot, all other buttons I've seen so far seem to work fine - and it's working nicely using luci-theme-bootstrap.

<div class="cbi-section"><h3>Interface wg0</h3>
<div class="cbi-value" id="button" style="padding: 5px">
<input class="cbi-button cbi-button-apply" type="button" name="qrcode_wg0" value="Show/Hide QR-Code" onclick="toggle_qrcode(this)" />
</div><div class="cbi-section-node">

<div class="td"><form method="post" action="/cgi-bin/luci/admin/system/advanced_reboot/alternative_reboot">
<input type="hidden" name="token" value="XXX" />
<input id="altreboot-button" type="submit" class="cbi-button cbi-button-apply important" value="Reboot to alternative partition..." />
</form></div>
<div class="td"><form method="post" action="/cgi-bin/luci/admin/system/advanced_reboot/reboot">
<input type="hidden" name="token" value="XXX" />
<input id="reboot-button" type="submit" class="cbi-button cbi-button-apply important" value="Reboot to current partition" />
</form></div>
</fieldset><hr /><form method="post" action="/cgi-bin/luci/admin/system/advanced_reboot/power_off">
<input type="hidden" name="token" value="XXX" />
<input id="poweroff-button" type="submit" class="cbi-button cbi-button-apply important" value="Perform power off..." />
</form>
The attached images have been made from firefox 74/ linux, but I'm seeing the same with chromium 81/ linux.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the button rendering in luci-theme-openwrt-2020 with luci-app-wireguard and luci-app-advanced-reboot, using the HTML examples and the Firefox or Chromium versions described. Compare the same controls under luci-theme-bootstrap and inspect the cbi-button styles; done means the affected buttons render consistently with the other LuCI buttons in both applications.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100