* luci/themes: lots of fixes in openwrt.org theme

* luci/libs/cbi:	use <table> fpr table sections
This commit is contained in:
Jo-Philipp Wich 2008-07-12 16:46:10 +00:00
parent c026b6ed03
commit dfe0287c6f
6 changed files with 171 additions and 95 deletions

View file

@ -0,0 +1,27 @@
<%#
LuCI - Lua Configuration Interface
Copyright 2008 Steven Barth <steven@midlink.org>
Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
$Id$
-%>
<%- if self.tag_invalid[section] then -%>
<div class="cbi-error"><%:cbi_invalid%></div>
<%- end -%>
</td>
<%- if #self.deps > 0 then -%>
<script type="text/javascript">
<% for j, d in ipairs(self.deps) do -%>
cbi_d_add("cbi-<%=self.config.."-"..section.."-"..self.option%>", "cbid.<%=self.config.."."..section.."."..d.field%>", "<%=d.value%>");
<%- end %>
</script>
<%- end -%>

View file

@ -0,0 +1,15 @@
<%#
LuCI - Lua Configuration Interface
Copyright 2008 Steven Barth <steven@midlink.org>
Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
$Id$
-%>
<td class="cbi-value-field" id="cbi-<%=self.config.."-"..section.."-"..self.option%>">

View file

@ -16,38 +16,60 @@ $Id$
<h2><%=self.title%></h2> <h2><%=self.title%></h2>
<div class="cbi-section-descr"><%=self.description%></div> <div class="cbi-section-descr"><%=self.description%></div>
<div class="cbi-section-node"> <div class="cbi-section-node">
<div class="cbi-section-row"> <%- local count = 0 -%>
<% for i, k in pairs(self.children) do %> <table class="cbi-section-table">
<div class="cbi-section-row-head"><%=k.title%></div> <tr class="cbi-section-table-titles">
<% end %> <%- for i, k in pairs(self.children) do -%>
</div> <th class="cbi-section-table-cell"><%=k.title%></th>
<div class="cbi-section-row"> <%- count = count + 1; end; if self.addremove then -%>
<% for i, k in pairs(self.children) do %> <th class="cbi-section-table-cell">&nbsp;</th>
<div class="cbi-section-row-descr"><%=k.description%></div> <%- count = count + 1; end -%>
<% end %> </tr>
</div> <tr class="cbi-section-table-descr">
<% for i, k in ipairs(self:cfgsections()) do%> <%- for i, k in pairs(self.children) do -%>
<% if not self.anonymous then %><h3 class="table-cell"><%=k%></h3><% end %> <th class="cbi-section-table-cell"><%=k.description%></th>
<% <%- end; if self.addremove then -%>
section = k <th class="cbi-section-table-cell">&nbsp;</th>
scope = {valueheader = "cbi/tiny_valueheader", valuefooter = "cbi/tiny_valuefooter"} <%- end -%>
%> </tr>
<div class="cbi-section-row" id="cbi-<%=self.config%>-<%=section%>"> <%- for i, k in ipairs(self:cfgsections()) do
<%+cbi/ucisection%> if not self.anonymous then
<% if self.addremove then %><div class="cbi-section-remove table-cell"> -%>
<input type="submit" name="cbi.rts.<%=self.config%>.<%=k%>" value="X" /> <tr class="cbi-section-table-title">
</div><% end %> <th colspan="<%=count%>"><h3><%=k%></h3></th>
</div> </tr>
<% end %> <%- end
<% if self.addremove then %> section = k
<div class="cbi-section-create"> scope = { valueheader = "cbi/cell_valueheader", valuefooter = "cbi/cell_valuefooter" }
<% if self.anonymous then %> -%>
<input type="submit" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" value="<%:cbi_add%>" /> <tr class="cbi-section-table-row" id="cbi-<%=self.config%>-<%=section%>">
<% else %> <%-+cbi/ucisection-%>
<input type="text" class="cbi-section-create-name" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" /> <%- if self.addremove then -%>
<input type="submit" value="<%:cbi_add%>" /> <td class="cbi-section-table-cell">
<% end %><% if self.err_invalid then %><div class="cbi-error"><%:cbi_invalid%></div><% end %> <input type="submit" name="cbi.rts.<%=self.config%>.<%=k%>" value="X" />
</td>
<%- end -%>
</tr>
<%- end -%>
<%- if self.addremove then -%>
<tr class="cbi-section-table-row">
<td colspan="<%=count%>" class="cbi-section-table-optionals">
<div class="cbi-section-create">
<% if self.anonymous then %>
<input type="submit" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" value="<%:cbi_add%>" />
<% else %>
<input type="text" class="cbi-section-create-name" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>" />
<input type="submit" value="<%:cbi_add%>" />
<% end %>
<% if self.err_invalid then %>
<div class="cbi-error"><%:cbi_invalid%></div>
<% end %>
</div>
</td>
</tr>
<%- end -%>
</table>
</div> </div>
</div>
<% end %>
</div> </div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 40 KiB

