this is a openwrt luci theme
Material is a clean HTML5 theme for LuCI - the web configuration interface commonly found on OpenWrt installation. It is based on luci-theme-bootstrap and MUI
Have a bug? Please create an issue here on GitHub!
https://github.com/LuttyYang/luci-theme-material/issues
Lutty Yang
LuCI Theme Material: Copyright 2015 Lutty Yang
LuCI Theme Bootstrap: Copyright 2012 Nut & Bolt
MUI: https://github.com/muicss/mui
Licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0
This theme seems to have a bug with tabbed maps (m.tabbed = true) as evidenced by the screenshot. This gap between tabs and their content is not present in the bootstrap theme and as a workaround I've used the modified map template (line 13: <ul class="cbi-tabmenu map" style="margin-bottom:-32px;"> and removed the <br />) which is an ugly fix.
I do not have enough HTML5/CSS skills to hunt down the bug tho, hopefully someone more knowledgeable will.
I when i try do install theme using
opkg install ./luci-theme-material_0.2.18-1_all.ipk
i get
Collected errors:
Error :(
When you click the "Unsaved Changes" button, it puts and extra "//" between luci and admin, as shown below:
192.168.0.1/cgi-bin/luci//admin/uci/changes?redir=%2fcgi-bin%2fluci%2fadmin%2fnetwork%2fdhcp
The code in header.htm is below. removing the "/" between controller and category does work, but not too sure if thats the correct way to do it:
Line 164: <a class="label notice" href="<%=controller%>/<%=category%>/uci/changes?redir=<%=http.urlencode(http.formvalue("redir") or REQUEST_URI)%>"><span class="mobile-hide"><%:Unsaved Changes%>: </span><%=ucichanges%></a>
The latest bootstrap theme did what u did. But now moved the button into a function called "render_changes()":
HTML just called Button function: <% render_changes() %>
Code for render_changed():
write('<a class="label notice" href="%s?redir=%s">%s: %d</a>' %{
url(category, 'uci/changes'),
http.urlencode(http.formvalue('redir') or REQUEST_URI),
translate('Unsaved Changes'),
ucichanges
Maybe nit picking, but easy fix, and won't have any more malformed URL in the theme.
Hi, since textarea is used for editing config files, it would be great to have these using monospace fonts.
.cbi-input-textarea { font-size: small; font-family: monospace; }
I don't usually browse with a full width 1920 pixel window, instead I like something like 1200 px wide browser window and the comment below reflects that.
Material has a wide left menu and uses a rather large font size for the "fixed-width text" areas that are used for log display and also for entering SSH keys, opkg config etc. "text file" stuff. That was also pointed out in the forum discussion: https://forum.openwrt.org/viewtopic.php?pid=292310#p292310
You might consider decreasing the font size a bit on those text areas. At least in cases, when the display width is not the full 1920+
Below is example how Material shows much less actual content than Bootstrap. Most of the useful info gets pushed right.
In the second example, the lines in opkg feed config have been wrapped in Material, while fitting to one row in Bootstrap.
(Side note: I will check the luci code to see if a config item needs to be added to prevent wrapping there, as e.g. the SSH key input does not word-wrap. EDIT: I pushed a fix to Luci to prevent word-wrap on those opkg config fields. )
I can build 0.2.15 to BB version, but can't apply. That's the error information about BB version from browser :
/usr/lib/lua/luci/dispatcher.lua:448: Failed to execute function dispatcher target for entry '/admin/system'.
The called action terminated with an exception:
/usr/lib/lua/luci/dispatcher.lua:448: Failed to execute cbi dispatcher target for entry '/admin/system/system'.
The called action terminated with an exception:
/usr/lib/lua/luci/template.lua:104: Failed to execute template 'cbi/header'.
A runtime error occured: /usr/lib/lua/luci/template.lua:104: Failed to execute template 'header'.
A runtime error occured: /usr/lib/lua/luci/template.lua:104: Failed to execute template 'themes/material/header'.
A runtime error occured: [string "/usr/lib/lua/luci/view/themes/material/head..."]:7: attempt to call field 'ubus' (a nil value)
stack traceback:
[C]: in function 'assert'
/usr/lib/lua/luci/dispatcher.lua:448: in function 'dispatch'
/usr/lib/lua/luci/dispatcher.lua:195: in function </usr/lib/lua/luci/dispatcher.lua:194>
[root@PandoraBox:/root]#opkg install /tmp/luci-theme-material_0.2.15-1_all.ipk
Installing luci-theme-material (0.2.15-1) to root...
Configuring luci-theme-material.
//usr/lib/opkg/info/luci-theme-material.postinst: line 4: default_postinst: not found
Collected errors:
Please help, unable to load theme
/usr/lib/lua/luci/dispatcher.lua:448: Failed to execute template dispatcher target for entry '/admin/status/overview'.
The called action terminated with an exception:
/usr/lib/lua/luci/template.lua:120: Failed to execute template 'admin_status/index'.
A runtime error occured: /usr/lib/lua/luci/template.lua:120: Failed to execute template 'header'.
A runtime error occured: /usr/lib/lua/luci/template.lua:120: Failed to execute template 'themes/material/header'.
A runtime error occured: [string "/usr/lib/lua/luci/view/themes/material/head..."]:8: attempt to call field 'ubus' (a nil value)
stack traceback:
[C]: in function 'assert'
/usr/lib/lua/luci/dispatcher.lua:448: in function 'dispatch'
/usr/lib/lua/luci/dispatcher.lua:195: in function </usr/lib/lua/luci/dispatcher.lua:194>
The interface selection box in the Luci statistics config of the Interface plugin gets rendered wrong in Material. (Note: you need to have installed luci-app-statistics to see that.)
EDIT: I changed the title as I realized that it is not a dropdown, but a multiselection box, where you can select several values.
I find it useful that the footer with detailed version info is visible on every page. Bootstrap has this footer:
Powered by LuCI (git-15.258.28302-30f6fe8) / OpenWrt Chaos Calmer 15.05-r46989
That is useful especially when you have several routers to which you constantly flash new firmware versions. Or when reporting bugs.
I don't really care where it is visible, as long as it is visible and text is selectable with mouse. So, it might be located
The description field of the available software packages does not word-wrap (like it does in Bootstrap). That decreases usability, as some of the packages have really long explanatory descriptions.
Steps to reproduce:
Screenshot below:
its useful that I can see the port connected or not , port speed and duplex.
Version 0.2.2
The Queue Discipline tab in SQM QoS (from luci-app-sqm) has a small layout issue
Default bootstrap theme for comparison
The other SQM QoS tabs appear to be fine.
Simple question, what is the proper way to upgrade? I have been changing the theme to bootstrap, removing the old package, installing the new, changing back the theme.
Do I need to do this, or can I just install the replacement package?
The delete buttons on the led configuration page appear orphaned from their respective rules due to the alternating background color applied.
Changing the selector .cbi-section-remove:nth-of-type(2n) to .cbi-section-remove:nth-of-type(2n+1) on line 676 in style.css seems to fix it.
Hello, friends! Who will tell me how to assemble this theme myself (in Linux to ipk) or create feeds for chaos_calmer?
none of links are being built correctly with this theme. (Chaos Calmer)
I always end up with links like this:
http://myhost:8080/cgi-bin/luci/;stok=bf5a3a223d058a2bf25499461fdc9599admin/status/overview
instead of
http://myhost:8080/cgi-bin/luci/;stok=bf5a3a223d058a2bf25499461fdc95/admin/status/overview
Material theme mainly scales well, but some screens contain so many items that they do not scale well due to the theme's preference to large buttons and large text. Material is probably targeting tablet users, for whom a physically small but 1920-pixel-wide screen is typical and large fotn size makes sense. But with 24-inch or larger monitors in desktop use, you rarely browse with full width window. (At least I do not...) Material prefers rather large text to the input fields, which is unnecessary with a large monitor screen.
One example of a problematic core page is "firewall" config. With a screen less than 1920 pixels, the items never fit to the visible page. The page items do not scale, but overflow the right side.
Below is comparison between Bootstrap and Material. In material the "zone boxes" take quite much horizontal space and also the enable/disable selection boxes do that:
I am not sure if you can do anything the improve things for desktop users (somehow adjust to the physical size of the screen?), but I wanted to highlight the issue in any case.
If no password is set, Luci displays information about it. But on this theme is illegible.
Looks like there is no space reserved for the mouse-hover indicator in the horizontal menu. That causes some vertical flickering when mouse moves to hover over an menu item. The page below moves a few pixels down when the indicator gets created and back up hwn mouse moves away. That looks like flickering :-(
The below image shows how the page contents have been pushed down by the indicator. The left side shows the normal placement and the right side shows the placement when indicator is visible.
As you can see on the screenshot the navigation menu on the left is hiding some informations (only happens on 21:9 resolution). Any way to fix this?
#44
Im not sure what this hack is for but it should just be 15rem without that calc as the 0% gets optimized to 0 anyway.
I propose also getting rid of
unlimited loop
Luci addressing has been changed in the recent commits to remove the security tokens from the URL:
https://192.168.1.1/cgi-bin/luci/;stok=786764efae47b9552193a139cd37f5c8
-->
https://192.168.1.1/cgi-bin/luci/
There have been several commits preparing the pages for the change, but the commit openwrt/luci@86326e0 finally removed the tokens from the URL.
After the change Material theme is broken in Firefox.
(EDIT: IE login is fixed) The new system is still under development and I can login via Firefox, but not with IE11, so there are still problems in the core Luci (Issue openwrt/luci#516 ). So this is just a heads-up that the Luci URLs are changing, and apparently Material theme needs modifications, too.
No Menu:
Scrambled layout:
LuCI 15.05-149-g0d8bbd2 Release (git-15.363.78009-956be55) / OpenWrt Chaos Calmer 15.05.1
TP-Link TD-W8970
Can't use this theme, if i set material login page works but all the interface not loading, stucks on a grey page with "Loading".
please help guide me to install this theme
System log and kernel log do not scroll nicely with keyboard.
In bootstrap, if you enter the system log or kernel log page, you can immediately use keyboard PageDown or PageUp keys to scroll the log by one text screen at the time.
In Material, the focus does not switch from menu to the log page, so nothing happens with the keys. You have to click the log page area to focus the keyboard actions to cause scrolling.
(Both themes have the annoying feature that if you click on the log text itself, the PageDn and PageUp keys scroll either to the top or bottom of the text. You have to click the page area outside the log textbox to get proper "scroll one screen at time" functionality.)
Please help, unable to load theme
openwrt version: Linux OpenWrt 3.3.8/LuCI 0.11.1 Release (0.11.1)
Thanks.
/usr/lib/lua/luci/dispatcher.lua:448: Failed to execute function dispatcher target for entry '/'.
The called action terminated with an exception:
/usr/lib/lua/luci/template.lua:104: Failed to execute template 'sysauth'.
A runtime error occured: /usr/lib/lua/luci/template.lua:104: Failed to execute template 'header'.
A runtime error occured: /usr/lib/lua/luci/template.lua:104: Failed to execute template 'themes/material/header'.
A runtime error occured: [string "/usr/lib/lua/luci/view/themes/material/head..."]:8: attempt to call field 'ubus' (a nil value)
stack traceback:
[C]: in function 'assert'
/usr/lib/lua/luci/dispatcher.lua:448: in function 'dispatch'
/usr/lib/lua/luci/dispatcher.lua:195: in function </usr/lib/lua/luci/dispatcher.lua:194>
Some of the longest text options can overflow the default width of the input field.
Example: Luci statistics / collectd / output plugins / RRDtool:
(that is the default value for that option, so nothing imaginary or special. But might still be one of the longest default values: "1hour 1day 1week 1month 1year")
I tested both with IE11 and Firefox43, and the same result.
It would be better if the input field would adjust to long input values, if necessary. At least if the value is long already when the page is first rendered.
example:
I'm on 0.2.17
Is it possible to get built for BB? Installing ipk right now results in error:
Installing luci-theme-material (git-15.259.53707-f3f0de3-1) to root...
Configuring luci-theme-material.
//usr/lib/opkg/info/luci-theme-material.postinst: line 4: default_postinst: not found
Collected errors:
* pkg_run_script: package "luci-theme-material" postinst script returned status 127.
* opkg_configure: luci-theme-material.postinst returned 127.
My device is on 15.05.1, r48532.
Got the following error during installation:
root@OpenWrt:/tmp# opkg install /tmp/luci-theme-material_0.2.18-1_all.ipk
Installing luci-theme-material (0.2.18-1) to root...
Collected errors:
* satisfy_dependencies_for: Cannot satisfy the following dependencies for luci-theme-material:
* libssp *
* opkg_install_cmd: Cannot install package luci-theme-material.
Probably related to apollo-ng/luci-theme-darkmatter#4
0.2.17 installs fine.
Great job. But cannot work in 360 or IE. howto?
Hello there!
Seems like something is broken with the lastes release at least with OpenWRT 15.05.1.
The main screen just tries to load, but nothing shows, the older 50KB release just works fine.
Can I help you somehow to figure out what's wrong?
On login page, if language set on "Auto" or "Polish". English is ok.
And logout is other type.
As the figure shown above, the IPv4 WAN Status is 192.168.113.1. Actually, the IP should be 202.118.228.69. It seems there's something wrong with getting information of IPv4.
Mon Jun 12 21:44:31 2017 daemon.err uhttpd[844]: A runtime error occured: /usr/lib/lua/luci/template.lua:97: Failed to execute template 'themes/material/header'.
Mon Jun 12 21:44:31 2017 daemon.err uhttpd[844]: A runtime error occured: [string "/usr/lib/lua/luci/view/themes/material/head..."]:37: attempt to call global 'url' (a nil value)
Mon Jun 12 21:44:31 2017 daemon.err uhttpd[844]: stack traceback:
Mon Jun 12 21:44:31 2017 daemon.err uhttpd[844]: [C]: in function 'assert'
Mon Jun 12 21:44:31 2017 daemon.err uhttpd[844]: /usr/lib/lua/luci/dispatcher.lua:433: in function 'dispatch'
Mon Jun 12 21:44:31 2017 daemon.err uhttpd[844]: /usr/lib/lua/luci/dispatcher.lua:168: in function </usr/lib/lua/luci/dispatcher.lua:167>
Failed to execute function dispatcher target for entry '/'.
The called action terminated with an exception:
Failed to execute template 'sysauth'.
A runtime error occured: Failed to execute template 'header'.
A runtime error occured: Failed to execute template 'themes/material/header'.
A runtime error occured: [string "/usr/lib/lua/luci/view/themes/material/head..."]:8: attempt to call field 'ubus' (a nil value)
stack traceback:
[C]: in function 'assert'
?: in function 'dispatch'
?: in function <?:194>
Looks like the "flash in progress" screen is without a style definition. Below is comparison to Bootstrap:
In Material the font and the title color are the browser defaults (Times New Roman and black).
Afaik the page is rendered from here:
https://github.com/openwrt/luci/blob/master/modules/luci-mod-admin-full/luasrc/view/admin_system/applyreboot.htm
https://github.com/openwrt/luci/blob/master/modules/luci-mod-admin-full/luasrc/controller/admin/system.lua#L272
Hello,
I am using the theme on a Meraki18 and it seems the 3rd radio is not supported.
It is however displayed on the "Wifi Overview" page, but whenever I want to 'edit' the 3rd radio (radio2) it shows:
"Bad Gateway
The process did not produce any response"
I would assume radio2 is not supported - or is there a tweak which I should apply?
Thanks,
Tom
I am using an iPhone4 with IOS7 and have installed the theme on a HooToo TM02 rotuer.
Free memory is 15/10/5, 8 flash, 32 ram, 360 Mhz CPU
http://wiki.openwrt.org/toh/hwdata/hootoo/hootoo_tripmatenano_v15
V2.3
The theme operates acceptable on a PC browser, but has performance problems on the iPhone. Issues include
Slow login
Pages time out or load slow
Pages not rendering completely even after refresh. Not seeing the Scan button on WIFI, but see the radio.
Flicking not working, must keep a finger on the page to scroll. I am having difficulty accurately selecting items in the Network section, but I think that this has to do with flick issues.
Problems seem marginally worse on Google than on Safari.
Unrelated, following the instructions when I logged into LuCi the them was already active. I did not need to select it.
Status: 500 Internal Server Error
/usr/lib/lua/luci/dispatcher.lua:433: Failed to execute function dispatcher target for entry '/'.
The called action terminated with an exception:
/usr/lib/lua/luci/dispatcher.lua:433: Failed to execute firstchild dispatcher target for entry '/admin'.
The called action terminated with an exception:
/usr/lib/lua/luci/dispatcher.lua:433: Failed to execute function dispatcher target for entry '/admin/status'.
The called action terminated with an exception:
/usr/lib/lua/luci/dispatcher.lua:433: Failed to execute template dispatcher target for entry '/admin/status/systemstatus'.
The called action terminated with an exception:
/usr/lib/lua/luci/template.lua:97: Failed to execute template 'admin_status/systemstatus'.
A runtime error occured: /usr/lib/lua/luci/template.lua:97: Failed to execute template 'header'.
A runtime error occured: /usr/lib/lua/luci/template.lua:97: Failed to execute template 'themes/material/header'.
A runtime error occured: [string "/usr/lib/lua/luci/view/themes/material/head..."]:154: attempt to call global 'url' (a nil value)
stack traceback:
[C]: in function 'assert'
/usr/lib/lua/luci/dispatcher.lua:433: in function 'dispatch'
/usr/lib/lua/luci/dispatcher.lua:168: in function </usr/lib/lua/luci/dispatcher.lua:167>
admin@openwrt:/usr/lib/lua/luci# opkg list-installed|grep luci
luci - git-17.136.58961-13aa5ff-1
luci-app-serialserver - 1.0-1
luci-base - git-17.136.58961-13aa5ff-1
luci-i18n-base-en - git-17.136.58961-13aa5ff-1
luci-i18n-serialserver-en - 1.0-1
luci-lib-ip - git-17.136.58961-13aa5ff-1
luci-lib-nixio - git-17.136.58961-13aa5ff-1
luci-mod-admin-full - git-17.136.58961-13aa5ff-1
luci-proto-ipv6 - git-17.136.58961-13aa5ff-1
luci-proto-ppp - git-17.136.58961-13aa5ff-1
luci-theme-bootstrap - git-17.136.58961-13aa5ff-1
luci-theme-material - 0.2.19-1
You are probably monitoring the changes in the Openwrt Luci repo, but I am still highlighting that there was yesterday a change to themes' header.htm files by Jow, also to the one in the material theme.
(General context: crsf token and form action handling. See https://github.com/openwrt/luci/commits/master )
You need to repeat that change in your local repo, or otherwise the your compiled versions 0.28+ start losing some functionality.
Change history for luci-theme-material directory at Luci repo: https://github.com/openwrt/luci/commits/master/themes/luci-theme-material
I am not quite sure what is the easiest way to backport this kind of fixes. It might be merging the upstream repo to here, or it might be by downloading the possible few commits as patches and applying them locally (as Github offers a nice way to download a commit as patch just by adding .patch to the end of the commit link: https://github.com/openwrt/luci/commit/36f133f946f1118fca9004706b8f2c2a741fd006.patch ).
How to apply this theme in putty
First, amazing theme, finally having something that works properly on my mobile device is so wonderful, thanks so much for developing this!
That said, and I hate to be that guy, but there are a couple spelling mistakes:
Network > SIIT 4over6 assistent - should be - Network > SIIT 4over6 assistant
...on the SIIT 4over6 page wizzard - should be - SIIT 4over6 page wizard
Again sorry for being that guy, but thanks again for making this theme, it's definitely a great step forward!
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.