Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-theme-openwrt: rework and polish OpenWrt theme

Browse source 
- polish styling
 - move main menu to the left for large resolutions and collapse into
   dropdown header bar for small mobile resolutions
 - make tables responsive by utilizing extra attributes to turn rows
   into wrappable flexboxes for low resolutions
 - mostly get rid of button icon references and use a uniform color
   scheme for action-, positive, negative and neutral buttons

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2018-06-19 17:01:22 +02:00
parent d0b91bcca2
commit f714f684fa
2 changed files with 844 additions and 372 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1112
themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
View file

File diff suppressed because it is too large Load diff

98
themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm
View file

@ -56,10 +56,40 @@
local childs = disp.node_childs(node) local childs = disp.node_childs(node)
if #childs > 0 then if #childs > 0 then
write('<div class="tabmenu%d"><ul class="tabmenu l%d">' %{ write('<ul class="mainmenu l%d">' % level)
level, level
local i, v
for i, v in ipairs(childs) do
local nnode = node.nodes[v]
write('<li class="mainmenu-item-%s %s"><a href="%s">%s</a>' %{
v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'selected' or '',
nodeurl(prefix, v, nnode.query),
striptags(translate(nnode.title))
}) })
if level < 2 then
render_menu(prefix .. "/" .. v, nnode, level + 1)
end
write('</li>')
end
write('</ul>')
end
end
local function render_tabmenu(prefix, node, level)
if not level then
level = 1
end
local childs = disp.node_childs(node)
if #childs > 0 then
if level > 2 then
write('<ul class="cbi-tabmenu">')
end
local selected_node local selected_node
local selected_name local selected_name
local i, v local i, v
@ -71,20 +101,22 @@
selected_name = v selected_name = v
end end
if level > 2 then
write('<li class="tabmenu-item-%s %s"><a href="%s">%s</a></li>' %{ write('<li class="tabmenu-item-%s %s"><a href="%s">%s</a></li>' %{
v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'active' or '', v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'cbi-tab' or '',
nodeurl(prefix, v, nnode.query), nodeurl(prefix, v, nnode.query),
striptags(translate(nnode.title)) striptags(translate(nnode.title))
}) })
end end
write('</ul><br style="clear:both" />')
if selected_node then
render_menu(prefix .. "/" .. selected_name, selected_node, level + 1)
end end
write('</div>') if level > 2 then
write('</ul>')
end
if selected_node then
render_tabmenu(prefix .. "/" .. selected_name, selected_node, level + 1)
end
end end
end end
@ -116,6 +148,7 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%=luci.i18n.context.lang%>" lang="<%=luci.i18n.context.lang%>"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%=luci.i18n.context.lang%>" lang="<%=luci.i18n.context.lang%>">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/cascade.css" /> <link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/cascade.css" />
<% if node and node.css then %><link rel="stylesheet" type="text/css" media="screen" href="<%=resource%>/<%=node.css%>" /> <% if node and node.css then %><link rel="stylesheet" type="text/css" media="screen" href="<%=resource%>/<%=node.css%>" />
@ -125,6 +158,47 @@
</style> </style>
<% end -%> <% end -%>
<script type="text/javascript" src="<%=resource%>/xhr.js"></script> <script type="text/javascript" src="<%=resource%>/xhr.js"></script>
<script type="text/javascript">//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
var event = ('ontouchstart' in window) ? 'touchstart' : 'click';
document.querySelectorAll('ul.mainmenu.l1 > li > a').forEach(function(a) {
a.addEventListener(event, function(ev) {
var a = ev.target, ul1 = a.parentNode.parentNode, ul2 = a.nextElementSibling;
document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(function(li) {
if (li !== a.parentNode)
li.classList.remove('active');
});
if (!ul2)
return;
if (ul2.parentNode.offsetLeft + ul2.offsetWidth <= ul1.offsetLeft + ul1.offsetWidth)
ul2.classList.add('align-left');
ul1.classList.add('active');
a.parentNode.classList.add('active');
a.blur();
ev.preventDefault();
ev.stopPropagation();
});
});
document.addEventListener(event, function(ev) {
var t = ev.target;
while (t && t.id != 'mainmenu')
t = t.parentNode;
if (!t)
document.querySelectorAll('ul.mainmenu > li.active').forEach(function(li) {
li.classList.remove('active');
});
});
});
//]]></script>
<title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title> <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
</head> </head>
<body class="lang_<%=luci.i18n.context.lang%>"> <body class="lang_<%=luci.i18n.context.lang%>">
@ -161,11 +235,15 @@
</div> </div>
<div id="maincontainer"> <div id="maincontainer">
<div id="tabmenu"> <div id="mainmenu">
<% if category then render_menu(category, cattree) end %> <% if category then render_menu(category, cattree) end %>
</div> </div>
<div id="maincontent"> <div id="maincontent">
<div id="tabmenu">
<% if category then render_tabmenu(category, cattree) end %>
</div>
<noscript> <noscript>
<div class="alert-message warning"> <div class="alert-message warning">
<h4><%:JavaScript required!%></h4> <h4><%:JavaScript required!%></h4>