diff options
Diffstat (limited to 'themes/luci-theme-material/htdocs')
| -rwxr-xr-x | themes/luci-theme-material/htdocs/luci-static/material/css/style.css | 156 | ||||
| -rwxr-xr-x | themes/luci-theme-material/htdocs/luci-static/material/js/script.js | 200 |
2 files changed, 146 insertions, 210 deletions
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css index 8516595038..6b5a0bae31 100755 --- a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css @@ -85,9 +85,9 @@ select { select, input { background-color: transparent; - color: rgba(0,0,0,.87); + color: rgba(0, 0, 0, .87); border: none; - border-bottom: 1px solid rgba(0,0,0,.26); + border-bottom: 1px solid rgba(0, 0, 0, .26); outline: 0; padding: 0; box-shadow: none; @@ -106,7 +106,7 @@ input:focus { border-width: 2px; } -select[multiple="multiple"]{ +select[multiple="multiple"] { height: auto; } @@ -115,11 +115,17 @@ code { } abbr { - color: #0099CC; + color: #005470; text-decoration: underline; cursor: help; } +hr{ + margin: 1rem 0; + border-color: #EEE; + opacity: 0.1; +} + header, .main { width: 100%; position: absolute; @@ -134,7 +140,7 @@ header { z-index: 101; } -footer{ +footer { text-align: right; padding: 1rem; color: #aaa; @@ -142,7 +148,7 @@ footer{ text-shadow: 0px 0px 2px #BBB; } -footer > a{ +footer > a { color: #aaa; text-decoration: none; } @@ -155,7 +161,7 @@ footer > a{ height: calc(100% - 4rem); } -.main > .loading{ +.main > .loading { position: fixed; width: 100%; height: 100%; @@ -165,7 +171,7 @@ footer > a{ top: 0; } -.main > .loading > span{ +.main > .loading > span { display: block; text-align: center; margin-top: 2rem; @@ -173,11 +179,11 @@ footer > a{ font-size: 1.3rem; } -.main > .loading > span > .loading-img:before{ +.main > .loading > span > .loading-img:before { content: "\e603"; } -.main > .loading > span > .loading-img{ +.main > .loading > span > .loading-img { animation: anim-rotate 2s infinite linear; margin-right: 0.2rem; display: inline-block; @@ -185,14 +191,14 @@ footer > a{ @keyframes anim-rotate { 0% { - -webkit-transform:rotate(0); - -ms-transform:rotate(0); - transform:rotate(0); + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + transform: rotate(0); } 100% { - -webkit-transform:rotate(360deg); - -ms-transform:rotate(360deg); - transform:rotate(360deg) + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg) } } @@ -217,7 +223,7 @@ footer > a{ background-color: #EEE; } -.main-right > #maincontent{ +.main-right > #maincontent { background-color: #EEE; } @@ -274,7 +280,7 @@ header > .container > .brand { border-color: #eea236; } -.error{ +.error { color: red; } @@ -424,7 +430,7 @@ fieldset { background-color: #FFF; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); - -webkit-overflow-scrolling:touch; + -webkit-overflow-scrolling: touch; } fieldset > legend { @@ -476,6 +482,8 @@ fieldset > table > tbody > tr:nth-of-type(odd) { } /* fix progress bar */ +#swaptotal > div, +#swapfree > div, #memfree > div, #membuff > div, #conns > div, @@ -484,6 +492,8 @@ fieldset > table > tbody > tr:nth-of-type(odd) { height: 1.4rem !important; } +#swaptotal > div > div, +#swapfree > div > div, #memfree > div > div, #membuff > div > div, #conns > div > div, @@ -562,6 +572,7 @@ td > table > tbody > tr > td { box-shadow: none; } +form.inline + form.inline, .cbi-button + .cbi-button { margin-left: 0.6rem; } @@ -600,7 +611,7 @@ td > table > tbody > tr > td { border-color: #d43f3a !important; } -.a-to-btn{ +.a-to-btn { text-decoration: none; } @@ -715,6 +726,11 @@ td > table > tbody > tr > td { background-color: #eee; } +.cbi-rowstyle-2 .cbi-button-up, +.cbi-rowstyle-2 .cbi-button-down{ + background-color: #FFF !important; +} + .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell { width: auto !important; } @@ -742,7 +758,7 @@ td > table > tbody > tr > td { } .inline { - display: inline-block; + display: inline; } .cbi-page-actions { @@ -1049,20 +1065,20 @@ header > .container > .pull-right > * { float: right; } -.node-main-login > .main .cbi-value{ +.node-main-login > .main .cbi-value { display: block; } -.node-main-login > .main .cbi-value > *{ +.node-main-login > .main .cbi-value > * { display: inline-block !important; } .node-main-login > .main .cbi-input-user, -.node-main-login > .main .cbi-input-password{ +.node-main-login > .main .cbi-input-password { min-width: 15rem; } -.node-main-login footer{ +.node-main-login footer { bottom: 0; position: absolute; width: 100%; @@ -1070,22 +1086,20 @@ header > .container > .pull-right > * { /* fix status overview */ -.node-status-overview > .main fieldset:nth-child(4) td:nth-child(2){ +.node-status-overview > .main fieldset:nth-child(4) td:nth-child(2) { white-space: normal; } - /* fix status processes */ .node-status-processes > .main table tr td:nth-child(3) { white-space: normal; } -.node-status-firewall > .main fieldset li { - display: inline-block; +.node-status-iptables > .main div > .cbi-map > form { + margin: 2rem 2rem 0 0; } - /* fix system reboot */ .node-system-reboot > .main > .main-right p, @@ -1094,34 +1108,34 @@ header > .container > .pull-right > * { } /* fix Services Network Shares*/ -.node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title { +.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title { margin-bottom: 1rem; } -.node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field { +.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field { display: list-item; } -.node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description { +.node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description { padding-top: 1rem; } /* fix System Software*/ -.node-system-software > .main table tr td:nth-child(1) { +.node-system-packages > .main table tr td:nth-child(1) { width: auto !important; } -.node-system-software > .main table tr td:nth-last-child(1) { +.node-system-packages > .main table tr td:nth-last-child(1) { white-space: normal; font-size: small; color: #404040; } -.node-system-software > .main .cbi-tabmenu > li > a, .tabs > li > a { +.node-system-packages > .main .cbi-tabmenu > li > a, .tabs > li > a { padding: 0.5rem 1rem; } -.node-system-software > .main .cbi-value > pre { +.node-system-packages > .main .cbi-value > pre { background-color: #eee; padding: 0.5rem; overflow: auto; @@ -1132,23 +1146,42 @@ header > .container > .pull-right > * { } /* fix network firewall*/ -.node-network-firewall > .main .cbi-section-table-row > .cbi-value-field .cbi-input-select{ +.node-network-firewall > .main .cbi-section-table-row > .cbi-value-field .cbi-input-select { min-width: 4rem; } -.node-status-firewall fieldset, -.node-system-software fieldset, -.node-system-backup_flash_firmware fieldset { +.node-status-iptables fieldset, +.node-system-packages fieldset, +.node-system-flashops fieldset { margin-top: 0; } -.node-status-firewall .cbi-tabmenu, -.node-system-software .cbi-tabmenu, -.node-system-backup_flash_firmware .cbi-tabmenu { +.node-status-iptables .cbi-tabmenu, +.node-system-packages .cbi-tabmenu, +.node-system-flashops .cbi-tabmenu { border: none; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); } +#cbi-firewall-redirect table *, +#cbi-network-switch_vlan table *, +#cbi-firewall-zone table *{ + font-size: smaller; +} + +#cbi-firewall-redirect table input[type="text"], +#cbi-network-switch_vlan table input[type="text"], +#cbi-firewall-zone table input[type="text"]{ + width: 5rem; +} + +#cbi-firewall-redirect table select, +#cbi-network-switch_vlan table select, +#cbi-firewall-zone table select{ + min-width: 3.5rem; +} + + /* language fix */ body.lang_pl.node-main-login .cbi-value-title { width: 12rem; @@ -1179,6 +1212,7 @@ body.lang_pl.node-main-login .cbi-value-title { .cbi-value-title { width: 15rem; + padding-right: 0.6rem; } fieldset { @@ -1189,7 +1223,7 @@ body.lang_pl.node-main-login .cbi-value-title { font-size: smaller; } - .node-status-firewall > .main fieldset li > a { + .node-status-iptables > .main fieldset li > a { padding: 0.3rem 0.6rem; } } @@ -1229,6 +1263,7 @@ body.lang_pl.node-main-login .cbi-value-title { table { font-size: 0.8rem !important; + width: 100% !important; } .main > .main-left > .nav > li, @@ -1399,13 +1434,40 @@ body.lang_pl.node-main-login .cbi-value-title { padding-bottom: 1rem; } - .node-system-software > .main .cbi-value.cbi-value-last > div { + .node-system-packages > .main .cbi-value.cbi-value-last > div { width: 100% !important; } - .node-system-software > .main .cbi-value .cbi-value-field input { + .node-system-packages > .main .cbi-value .cbi-value-field input { width: 100%; } + + .node-status-iptables > .main div > .cbi-map > form { + position: static !important; + margin: 0 0 2rem 0; + padding: 2rem; + border: 0; + font-weight: normal; + font-style: normal; + line-height: 1; + font-family: inherit; + min-width: inherit; + overflow-x: auto; + overflow-y: hidden; + border-radius: 0; + background-color: #FFF; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); + -webkit-overflow-scrolling: touch; + } + + .node-status-iptables > .main div > .cbi-map > form input[type="submit"]{ + width: 100% !important; + margin: 0; + } + + .node-status-iptables > .main div > .cbi-map > form input[type="submit"] + input[type="submit"]{ + margin-top: 1rem; + } } @media screen and (min-width: 992px) { diff --git a/themes/luci-theme-material/htdocs/luci-static/material/js/script.js b/themes/luci-theme-material/htdocs/luci-static/material/js/script.js index a0f067595b..d402728e55 100755 --- a/themes/luci-theme-material/htdocs/luci-static/material/js/script.js +++ b/themes/luci-theme-material/htdocs/luci-static/material/js/script.js @@ -18,109 +18,6 @@ * Licensed to the public under the Apache License 2.0 */ (function ($) { - var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/", - a256 = '', - r64 = [256], - r256 = [256], - i = 0; - var UTF8 = { - /** - * Encode multi-byte Unicode string into utf-8 multiple single-byte characters - * (BMP / basic multilingual plane only) - * - * Chars in range U+0080 - U+07FF are encoded in 2 chars, U+0800 - U+FFFF in 3 chars - * - * @param {String} strUni Unicode string to be encoded as UTF-8 - * @returns {String} encoded string - */ - encode: function (strUni) { - // use regular expressions & String.replace callback function for better efficiency - // than procedural approaches - var strUtf = strUni.replace(/[\u0080-\u07ff]/g, // U+0080 - U+07FF => 2 bytes 110yyyyy, 10zzzzzz - function (c) { - var cc = c.charCodeAt(0); - return String.fromCharCode(0xc0 | cc >> 6, 0x80 | cc & 0x3f); - }) - .replace(/[\u0800-\uffff]/g, // U+0800 - U+FFFF => 3 bytes 1110xxxx, 10yyyyyy, 10zzzzzz - function (c) { - var cc = c.charCodeAt(0); - return String.fromCharCode(0xe0 | cc >> 12, 0x80 | cc >> 6 & 0x3F, 0x80 | cc & 0x3f); - }); - return strUtf; - }, - /** - * Decode utf-8 encoded string back into multi-byte Unicode characters - * - * @param {String} strUtf UTF-8 string to be decoded back to Unicode - * @returns {String} decoded string - */ - decode: function (strUtf) { - // note: decode 3-byte chars first as decoded 2-byte strings could appear to be 3-byte char! - var strUni = strUtf.replace(/[\u00e0-\u00ef][\u0080-\u00bf][\u0080-\u00bf]/g, // 3-byte chars - function (c) { // (note parentheses for precence) - var cc = ((c.charCodeAt(0) & 0x0f) << 12) | ((c.charCodeAt(1) & 0x3f) << 6) | (c.charCodeAt(2) & 0x3f); - return String.fromCharCode(cc); - }) - .replace(/[\u00c0-\u00df][\u0080-\u00bf]/g, // 2-byte chars - function (c) { // (note parentheses for precence) - var cc = (c.charCodeAt(0) & 0x1f) << 6 | c.charCodeAt(1) & 0x3f; - return String.fromCharCode(cc); - }); - return strUni; - } - }; - while (i < 256) { - var c = String.fromCharCode(i); - a256 += c; - r256[i] = i; - r64[i] = b64.indexOf(c); - ++i; - } - function code(s, discard, alpha, beta, w1, w2) { - s = String(s); - var buffer = 0, - i = 0, - length = s.length, - result = '', - bitsInBuffer = 0; - while (i < length) { - var c = s.charCodeAt(i); - c = c < 256 ? alpha[c] : -1; - buffer = (buffer << w1) + c; - bitsInBuffer += w1; - while (bitsInBuffer >= w2) { - bitsInBuffer -= w2; - var tmp = buffer >> bitsInBuffer; - result += beta.charAt(tmp); - buffer ^= tmp << bitsInBuffer; - } - ++i; - } - if (!discard && bitsInBuffer > 0) result += beta.charAt(buffer << (w2 - bitsInBuffer)); - return result; - } - - var Plugin = $.base64 = function (dir, input, encode) { - return input ? Plugin[dir](input, encode) : dir ? null : this; - }; - Plugin.btoa = Plugin.encode = function (plain, utf8encode) { - plain = Plugin.raw === false || Plugin.utf8encode || utf8encode ? UTF8.encode(plain) : plain; - plain = code(plain, false, r256, b64, 8, 6); - return plain + '===='.slice((plain.length % 4) || 4); - }; - Plugin.atob = Plugin.decode = function (coded, utf8decode) { - coded = String(coded).split('='); - var i = coded.length; - do { - --i; - coded[i] = code(coded[i], true, r64, a256, 6, 8); - } while (i > 0); - coded = coded.join(''); - return Plugin.raw === false || Plugin.utf8decode || utf8decode ? UTF8.decode(coded) : coded; - }; -}(jQuery)); - -(function ($) { $(".main > .loading").fadeOut(); /** @@ -133,42 +30,33 @@ } - var tree = undefined; var lastNode = undefined; var mainNodeName = undefined; + var nodeUrl = ""; + (function(node){ + if (node[0] == "admin"){ + luciLocation = [node[1], node[2]]; + }else{ + luciLocation = node; + } + + for(var i in luciLocation){ + nodeUrl += luciLocation[i]; + if (i != luciLocation.length - 1){ + nodeUrl += "/"; + } + } + })(luciLocation); + /** * get the current node by Burl (primary) * @returns {boolean} success? */ function getCurrentNodeByUrl() { var ret = false; - var getUrlNode = function (href){ - var linkPos = href.indexOf(";"); - if (linkPos == -1){ - return "login"; - }else{ - linkPos = href.indexOf("/", linkPos); - if (linkPos == -1){ - return "overview"; - }else{ - var link = href.substr(linkPos); - if (link == "/") - return "overview"; - else - return link; - } - } - }; - - var currentNode = getUrlNode(window.location.pathname); - - if (currentNode == "login"){ - tree = ["Main", "Login"]; - return false; - }else if(currentNode == "overview"){ - tree = ["Status", "Overview"]; - lastNode = $($($(".main > .main-left > .nav > .slide > .menu")[0]).next().find("a")[0]).parent(); + if (!$('body').hasClass('logged-in')) { + luciLocation = ["Main", "Login"]; return false; } @@ -178,11 +66,10 @@ var that = $(this); var href = that.attr("href"); - if (currentNode.indexOf(getUrlNode(href)) != -1){ + if (href.indexOf(nodeUrl) != -1) { ulNode.click(); - ulNode.next(".slide-menu").stop(true,true); + ulNode.next(".slide-menu").stop(true, true); lastNode = that.parent(); - tree = [trimText(ulNode.data("title")), trimText(that.data("title"))]; lastNode.addClass("active"); ret = true; return true; @@ -234,18 +121,10 @@ /** * get current node and open it */ - if (!getCurrentNodeByUrl()){ - if (tree != undefined && tree[0] == "Status" && tree[1] == "Overview"){ - //overview - lastNode.addClass("active"); - $($(".main > .main-left > .nav > .slide > .menu")[0]).click(); - } - } - if (tree != undefined){ - mainNodeName = "node-"+ tree[0] + "-" + tree[1]; - mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g,"_").toLowerCase(); + if (getCurrentNodeByUrl()) { + mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1]; + mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase(); $("body").addClass(mainNodeName); - } $(".cbi-button-up").val(""); $(".cbi-button-down").val(""); @@ -257,10 +136,10 @@ $("#maincontent > .container").find("a").each(function () { var that = $(this); var onclick = that.attr("onclick"); - if (onclick == undefined || onclick == ""){ + if (onclick == undefined || onclick == "") { that.click(function () { var href = that.attr("href"); - if (href.indexOf("#") == -1){ + if (href.indexOf("#") == -1) { $(".main > .loading").fadeIn("fast"); return true; } @@ -273,33 +152,36 @@ */ var showSide = false; $(".showSide").click(function () { - if (showSide){ + if (showSide) { $(".darkMask").stop(true).fadeOut("fast"); $(".main-left").stop(true).animate({ width: "0" - },"fast"); + }, "fast"); + $(".main-right").css("overflow-y", "auto"); showSide = false; - }else{ + } else { $(".darkMask").stop(true).fadeIn("fast"); $(".main-left").stop(true).animate({ width: "15rem" - },"fast"); + }, "fast"); + $(".main-right").css("overflow-y", "hidden"); showSide = true; } }); $(".darkMask").click(function () { - if (showSide){ + if (showSide) { showSide = false; $(".darkMask").stop(true).fadeOut("fast"); $(".main-left").stop(true).animate({ width: "0" - },"fast"); + }, "fast"); + $(".main-right").css("overflow-y", "auto"); } }); - $(window).resize(function() { + $(window).resize(function () { if ($(window).width() > 921) { $(".main-left").css("width", ""); $(".darkMask").stop(true); @@ -321,9 +203,9 @@ $(".main-right").blur(); $("input").attr("size", "0"); - if (mainNodeName != undefined){ + if (mainNodeName != undefined) { console.log(mainNodeName); - switch (mainNodeName){ + switch (mainNodeName) { case "node-status-system_log": case "node-status-kernel_log": $("#syslog").focus(function () { @@ -343,12 +225,4 @@ } } - - document.addEventListener("touchmove", function(evt){ - evt.preventDefault(); - }, false); - var container = document.getElementById("maincontent"); - container.addEventListener("touchmove", function(evt){ - evt.stopPropagation(); - }, false); })(jQuery); |