openwrt / openwrt/luci

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

Open
#3,909 15 comments 0 reactions 0 assignees View on GitHub

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.

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.