* luci/themes: lots of fixes in openwrt.org theme
authorJo-Philipp Wich <jow@openwrt.org>
Sat, 12 Jul 2008 16:46:10 +0000 (16:46 +0000)
committerJo-Philipp Wich <jow@openwrt.org>
Sat, 12 Jul 2008 16:46:10 +0000 (16:46 +0000)
* luci/libs/cbi: use <table> fpr table sections

libs/cbi/luasrc/view/cbi/cell_valuefooter.htm [new file with mode: 0644]
libs/cbi/luasrc/view/cbi/cell_valueheader.htm [new file with mode: 0644]
libs/cbi/luasrc/view/cbi/tblsection.htm
themes/openwrt.org/htdocs/luci-static/openwrt.org/bg.jpg
themes/openwrt.org/htdocs/luci-static/openwrt.org/cascade.css
themes/openwrt.org/luasrc/view/themes/openwrt.org/header.htm

diff --git a/libs/cbi/luasrc/view/cbi/cell_valuefooter.htm b/libs/cbi/luasrc/view/cbi/cell_valuefooter.htm
new file mode 100644 (file)
index 0000000..045866d
--- /dev/null
@@ -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 -%>
diff --git a/libs/cbi/luasrc/view/cbi/cell_valueheader.htm b/libs/cbi/luasrc/view/cbi/cell_valueheader.htm
new file mode 100644 (file)
index 0000000..7b8f0a5
--- /dev/null
@@ -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%>">
index 2688e7a..367af80 100644 (file)
@@ -16,38 +16,60 @@ $Id$
                                        <h2><%=self.title%></h2>
                                        <div class="cbi-section-descr"><%=self.description%></div>
                                        <div class="cbi-section-node">
-                                               <div class="cbi-section-row">
-<% for i, k in pairs(self.children) do %>
-                                               <div class="cbi-section-row-head"><%=k.title%></div>                    
-<% end %>
-                                               </div>
-                                               <div class="cbi-section-row">
-<% for i, k in pairs(self.children) do %>
-                                               <div class="cbi-section-row-descr"><%=k.description%></div>                     
-<% end %>
-                                               </div>
-<% for i, k in ipairs(self:cfgsections()) do%>
-                                               <% if not self.anonymous then %><h3 class="table-cell"><%=k%></h3><% end %>
-<%
-section = k 
-scope = {valueheader = "cbi/tiny_valueheader", valuefooter = "cbi/tiny_valuefooter"}
-%>
-<div class="cbi-section-row" id="cbi-<%=self.config%>-<%=section%>">
-<%+cbi/ucisection%>
-                                               <% if self.addremove then %><div class="cbi-section-remove table-cell">
-                                                       <input type="submit" name="cbi.rts.<%=self.config%>.<%=k%>" value="X" />
-                                               </div><% end %>
-</div>
-<% end %>
-<% if self.addremove then %>
-                                       <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>
+                                               <%- local count = 0 -%>
+                                               <table class="cbi-section-table">
+                                                       <tr class="cbi-section-table-titles">
+                                                       <%- for i, k in pairs(self.children) do -%>
+                                                               <th class="cbi-section-table-cell"><%=k.title%></th>
+                                                       <%- count = count + 1; end; if self.addremove then -%>
+                                                               <th class="cbi-section-table-cell">&nbsp;</th>
+                                                       <%- count = count + 1; end -%>
+                                                       </tr>
+                                                       <tr class="cbi-section-table-descr">
+                                                       <%- for i, k in pairs(self.children) do -%>
+                                                               <th class="cbi-section-table-cell"><%=k.description%></th>
+                                                       <%- end; if self.addremove then -%>
+                                                               <th class="cbi-section-table-cell">&nbsp;</th>
+                                                       <%- end -%>
+                                                       </tr>
+                                                       <%- for i, k in ipairs(self:cfgsections()) do
+                                                                       if not self.anonymous then
+                                                       -%>
+                                                       <tr class="cbi-section-table-title">
+                                                               <th colspan="<%=count%>"><h3><%=k%></h3></th>
+                                                       </tr>
+                                                       <%-     end
+                                                                       section = k
+                                                                       scope = { valueheader = "cbi/cell_valueheader", valuefooter = "cbi/cell_valuefooter" }
+                                                       -%>
+                                                       <tr class="cbi-section-table-row" id="cbi-<%=self.config%>-<%=section%>">
+                                                               <%-+cbi/ucisection-%>
+                                                               <%- if self.addremove then -%>
+                                                                       <td class="cbi-section-table-cell">
+                                                                               <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>
-<% end %>
                                </div>
