themes/openwrt: rework menu and header area
This commit is contained in:
Jo-Philipp Wich
parent
b04c13bdcc
commit
61d0b4e734
4 changed files with 172 additions and 262 deletions
|
|
@ -24,6 +24,71 @@ body {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
ul.tabmenu {
|
||||
margin: 0;
|
||||
clear: both;
|
||||
display: block;
|
||||
vertical-align: bottom;
|
||||
font-size: 90%;
|
||||
padding: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
div.tabmenu2 {
|
||||
background-color: #AAAAAA;
|
||||
background-image: url(tabbg.png);
|
||||
background-repeat: repeat-x;
|
||||
margin-top: -1px;
|
||||
border: 1px solid #444444;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
div.tabmenu3,
|
||||
div.tabmenu4,
|
||||
div.tabmenu5 {
|
||||
background-color: #AAAAAA;
|
||||
background-image: url(tabbg.png);
|
||||
background-repeat: repeat-x;
|
||||
border: none;
|
||||
}
|
||||
|
||||
ul.tabmenu li {
|
||||
float: left;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ul.tabmenu li a {
|
||||
text-decoration: none;
|
||||
color: #444444;
|
||||
display: block;
|
||||
padding: 3px 8px;
|
||||
margin: 0 2px;
|
||||
line-height: 1.3em;
|
||||
border: 1px solid transparent;
|
||||
border-bottom: none;
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
ul.tabmenu li.active a {
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #AAAAAA;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
ul.tabmenu li a:hover {
|
||||
color: #444444;
|
||||
border-color: #444444;
|
||||
}
|
||||
|
||||
ul.l1 li a {
|
||||
background-color: #AAAAAA;
|
||||
background-image: url(tabbg.png);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #444444;
|
||||
}
|
||||
|
||||
abbr,
|
||||
acronym {
|
||||
font-style: normal;
|
||||
|
|
@ -79,106 +144,13 @@ code {
|
|||
background-color: white;
|
||||
}
|
||||
|
||||
#header {
|
||||
min-height: 98px;
|
||||
background-image: url(header.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-color: #557788;
|
||||
color: #ffffff;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#header h1 {
|
||||
padding: 1em 1em 0 1em;
|
||||
}
|
||||
|
||||
#header p {
|
||||
padding: 0 1em 1em 1em;
|
||||
}
|
||||
|
||||
#header h1,
|
||||
#header p {
|
||||
font-size: 70%;
|
||||
font-weight: normal;
|
||||
line-height: 160%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
ul.dropdowns {
|
||||
div.hostinfo {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
html>body ul.dropdowns {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.dropdowns li,
|
||||
ul.dropdowns ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.dropdowns li {
|
||||
float: left;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
ul.dropdowns li ul {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: auto;
|
||||
min-width: 10em;
|
||||
}
|
||||
|
||||
ul.dropdowns li li {
|
||||
float: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.dropdowns li a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.dropdowns ul li ul {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
ul.dropdowns li ul,
|
||||
ul.dropdowns li.over ul ul,
|
||||
ul.dropdowns li.focus ul ul,
|
||||
ul.dropdowns li:hover ul ul,
|
||||
ul.dropdowns li.over ul ul ul,
|
||||
ul.dropdowns li.focus ul ul ul,
|
||||
ul.dropdowns li:hover ul ul ul,
|
||||
ul.dropdowns li.over ul ul ul ul,
|
||||
ul.dropdowns li.focus ul ul ul ul,
|
||||
ul.dropdowns li:hover ul ul ul ul {
|
||||
left: -3000px;
|
||||
}
|
||||
|
||||
ul.dropdowns li.over ul,
|
||||
ul.dropdowns li.focus ul,
|
||||
ul.dropdowns li:hover ul {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
ul.dropdowns ul li.over ul,
|
||||
ul.dropdowns ul li.focus ul,
|
||||
ul.dropdowns ul li:hover ul,
|
||||
ul.dropdowns ul ul li.over ul,
|
||||
ul.dropdowns ul ul li.focus ul,
|
||||
ul.dropdowns ul ul li:hover ul,
|
||||
ul.dropdowns ul ul ul li.over ul,
|
||||
ul.dropdowns ul ul ul li.focus ul,
|
||||
ul.dropdowns ul ul ul li:hover ul {
|
||||
left: 100%;
|
||||
font-size: 80%;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
#menubar {
|
||||
|
|
@ -193,24 +165,6 @@ ul.dropdowns ul ul ul li:hover ul {
|
|||
background-color: #557788;
|
||||
}
|
||||
|
||||
#menubar ul.dropdowns {
|
||||
min-height: 1.8em;
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#menubar ul.dropdowns li ul {
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
border-width: 0 1px 1px 1px;
|
||||
border-style: solid;
|
||||
border-color: #444444;
|
||||
}
|
||||
|
||||
#menubar ul.dropdowns ul li ul {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
html #menubar a:link,
|
||||
html #menubar a:visited {
|
||||
position: relative;
|
||||
|
|
@ -251,63 +205,6 @@ html #menubar a:visited.warning {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
#menubar ul.dropdowns li.over>a,
|
||||
#menubar ul.dropdowns li.focus>a,
|
||||
#menubar ul.dropdowns li:hover>a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lang_de #submenu_mini_system { min-width: 13.3em; }
|
||||
* html .lang_de #submenu_mini_system { width: 13.3em; }
|
||||
|
||||
.lang_pt-br #submenu_mini_network { min-width: 14em; }
|
||||
* html .lang_pt-br #submenu_mini_network { width: 14em; }
|
||||
|
||||
.lang_pt-br #submenu_mini_system { min-width: 11.5em; }
|
||||
* html .lang_pt-br #submenu_mini_system { width: 11.5em; }
|
||||
|
||||
.lang_ru #submenu_mini_system { min-width: 18em; }
|
||||
* html .lang_ru #submenu_mini_system { width: 18em; }
|
||||
|
||||
.lang_pt-br #submenu_admin_index { min-width: 11em; }
|
||||
* html .lang_pt-br #submenu_admin_index { width: 11em; }
|
||||
|
||||
.lang_ru #submenu_admin_index { min-width: 15.5em; }
|
||||
* html .lang_ru #submenu_admin_index { width: 15.5em; }
|
||||
|
||||
.lang_ru #submenu_admin_status { min-width: 10.5em; }
|
||||
* html .lang_ru #submenu_admin_status { width: 10.5em; }
|
||||
|
||||
.lang_de #submenu_admin_system { min-width: 13.3em; }
|
||||
* html .lang_de #submenu_admin_system { width: 13.3em; }
|
||||
|
||||
.lang_fr #submenu_admin_system { min-width: 14.5em; }
|
||||
* html .lang_fr #submenu_admin_system { width: 14.5em; }
|
||||
|
||||
.lang_pt-br #submenu_admin_system { min-width: 11.5em; }
|
||||
* html .lang_pt-br #submenu_admin_system { width: 11.5em; }
|
||||
|
||||
.lang_ru #submenu_admin_system { min-width: 18em; }
|
||||
* html .lang_ru #submenu_admin_system { width: 18em; }
|
||||
|
||||
#submenu_admin_services_chillispot { min-width: 15.5em; }
|
||||
* html #submenu_admin_services_chillispot { width: 15.5em; }
|
||||
|
||||
#submenu_admin_services_coovachilli { min-width: 15em; }
|
||||
* html #submenu_admin_services_coovachilli { width: 15em; }
|
||||
|
||||
.lang_ru #submenu_admin_network_routes { min-width: 15.3em; }
|
||||
* html .lang_ru #submenu_admin_network_routes { width: 15.3em; }
|
||||
|
||||
#submenu_admin_network_firewall { min-width: 14em; }
|
||||
* html #submenu_admin_network_firewall { width: 14em; }
|
||||
|
||||
.lang_de #submenu_admin_network_firewall { min-width: 16.5em; }
|
||||
* html .lang_de #submenu_admin_network_firewall { width: 16.5em; }
|
||||
|
||||
.lang_pt-br #submenu_admin_network_firewall { min-width: 15em; }
|
||||
* html .lang_pt-br #submenu_admin_network_firewall { width: 15em; }
|
||||
|
||||
#modemenu {
|
||||
width: auto;
|
||||
background: #000000;
|
||||
|
|
@ -342,17 +239,20 @@ textarea#syslog {
|
|||
font-family: monospace;
|
||||
}
|
||||
|
||||
#maincontent {
|
||||
#maincontainer {
|
||||
clear: both;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#maincontent {
|
||||
padding: 0.5em;
|
||||
background: #f5f5f5;
|
||||
color: #000000;
|
||||
font-size: 80%;
|
||||
border-width: 0 1px 1px 1px;
|
||||
border-style: solid;
|
||||
border-color: #444444;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#maincontent h2 {
|
||||
|
|
|
|||
BIN
themes/openwrt/htdocs/luci-static/openwrt.org/tabbg.png
Normal file
BIN
themes/openwrt/htdocs/luci-static/openwrt.org/tabbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 152 B |
|
|
@ -14,8 +14,8 @@ $Id$
|
|||
-%>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="luci"><a href="<%=controller%>/about">Powered by <%= luci.__appname__ .. " (v" .. luci.__version__ .. ")" %></a></p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<%#
|
||||
LuCI - Lua Configuration Interface
|
||||
Copyright 2008 Steven Barth <steven@midlink.org>
|
||||
Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
|
||||
Copyright 2008-2010 Jo-Philipp Wich <xm@subsignal.org>
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -17,6 +17,8 @@ require("luci.sys")
|
|||
local load1, load5, load15 = luci.sys.loadavg()
|
||||
local request = require("luci.dispatcher").context.path
|
||||
local category = request[1]
|
||||
local request2 = require("luci.dispatcher").context.request
|
||||
local leaf = request2[#request2]
|
||||
local tree = luci.dispatcher.node()
|
||||
local cattree = category and luci.dispatcher.node(category)
|
||||
local node = luci.dispatcher.context.dispatched
|
||||
|
|
@ -33,6 +35,72 @@ end
|
|||
require("luci.i18n").loadc("base")
|
||||
require("luci.http").prepare_content("application/xhtml+xml")
|
||||
|
||||
|
||||
local function nodeurl(prefix, name, query)
|
||||
local url = controller .. prefix .. name .. "/"
|
||||
if query then
|
||||
url = url .. luci.http.build_querystring(query)
|
||||
end
|
||||
return pcdata(url)
|
||||
end
|
||||
|
||||
local function subtree(prefix, node, level)
|
||||
if not node.nodes or node.hidden then
|
||||
return false
|
||||
end
|
||||
|
||||
if not level then
|
||||
level = 1
|
||||
end
|
||||
|
||||
local index = {}
|
||||
local count = 0
|
||||
for k, n in pairs(node.nodes) do
|
||||
if n.title and n.target then
|
||||
table.insert(index, {name=k, order=n.order or 100})
|
||||
count = count + 1
|
||||
end
|
||||
end
|
||||
|
||||
table.sort(index, function(a, b) return a.order < b.order end)
|
||||
|
||||
if count > 0 then
|
||||
%>
|
||||
<div class="tabmenu<%=level%>">
|
||||
<ul class="tabmenu l<%=level%>">
|
||||
<%
|
||||
local selected_node
|
||||
local selected_name
|
||||
|
||||
for j, v in pairs(index) do
|
||||
if #v.name > 0 then
|
||||
local nnode = node.nodes[v.name]
|
||||
|
||||
if nnode._menu_selected then
|
||||
selected_node = nnode
|
||||
selected_name = v.name
|
||||
end
|
||||
%>
|
||||
<li<% if nnode._menu_selected or v.name == leaf then %> class="active"<% end %>>
|
||||
<a href="<%=nodeurl(prefix, v.name, nnode.query)%>"><%=striptags(nnode.title)%></a>
|
||||
</li>
|
||||
<%
|
||||
end
|
||||
end
|
||||
%>
|
||||
</ul>
|
||||
<br style="clear:both" />
|
||||
<%
|
||||
if selected_node then
|
||||
subtree(prefix .. selected_name .. "/", selected_node, level + 1)
|
||||
end
|
||||
%>
|
||||
</div>
|
||||
<%
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
-%>
|
||||
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
|
@ -59,77 +127,13 @@ require("luci.http").prepare_content("application/xhtml+xml")
|
|||
<span id="skiplink2"><a href="#content"><%:Skip to content%></a></span>
|
||||
</p>
|
||||
|
||||
<div id="header">
|
||||
<h1><%=luci.version.distname%></h1>
|
||||
<p>
|
||||
<%=luci.version.distversion%><br />
|
||||
<%:Load%>: <%="%.2f" % load1%> <%="%.2f" % load5%> <%="%.2f" % load15%><br />
|
||||
<%:Hostname%>: <%=hostname%>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="menubar">
|
||||
<h2 class="navigation"><a id="navigation" name="navigation"><%:Navigation%></a></h2>
|
||||
<ul id="mainmenu" class="dropdowns">
|
||||
<%-
|
||||
local function submenu(prefix, node)
|
||||
if not node.nodes or node.hidden then
|
||||
return false
|
||||
end
|
||||
local index = {}
|
||||
local count = 0
|
||||
for k, n in pairs(node.nodes) do
|
||||
if n.title and n.target then
|
||||
table.insert(index, {name=k, order=n.order or 100})
|
||||
count = count + 1
|
||||
end
|
||||
end
|
||||
|
||||
table.sort(index, function(a, b) return a.order < b.order end)
|
||||
|
||||
if count > 0 then
|
||||
%>
|
||||
<ul id="submenu_<%=string.gsub(string.gsub(prefix, "/", "_"), "^_(.-)_$", "%1")%>">
|
||||
<%-
|
||||
for j, v in pairs(index) do
|
||||
if #v.name > 0 then
|
||||
local nnode = node.nodes[v.name]
|
||||
local href = controller .. prefix .. v.name .. "/"
|
||||
href = (nnode.query) and href .. luci.http.build_querystring(nnode.query) or href
|
||||
%>
|
||||
<li><a<% if nnode._menu_selected then %> class="active"<%end%> href="<%=pcdata(href)%>"><%=striptags(nnode.title)%></a><%-
|
||||
submenu(prefix .. v.name .. "/", nnode)
|
||||
%></li>
|
||||
<%-
|
||||
end
|
||||
end
|
||||
%>
|
||||
</ul>
|
||||
<%
|
||||
end
|
||||
end
|
||||
|
||||
if cattree and cattree.nodes then
|
||||
local index = {}
|
||||
for k, node in pairs(cattree.nodes) do
|
||||
table.insert(index, {name=k, order=node.order or 100})
|
||||
end
|
||||
|
||||
table.sort(index, function(a, b) return a.order < b.order end)
|
||||
|
||||
for i, k in ipairs(index) do
|
||||
node = cattree.nodes[k.name]
|
||||
if node.title and node.target and not node.hidden then
|
||||
local href = controller.."/"..category.."/"..k.name.."/"
|
||||
href = (k.query) and href .. luci.http.build_querystring(k.query) or href
|
||||
%>
|
||||
<li><a<% if node._menu_selected then %> class="preactive"<%end%> href="<%=pcdata(href)%>"><%=striptags(node.title)%></a><%
|
||||
submenu("/" .. category .. "/" .. k.name .. "/", node)
|
||||
%></li><% end
|
||||
end
|
||||
end
|
||||
%>
|
||||
</ul>
|
||||
<div class="hostinfo">
|
||||
<%=hostname%> | <%=luci.version.distversion%> |
|
||||
<%:Load%>: <%="%.2f" % load1%> <%="%.2f" % load5%> <%="%.2f" % load15%>
|
||||
</div>
|
||||
|
||||
<ul id="modemenu"><%
|
||||
for k,node in pairs(tree.nodes) do
|
||||
|
|
@ -151,27 +155,33 @@ if tree.nodes[category] and tree.nodes[category].ucidata then
|
|||
end
|
||||
end
|
||||
-%>
|
||||
<ul id="savemenu" class="dropdowns">
|
||||
<li><% if ucic > 0 then %><a class="warning" href="<%=controller%>/<%=category%>/uci/changes/"><%:Unsaved Changes%>: <%=ucic%></a><%
|
||||
submenu("/" .. category .. "/uci/", tree.nodes[category].nodes["uci"])
|
||||
else -%>
|
||||
<a href="#"><%:Changes%>: 0</a><% end -%>
|
||||
</li>
|
||||
</ul><% end %>
|
||||
<div id="savemenu">
|
||||
<% if ucic > 0 then %>
|
||||
<a class="warning" href="<%=controller%>/<%=category%>/uci/changes/?redir=<%=luci.http.urlencode(tree.nodes[category].nodes["uci"].query)%>"><%:Unsaved Changes%>: <%=ucic%></a>
|
||||
<%- else -%>
|
||||
<a href="#"><%:Changes%>: 0</a>
|
||||
<% end -%>
|
||||
</div><% end %>
|
||||
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div id="maincontent">
|
||||
<noscript>
|
||||
<div class="errorbox">
|
||||
<strong><%:Java Script required!%></strong><br />
|
||||
<%:You must enable Java Script in your browser or LuCI will not work properly.%>
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<%- if not luci.sys.user.getpasswd("root") then -%>
|
||||
<div class="errorbox">
|
||||
<strong><%:No password set!%></strong><br />
|
||||
<%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%>
|
||||
<div id="maincontainer">
|
||||
<div id="tabmenu">
|
||||
<% if category then subtree("/" .. category .. "/", cattree) end %>
|
||||
</div>
|
||||
<%- end -%>
|
||||
|
||||
<div id="maincontent">
|
||||
<noscript>
|
||||
<div class="errorbox">
|
||||
<strong><%:Java Script required!%></strong><br />
|
||||
<%:You must enable Java Script in your browser or LuCI will not work properly.%>
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<%- if not luci.sys.user.getpasswd("root") then -%>
|
||||
<div class="errorbox">
|
||||
<strong><%:No password set!%></strong><br />
|
||||
<%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%>
|
||||
</div>
|
||||
<%- end -%>
|
||||
|
|
|
|||
Loading…
Reference in a new issue