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

luci-theme-material: add support for modmenu

Browse source 
Improve support for modmenu.

Signed-off-by: Ansuel Smith <ansuelsmth@gmail.com>
(cherry picked from commit 05d100442b)
This commit is contained in:
Ansuel Smith 2021-08-11 17:15:08 +02:00 committed by Jo-Philipp Wich
parent c592d0a614
commit 9d2c8cb429
4 changed files with 52 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
themes/luci-theme-material/htdocs/luci-static/material/cascade.css
View file

@ -430,6 +430,52 @@ header > .fill > .container > .status > * {
cursor: pointer;
}
.modemenu-buttons {
display: flex;
flex-wrap: wrap;
align-items: center;
color: #fff;
color: var(--header-color);
background: #09c;
background: var(--header-bg);
padding: .5rem;
transition: box-shadow .2s;
box-shadow: 0 2px 5px rgb(0 0 0 / 26%);
}
#modemenu {
margin: 0.25rem;
display: flex;
align-items: center;
flex-wrap: wrap;
}
#modemenu > li > a {
font-size: .8rem;
font-weight: bold;
padding: .3rem .8rem;
white-space: nowrap;
text-decoration: none;
text-transform: uppercase;
color: #fff !important;
border-radius: 3px;
background-color: #bfbfbf;
text-shadow: none;
}
#modemenu > li > a.active {
background-color: #5bc0de !important;
}
#modemenu > li.divider {
margin-left: .25rem;
margin-right: .25rem;
border: .5rem solid var(--submenu-bg-hover);
border-left: 1px solid var(--submenu-bg-hover);
border-right: 1px solid var(--submenu-bg-hover);
border-radius: 1rem;
}
#xhr_poll_status {
display: flex;
}

6
themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js
View file

@ -117,12 +117,12 @@ return baseclass.extend({
if (isActive)
this.renderMainMenu(children[i], children[i].name);
if (i > 0 || i < children.length)
if (i > 0 && i < children.length)
ul.appendChild(E('li', {'class': 'divider'}, [E('span')]))
}
if (ul.children.length > 1)
ul.style.display = '';
if (children.length > 1)
ul.parentElement.style.display = '';
},
renderTabMenu: function(tree, url, level) {

1
themes/luci-theme-material/luasrc/view/themes/material/footer.htm
View file

@ -22,7 +22,6 @@
</div>
<footer class="mobile-hide">
<a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %>
<ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul>
</footer>
</div>
</div>

3
themes/luci-theme-material/luasrc/view/themes/material/header.htm
View file

@ -72,6 +72,9 @@
<div style="" class="loading"><span><div class="loading-img"></div><%:Collecting data...%></span></div>
<div class="main-left" id="mainmenu" style="display:none"></div>
<div class="main-right">
<div class="modemenu-buttons" style="display:none">
<ul id="modemenu"></ul>
</div>
<div class="darkMask"></div>
<div id="maincontent">
<div class="container">