View file

@ -15,6 +15,11 @@ body {
line-height: 100%; line-height: 100%;
} }
code {
font-family: monospace;
white-space: pre;
}
div#content ul { div#content ul {
margin-left: 2em; margin-left: 2em;
} }
@ -78,6 +83,10 @@ div#content ul {
float: left; float: left;
} }
.mainmenu li {
white-space: nowrap;
}
.mainmenu div ul { .mainmenu div ul {
display: none; display: none;
position: absolute; position: absolute;
@ -144,28 +153,6 @@ div#content ul {
float: right; float: right;
} }
.sidebar {
position: absolute;
top: -50px;
right: 0;
width: 18%;
color: #888888;
text-align: center;
font-size: 100%;
font-weight: bold;
z-index: -1;
}
.sidebar ul {
width: 100%;
margin-top: 16em;
list-style-type: none;
color: #ffffff;
text-align: left;
font-size: 80%;
font-size: normal;
}
#content { #content {
clear: both; clear: both;
width: 60%; width: 60%;
@ -241,6 +228,12 @@ input[type=password] {
width: 20em; width: 20em;
} }
td select,
td input[type=text],
td input[type=password] {
width: 99%;
}
textarea { textarea {
margin-left: -1px; margin-left: -1px;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@ -328,6 +321,26 @@ div.cbi-section-node {
padding-bottom: 0; padding-bottom: 0;
} }
table.cbi-section-table {
width: 100%;
font-size: 95%;
}
table.cbi-section-table th,
table.cbi-section-table td {
text-align: center;
}
tr.cbi-section-table-descr th {
font-weight: normal;
font-size: 90%;
}
td.cbi-section-table-optionals {
text-align: left !important;
padding-top: 1em;
}
.right { .right {
text-align: right; text-align: right;
} }
@ -344,5 +357,3 @@ div.cbi-section-node {
text-decoration: none; text-decoration: none;
font-size: 70%; font-size: 70%;
} }

View file

