diff options
4 files changed, 52 insertions, 4 deletions
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css index c41afc5b6a..dbb2d148c5 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css @@ -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; } diff --git a/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js b/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js index 3499d5d19f..a994c4f463 100644 --- a/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js +++ b/themes/luci-theme-material/htdocs/luci-static/resources/menu-material.js @@ -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) { diff --git a/themes/luci-theme-material/luasrc/view/themes/material/footer.htm b/themes/luci-theme-material/luasrc/view/themes/material/footer.htm index 4786b77452..f572504f4b 100644 --- a/themes/luci-theme-material/luasrc/view/themes/material/footer.htm +++ b/themes/luci-theme-material/luasrc/view/themes/material/footer.htm @@ -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> diff --git a/themes/luci-theme-material/luasrc/view/themes/material/header.htm b/themes/luci-theme-material/luasrc/view/themes/material/header.htm index 1d9849a98a..2b890da034 100644 --- a/themes/luci-theme-material/luasrc/view/themes/material/header.htm +++ b/themes/luci-theme-material/luasrc/view/themes/material/header.htm @@ -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"> |