luci-theme-openwrt-2020: button rendering (wireguard/ advanced-reboot)

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.

Screenshot_2020-04-14 nbg6817 - Advanced Reboot - LuCI


<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">

Screenshot_2020-04-14 nbg6817 - WireGuard Status - LuCI

			<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.

Issue Analytics

State:
Created 3 years ago
Comments:14 (12 by maintainers)

Top GitHub Comments

2reactions

jow-commented, Feb 9, 2021

LuCI base is transitioning towards using <button> elements and providing an additional .btn CSS class to style <input> elements like buttons. Ideally - where possible - apps should replace <input class="btn cbi-button" value="Label" ...> with just <button ...>Label</button>. In cases where this is not feasible (e.g. non-JS legacy CBI forms where you need actual submit buttons) a simple class="btn" should be sufficient.

2reactions

stangricommented, Feb 8, 2021

@feckert @pkgadd @cybrnook sorry it disappeared from my radar last year. Most of my luci apps are fixed, VPR is pending merge of the principal package.

Top Results From Across the Web

[OpenWrt Wiki] WireGuard extras

Navigate to LuCI → Status → WireGuard to view WireGuard status. Dynamic connection. Preserve default route to restore WAN connectivity when ...

OpenWrt 22.03.0-rc5 fifth release candidate

Hi, The OpenWrt community is proud to announce the fifth release candidate of the upcoming OpenWrt 22.03 stable version series.

Belkin RT3200/Linksys E8450 WiFi AX discussion

I use: a) WireGuard; b) adaptive bandwidth CAKE on LTE connection notwithstanding VPN PBR; c) WDS extended WiFi and separate WDS extended Guest- ......

Wireguard GUI in LuCI buggy? - Installing and Using OpenWrt

After reboot, all hell broke loose as all the peers are configured with the interface at the same time. One invalid public key...

Openwrt theme - SFSHOP

None of the other themes do luci-theme-openwrt-2020: button rendering (wireguard/ advanced-reboot). To make your theme OpenWrt-capable and selectable on the ...