luci-theme-material: add support for modmenu

Improve support for modmenu.

Signed-off-by: Ansuel Smith <ansuelsmth@gmail.com>

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 c41afc5b6a096cb47415ca82f4b943058c44f531..dbb2d148c5131abd112cb9ffb9f93f1c631de5b0 100644 (file)
--- 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 3499d5d19f3869442e869f836d53a478676be735..a994c4f4630cf86c71879ecff5dd01224313313b 100644 (file)
--- 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 4786b77452dc42d031405a3228a6c0eba8dbb883..f572504f4b79857e405ac1f049b7eaff8ed1e56f 100644 (file)
--- 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 1d9849a98a176ad090b62123a4896c8ba0a2947f..2b890da034662781a9e97ddb393939b5f617c8d6 100644 (file)
--- 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">