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

[pkgadd]

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.

[arrmo]

FYI, just came across this as well (luci-app-advanced-reboot), seeing the same thing here. Thanks!

[castillofrancodamian]

Also in luci-app-commands.

[cybrnook]

Also seeing this same behavior.

[feckert]

We have to add btn css class to all button input html sections. <input class="btn cbi-button ...." type=....>

[pkgadd]

I can confirm that this indeed works for both luci-app-advanced-reboot and luci-app-wireguard, thanks a lot.

[arrmo]

Yep, works here as well - thanks! Are there plans to get these changes generically added in? Or make the needed changes, and submit PR's?

Thanks again.

[cybrnook]

Could someone explain how to:

We have to add btn css class to all button input html sections. <input class="btn cbi-button ...." type=....>

I am seeing this also in VPN-Policy-Routing and would like to take care of it, please?

[castillofrancodamian]

Could someone explain how to:

We have to add btn css class to all button input html sections. <input class="btn cbi-button ...." type=....>

I am seeing this also in VPN-Policy-Routing and would like to take care of it, please?

In luci-app-commands you see this flaw too.

[stangri]

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

[cybrnook]

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

Thanks Stan, take your time buddy 🥇

[pkgadd]

Don't worry, all the packages I've been using are fixed by now.

The rest will need to be reported and fixed as they get noticed, contrary to the original belief the past fixes have shown that it's not a defect in the theme code, but that the individual luci apps need to declare the correct button styles..

[cybrnook]

I was able to fix locally while waiting for Stan's PR to merge, thanks for the hints guys!

[jow-]

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.

[stangri]

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

Is the <button> element supported in 19.07 tree or just snapshots?