index 91c1b12..dece957 100644 (file)
Binary files a/themes/openwrt.org/htdocs/luci-static/openwrt.org/bg.jpg and b/themes/openwrt.org/htdocs/luci-static/openwrt.org/bg.jpg differ
index 2fb89a4..42b4d09 100644 (file)
@@ -15,6 +15,11 @@ body {
        line-height: 100%;
 }
 
+code {
+       font-family: monospace;
+       white-space: pre;
+}
+
 div#content ul {
        margin-left: 2em;
 }
@@ -78,6 +83,10 @@ div#content ul {
        float: left;
 }
 
+.mainmenu li {
+       white-space: nowrap;
+}
+
 .mainmenu div ul {
        display: none;
        position: absolute;
@@ -144,28 +153,6 @@ div#content ul {
        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 {
        clear: both;
        width: 60%;
@@ -241,6 +228,12 @@ input[type=password] {
        width: 20em;
 }
 
+td select,
+td input[type=text],
+td input[type=password] {
+       width: 99%;
+}
+
 textarea {
        margin-left: -1px;
        margin-bottom: 0.5em;
@@ -328,6 +321,26 @@ div.cbi-section-node {
        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 {
        text-align: right;
 }
@@ -344,5 +357,3 @@ div.cbi-section-node {
        text-decoration: none;
        font-size: 70%;
 }
-
-
index ea30cbb..df31c01 100644 (file)
@@ -19,11 +19,11 @@ local request  = require("luci.dispatcher").context.path
 local category = request[1]
 local tree     = luci.dispatcher.node()
 local cattree  = category and luci.dispatcher.node(category)
-local node     = luci.dispatcher.context.dispatched 
+local node     = luci.dispatcher.context.dispatched
 
 local c = tree
 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._menu_selected = true
        end
@@ -48,7 +48,7 @@ require("luci.http").prepare_content("text/html")
        <%=luci.config.brand.firmware%><br />
        <%=luci.config.brand.distro%><br />
        <%:load%>: <%=load1%> <%=load5%> <%=load15%><br />
-       <%:hostname%>: <%=luci.sys.hostname()%> 
+       <%:hostname%>: <%=luci.sys.hostname()%>
        </div>
        <div class="title">
                <span class="headertitle"><%=luci.config.brand.title%></span><br />
@@ -57,7 +57,7 @@ require("luci.http").prepare_content("text/html")
 </div>
 
 <div class="pathbar separator black whitetext bold">
-<%:path%>: <% 
+<%:path%>: <%
 local c = tree
 local url = controller
 for k,v in pairs(request) do
@@ -77,17 +77,17 @@ local function submenu(prefix, node)
        if not node.nodes then
                return false
        end
-       local index = {}        
+       local index = {}
        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})
                end
        end
-               
+
        table.sort(index, function(a, b) return a.order < b.order end)
 %>
        <ul>
-       <% for j, v in pairs(index) do 
+       <% for j, v in pairs(index) do
                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
@@ -97,16 +97,16 @@ local function submenu(prefix, node)
                        <% submenu(prefix .. v.name .. "/", nnode) %>
                </li>
        <% end %>
-               </ul> 
-<%      
+       </ul>
+<%
 end
 
 if cattree and cattree.nodes then
-       local index = {}        
+       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
@@ -114,13 +114,13 @@ if cattree and cattree.nodes then
                if node.title and node.target then
                        local href = controller.."/"..category.."/"..k.name
                        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)%>
                        </div>
 <%             end
        end
 end
-%>             
+%>
        </div>
        <div class="modemenu">
                <ul><%
@@ -130,32 +130,33 @@ end
 <%                             end
                        end%>
                </ul>
-       </div>
-       <br class="clear" />
-</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;
+
+               <%
+                       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
-                       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>
+               %>
+               <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 %>
-               </ul>
        </div>
-       <% end %>
+       <br class="clear" />
 </div>
 <div id="content">