@ -19,11 +19,11 @@ local request = require("luci.dispatcher").context.path
local category = request[1] local category = request[1]
local tree = luci.dispatcher.node() local tree = luci.dispatcher.node()
local cattree = category and luci.dispatcher.node(category) local cattree = category and luci.dispatcher.node(category)
local node = luci.dispatcher.context.dispatched local node = luci.dispatcher.context.dispatched
local c = tree local c = tree
for i,r in ipairs(request) do for i,r in ipairs(request) do
if c.nodes and c.nodes[r] then if c.nodes and c.nodes[r] then
c = c.nodes[r] c = c.nodes[r]
c._menu_selected = true c._menu_selected = true
end end
@ -48,7 +48,7 @@ require("luci.http").prepare_content("text/html")
<%=luci.config.brand.firmware%><br /> <%=luci.config.brand.firmware%><br />
<%=luci.config.brand.distro%><br /> <%=luci.config.brand.distro%><br />
<%:load%>: <%=load1%> <%=load5%> <%=load15%><br /> <%:load%>: <%=load1%> <%=load5%> <%=load15%><br />
<%:hostname%>: <%=luci.sys.hostname()%> <%:hostname%>: <%=luci.sys.hostname()%>
</div> </div>
<div class="title"> <div class="title">
<span class="headertitle"><%=luci.config.brand.title%></span><br /> <span class="headertitle"><%=luci.config.brand.title%></span><br />
@ -57,7 +57,7 @@ require("luci.http").prepare_content("text/html")
</div> </div>
<div class="pathbar separator black whitetext bold"> <div class="pathbar separator black whitetext bold">
<%:path%>: <% <%:path%>: <%
local c = tree local c = tree
local url = controller local url = controller
for k,v in pairs(request) do for k,v in pairs(request) do
@ -77,17 +77,17 @@ local function submenu(prefix, node)
if not node.nodes then if not node.nodes then
return false return false
end end
local index = {} local index = {}
for k, n in pairs(node.nodes) do for k, n in pairs(node.nodes) do
if n.title and n.target then if n.title and n.target then
table.insert(index, {name=k, order=n.order or 100}) table.insert(index, {name=k, order=n.order or 100})
end end
end end
table.sort(index, function(a, b) return a.order < b.order end) table.sort(index, function(a, b) return a.order < b.order end)
%> %>
<ul> <ul>
<% for j, v in pairs(index) do <% for j, v in pairs(index) do
local nnode = node.nodes[v.name] local nnode = node.nodes[v.name]
local href = controller .. prefix .. v.name local href = controller .. prefix .. v.name
href = (nnode.query) and href .. luci.http.build_querystring(nnode.query) or href href = (nnode.query) and href .. luci.http.build_querystring(nnode.query) or href
@ -97,16 +97,16 @@ local function submenu(prefix, node)
<% submenu(prefix .. v.name .. "/", nnode) %> <% submenu(prefix .. v.name .. "/", nnode) %>
</li> </li>
<% end %> <% end %>
</ul> </ul>
<% <%
end end
if cattree and cattree.nodes then if cattree and cattree.nodes then
local index = {} local index = {}
for k, node in pairs(cattree.nodes) do for k, node in pairs(cattree.nodes) do
table.insert(index, {name=k, order=node.order or 100}) table.insert(index, {name=k, order=node.order or 100})
end end
table.sort(index, function(a, b) return a.order < b.order end) table.sort(index, function(a, b) return a.order < b.order end)
for i, k in ipairs(index) do for i, k in ipairs(index) do
@ -114,13 +114,13 @@ if cattree and cattree.nodes then
if node.title and node.target then if node.title and node.target then
local href = controller.."/"..category.."/"..k.name local href = controller.."/"..category.."/"..k.name
href = (k.query) and href .. luci.http.build_querystring(k.query) or href %> href = (k.query) and href .. luci.http.build_querystring(k.query) or href %>
<div<% if node._menu_selected then %> class="preactive"<%end%>><a href="<%=href%>"><%=node.title%></a> <div<% if node._menu_selected then %> class="preactive"<%end%>><a href="<%=href%>"><%=node.title%></a>
<%submenu("/" .. category .. "/" .. k.name .. "/", node)%> <%submenu("/" .. category .. "/" .. k.name .. "/", node)%>
</div> </div>
<% end <% end
end end
end end
%> %>
</div> </div>
<div class="modemenu"> <div class="modemenu">
<ul><% <ul><%
@ -130,32 +130,33 @@ end
<% end <% end
end%> end%>
</ul> </ul>
<%
if "admin" == request[1] then
local ucic = 0
for i, j in pairs(require("luci.model.uci").changes()) do
for k, l in pairs(j) do
for m, n in pairs(l) do
ucic = ucic + 1;
end
end
end
%>
<div class="mainmenu" style="float:right; margin-right:2em">
<div>
<% if ucic > 0 then %>
<a href="<%=controller%>/admin/uci/changes"><%:changes%>: <%=ucic%></a>
<ul>
<li><a href="<%=controller%>/admin/uci/apply"><%:apply%></a></li>
<li><a href="<%=controller%>/admin/uci/revert"><%:revert%></a></li>
</ul>
<% else %>
<a href="#"><%:changes%>: 0</a>
<% end %>
</div>
</div>
<% end %>
</div> </div>
<br class="clear" /> <br class="clear" />
</div> </div>
<div class="sidebar">
<%
if "admin" == request[1] then
local ucic = 0
for i, j in pairs(require("luci.model.uci").changes()) do
for k, l in pairs(j) do
for m, n in pairs(l) do
ucic = ucic + 1;
end
end
end
%>
<div>
<ul>
<% if ucic > 0 then %>
<li><a href="<%=controller%>/admin/uci/changes"><%:changes%>: <%=ucic%></a></li>
<li><a href="<%=controller%>/admin/uci/apply"><%:apply%></a></li>
<li><a href="<%=controller%>/admin/uci/revert"><%:revert%></a></li>
<% else %>
<li><%:changes%>: 0</li>
<% end %>
</ul>
</div>
<% end %>
</div>
<div id="content"> <div id="content">