diff options
| author | Jo-Philipp Wich <jo@mein.io> | 2018-06-19 17:01:22 +0200 |
|---|---|---|
| committer | Jo-Philipp Wich <jo@mein.io> | 2018-06-23 17:59:09 +0200 |
| commit | f714f684fa3165fdff34b1a7c49e1d6f6b889ce6 (patch) | |
| tree | 9b51302d7cf5a8c1e31e2704a7cc07bcc3f8f6f8 /themes/luci-theme-openwrt/luasrc/view | |
| parent | d0b91bcca266a6d386f9ebeef695e1cef34ad9cf (diff) | |
luci-theme-openwrt: rework and polish OpenWrt theme
- 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>
Diffstat (limited to 'themes/luci-theme-openwrt/luasrc/view')
| -rw-r--r-- | themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm | 104 |
1 files changed, 91 insertions, 13 deletions
diff --git a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm index cbf02a76c..773cf1f82 100644 --- a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm +++ b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm @@ -56,9 +56,39 @@ local childs = disp.node_childs(node) if #childs > 0 then - write('<div class="tabmenu%d"><ul class="tabmenu l%d">' %{ - level, level - }) + write('<ul class="mainmenu l%d">' % 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_name @@ -71,20 +101,22 @@ selected_name = v end - 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 '', - nodeurl(prefix, v, nnode.query), - striptags(translate(nnode.title)) - }) + if level > 2 then + write('<li class="tabmenu-item-%s %s"><a href="%s">%s</a></li>' %{ + v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'cbi-tab' or '', + nodeurl(prefix, v, nnode.query), + striptags(translate(nnode.title)) + }) + end end - write('</ul><br style="clear:both" />') + if level > 2 then + write('</ul>') + end if selected_node then - render_menu(prefix .. "/" .. selected_name, selected_node, level + 1) + render_tabmenu(prefix .. "/" .. selected_name, selected_node, level + 1) end - - write('</div>') 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%>"> <head> <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" /> <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%>" /> @@ -125,6 +158,47 @@ </style> <% end -%> <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> </head> <body class="lang_<%=luci.i18n.context.lang%>"> @@ -161,11 +235,15 @@ </div> <div id="maincontainer"> - <div id="tabmenu"> + <div id="mainmenu"> <% if category then render_menu(category, cattree) end %> </div> <div id="maincontent"> + <div id="tabmenu"> + <% if category then render_tabmenu(category, cattree) end %> + </div> + <noscript> <div class="alert-message warning"> <h4><%:JavaScript required!%></h4> |