diff options
author | Lutty Yang <lutty@wcan.in> | 2015-09-19 17:22:54 +0800 |
---|---|---|
committer | Lutty Yang <lutty@wcan.in> | 2015-09-19 17:22:54 +0800 |
commit | fea55f75c75859856cc607fe619449a8c549f180 (patch) | |
tree | 980678602af01cc478d9c6266b487b3ce7df25d4 /themes/luci-theme-material/htdocs | |
parent | cf0623f4f527bd315f164bb51b949e88e00e93d7 (diff) |
luci-theme-material: add some new features and fix some bugs
add footer and loading animation and auto focus switches
compact Fonts
Signed-off-by: Lutty Yang <lutty@wcan.in>
Diffstat (limited to 'themes/luci-theme-material/htdocs')
-rwxr-xr-x | themes/luci-theme-material/htdocs/luci-static/material/css/style.css | 208 | ||||
-rw-r--r--[-rwxr-xr-x] | themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot | bin | 1744 -> 1912 bytes | |||
-rw-r--r--[-rwxr-xr-x] | themes/luci-theme-material/htdocs/luci-static/material/fonts/font.svg | 1 | ||||
-rw-r--r--[-rwxr-xr-x] | themes/luci-theme-material/htdocs/luci-static/material/fonts/font.ttf | bin | 1580 -> 1748 bytes | |||
-rw-r--r--[-rwxr-xr-x] | themes/luci-theme-material/htdocs/luci-static/material/fonts/font.woff | bin | 1656 -> 1824 bytes | |||
-rwxr-xr-x | themes/luci-theme-material/htdocs/luci-static/material/js/script.js | 76 |
6 files changed, 179 insertions, 106 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 3f80ccd31..058d3edcf 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 @@ -36,7 +36,7 @@ .cbi-button-down, .cbi-value-helpicon, .showSide, -[class^="icon-"], [class*=" icon-"] { +.main > .loading > span { font-family: 'icomoon' !important; speak: none; font-style: normal !important; @@ -52,8 +52,6 @@ * { margin: 0; padding: 0; - font-size: 1rem; - font-size: 100%; box-sizing: border-box; } @@ -93,7 +91,7 @@ abbr { cursor: help; } -header, footer, .main { +header, .main { width: 100%; position: absolute; } @@ -107,11 +105,72 @@ header { z-index: 101; } +footer{ + text-align: right; + padding: 1rem; + color: #aaa; + font-size: 0.8rem; + text-shadow: 0px 0px 2px #BBB; +} + +footer > a{ + color: #aaa; + text-decoration: none; +} + .main { top: 4rem; bottom: 0rem; } +.main > .loading{ + position: fixed; + width: 100%; + height: 100%; + z-index: 1000; + display: block; + background-color: rgb(240, 240, 240); +} + +.main > .loading > span{ + display: block; + text-align: center; + margin-top: 2rem; + color: #888; + font-size: 1.3rem; +} + +.main > .loading > span:before{ + content: "\e603"; + -webkit-animation: anim-rotate 2s infinite linear; + animation: anim-rotate 2s infinite linear; + margin-right: 0.2rem; +} + +@-webkit-keyframes anim-rotate { + 0% { + -webkit-transform:rotate(0); + transform:rotate(0); + } + 100% { + -webkit-transform:rotate(360deg); + transform:rotate(360deg); + } +} + +@keyframes anim-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) + } +} + .main-left { float: left; width: 15%; @@ -168,7 +227,6 @@ header > .container > .brand { border: 0; font-weight: normal; font-style: normal; - font-size: 100%; line-height: 1; font-family: inherit; min-width: inherit; @@ -178,14 +236,13 @@ header > .container > .brand { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); } -.errorbox{ +.errorbox { color: #fff; background-color: #f0ad4e; border-color: #eea236; } #maincontent > .container > div:nth-child(1).alert-message.warning > a { - box-sizing: border-box; font: inherit; overflow: visible; text-transform: none; @@ -288,7 +345,7 @@ li { } #maincontent > .container { - margin: 0 2rem 3rem 2rem; + margin: 0 2rem 1rem 2rem; } h1 { @@ -320,7 +377,6 @@ fieldset { border: 0; font-weight: normal; font-style: normal; - font-size: 100%; line-height: 1; font-family: inherit; @@ -380,13 +436,6 @@ fieldset > table > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9; } -footer { - position: fixed; - z-index: 1000; - bottom: 0; - left: 0; -} - /* fix progress bar */ #memfree > div, #membuff > div, @@ -425,7 +474,6 @@ td > table > tbody > tr > td { /* button style */ .cbi-button { - box-sizing: border-box; font: inherit; overflow: visible; text-transform: none; @@ -632,7 +680,6 @@ td > table > tbody > tr > td { /* input */ .cbi-value input[type="password"], .cbi-value input[type="text"] { - box-sizing: border-box; padding: 0.36rem 1rem; color: #555; min-width: 15rem; @@ -644,7 +691,6 @@ td > table > tbody > tr > td { .cbi-value-field input[type="password"], .cbi-value-field input[type="text"] { - box-sizing: border-box; padding: 0.36rem 1rem; color: #555; background-color: #fff; @@ -681,7 +727,6 @@ td > table > tbody > tr > td { /*textarea*/ .cbi-input-textarea { - box-sizing: border-box; width: 100%; min-height: 16rem; padding: 1rem; @@ -863,7 +908,7 @@ input[name="nslookup"] { width: 80%; } -header > .container > .pull-right > *{ +header > .container > .pull-right > * { position: relative; top: 0.45rem; cursor: pointer; @@ -876,7 +921,6 @@ header > .container > .pull-right > *{ .label { padding: 0.3rem 0.8rem; font-size: 1rem; - box-sizing: border-box; font-weight: bold; color: #ffffff !important; text-transform: uppercase; @@ -889,7 +933,7 @@ header > .container > .pull-right > *{ text-decoration: none; } -.notice{ +.notice { background-color: #5BC0DE; } @@ -947,6 +991,19 @@ header > .container > .pull-right > *{ float: right; } +.node-main-login footer{ + bottom: 0; + position: absolute; + width: 100%; +} + +/* fix status overview */ + +.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) { @@ -958,7 +1015,6 @@ header > .container > .pull-right > *{ } .node-status-firewall > .main fieldset li > a { - box-sizing: border-box; font: inherit; overflow: visible; text-transform: none; @@ -997,7 +1053,6 @@ header > .container > .pull-right > *{ .node-system-reboot > .main > .main-right p > a { margin-top: 2rem; text-decoration: none; - box-sizing: border-box; font: inherit; overflow: visible; text-transform: none; @@ -1049,12 +1104,16 @@ header > .container > .pull-right > *{ padding: 0.5rem 1rem; } -.node-system-software > .main .cbi-value > pre{ +.node-system-software > .main .cbi-value > pre { background-color: #eee; padding: 0.5rem; overflow: auto; } +.cbi-tabmenu + .cbi-section { + margin-top: 0; +} + .node-status-firewall fieldset, .node-system-software fieldset, .node-system-backup_flash_firmware fieldset { @@ -1069,7 +1128,7 @@ header > .container > .pull-right > *{ } /* language fix */ -body.lang_pl.node-main-login .cbi-value-title{ +body.lang_pl.node-main-login .cbi-value-title { width: 12rem; } @@ -1104,22 +1163,61 @@ body.lang_pl.node-main-login .cbi-value-title{ padding: 1rem; } - .cbi-input-textarea{ + .cbi-input-textarea { font-size: smaller; } + + .node-status-firewall > .main fieldset li > a { + padding: 0.3rem 0.6rem; + } } @media screen and (max-width: 1280px) { + header { + height: 3.5rem; + } + + header > .container { + margin-top: 0.25rem; + } + + .main { + top: 3.5rem; + } + + .main-left { + width: calc(0% + 13rem); + } + + .main-right { + width: calc(100% - 13rem); + } + .cbi-tabmenu > li > a, .tabs > li > a { padding: 0.2rem 0.5rem; } -} -@media screen and (max-width: 992px) { - * { - font-size: 100%; + .panel-title { + font-size: 1.3rem; + padding-bottom: 1rem; + } + + table { + font-size: 0.8rem !important; } + .main > .main-left > .nav > li, + .main > .main-left > .nav > li a, + .main > .main-left > .nav > .slide > .menu { + font-size: 1.1rem; + } + + .main > .main-left > .nav > .slide > .slide-menu > li > a { + font-size: 0.9rem; + } +} + +@media screen and (max-width: 992px) { .main-left { width: 0; position: fixed; @@ -1150,43 +1248,37 @@ body.lang_pl.node-main-login .cbi-value-title{ padding-right: 1rem; } - - .node-network-diagnostics > .main .cbi-map fieldset > div *{ + .node-network-diagnostics > .main .cbi-map fieldset > div * { width: 100% !important; } - .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"]{ + .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"] { margin: 3rem 0 0 0 !important; } - .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"]{ + .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"] { margin: 0 !important; } .node-network-diagnostics > .main .cbi-map fieldset > div select, - .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"]{ + .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"] { margin: 1rem 0 0 0; } - .node-network-diagnostics > .main .cbi-map fieldset > div{ + .node-network-diagnostics > .main .cbi-map fieldset > div { width: 100% !important; } - #diag-rc-output > pre { font-size: 1.2rem; } - .node-main-login > .main .cbi-value-title{ + .node-main-login > .main .cbi-value-title { text-align: left; } } @media screen and (max-width: 480px) { - * { - font-size: 90%; - } - fieldset { padding: 1rem; margin: 1rem 0 0 0; @@ -1219,7 +1311,6 @@ body.lang_pl.node-main-login .cbi-value-title{ .cbi-value-field, .cbi-value-description { width: 100%; - box-sizing: border-box; } .cbi-value > .cbi-value-field { @@ -1231,7 +1322,8 @@ body.lang_pl.node-main-login .cbi-value-title{ } .cbi-tabmenu > li > a, .tabs > li > a { - padding: 0.2rem 0.7rem; + padding: 0.2rem 0.3rem; + font-size: 0.9rem; } .cbi-page-actions > div > input { @@ -1265,40 +1357,28 @@ body.lang_pl.node-main-login .cbi-value-title{ } .tabs > li > a { - font-size: 1.2rem; - } - - header { - height: 3.5rem; - } - - header > .container { - margin-top: 0.25rem; - } - - .main { - top: 3.5rem; + font-size: 0.9rem; } select, input { - font-size: 1.2rem; + font-size: 0.9rem; } - .mobile-hide{ + .mobile-hide { display: none; } - .panel-title{ + .panel-title { font-size: 1.4rem; padding-bottom: 1rem; } - .node-system-software > .main .cbi-value.cbi-value-last > div{ + .node-system-software > .main .cbi-value.cbi-value-last > div { width: 100% !important; } - .node-system-software > .main .cbi-value .cbi-value-field input{ + .node-system-software > .main .cbi-value .cbi-value-field input { width: 100%; } } diff --git a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot b/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot Binary files differindex ae2545766..9e6ffc9b8 100755..100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot +++ b/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot diff --git a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.svg b/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.svg index c2b360aee..d38d057da 100755..100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.svg +++ b/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.svg @@ -11,5 +11,6 @@ <glyph unicode="" glyph-name="expand_more" d="M708 572.667l60-60-256-256-256 256 60 60 196-196z" /> <glyph unicode="" glyph-name="menu" d="M128 682.667h768v-86h-768v86zM128 384.667v84h768v-84h-768zM128 170.667v86h768v-86h-768z" /> <glyph unicode="" glyph-name="favorite" d="M512 28.667l-62 56q-106 96-154 142t-107 114-81 123-22 113q0 98 67 166t167 68q116 0 192-90 76 90 192 90 100 0 167-68t67-166q0-78-52-162t-113-146-199-186z" /> +<glyph unicode="" glyph-name="spinner9" d="M512 960c-278.748 0-505.458-222.762-511.848-499.974 5.92 241.864 189.832 435.974 415.848 435.974 229.75 0 416-200.576 416-448 0-53.020 42.98-96 96-96s96 42.98 96 96c0 282.77-229.23 512-512 512zM512-64c278.748 0 505.458 222.762 511.848 499.974-5.92-241.864-189.832-435.974-415.848-435.974-229.75 0-416 200.576-416 448 0 53.020-42.98 96-96 96s-96-42.98-96-96c0-282.77 229.23-512 512-512z" /> <glyph unicode="" glyph-name="question-circle" horiz-adv-x="878" d="M512 164.571v109.714q0 8-5.143 13.143t-13.143 5.143h-109.714q-8 0-13.143-5.143t-5.143-13.143v-109.714q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143zM658.286 548.571q0 50.286-31.714 93.143t-79.143 66.286-97.143 23.429q-138.857 0-212-121.714-8.571-13.714 4.571-24l75.429-57.143q4-3.429 10.857-3.429 9.143 0 14.286 6.857 30.286 38.857 49.143 52.571 19.429 13.714 49.143 13.714 27.429 0 48.857-14.857t21.429-33.714q0-21.714-11.429-34.857t-38.857-25.714q-36-16-66-49.429t-30-71.714v-20.571q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143q0 10.857 12.286 28.286t31.143 28.286q18.286 10.286 28 16.286t26.286 20 25.429 27.429 16 34.571 7.143 46.286zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" /> </font></defs></svg>
\ No newline at end of file diff --git a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.ttf b/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.ttf Binary files differindex 793f68a28..84669323e 100755..100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.ttf +++ b/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.ttf diff --git a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.woff b/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.woff Binary files differindex 61a1184ac..00cf84ea0 100755..100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.woff +++ b/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.woff 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 c7d60b9e3..dcf8a03d4 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 @@ -121,6 +121,8 @@ }(jQuery)); (function ($) { + $(".main > .loading").fadeOut(); + /** * trim text, Remove spaces, wrap * @param text @@ -133,35 +135,7 @@ var tree = undefined; var lastNode = undefined; - - /** - * get the current node by Hash (reserve) - * @returns {boolean} success? - */ - function getCurrentNodeByHash() { - var ret = false; - var hash = window.location.hash; - if (hash.substr(0, 6) == "#tree-") { - hash = $.base64.decode(hash.substr(6)); - tree = hash.split("|"); - $(".main > .main-left > .nav > .slide > .menu").each(function () { - var that = $(this); - if (trimText(that.data("title")) == tree[0]) { - that.click(); - that.next().find("a").each(function () { - var that = $(this); - if (trimText(that.data("title")) == tree[1]) { - lastNode = that.parent(); - lastNode.addClass("active"); - ret = true; - return true; - } - }); - } - }); - } - return ret; - } + var mainNodeName = undefined; /** * get the current node by Burl (primary) @@ -239,27 +213,27 @@ * hook menu click and add the hash */ $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () { - var href = $(this).attr("href"); - var tree = trimText($(this).parent().parent().prev().data("title")) + "|" + trimText($(this).data("title")); - tree = $.base64.encode(tree); - window.location = href + "#tree-" + tree; if (lastNode != undefined) lastNode.removeClass("active"); $(this).parent().addClass("active"); - return false; + $(".main > .loading").fadeIn(); + return true; }); /** * fix menu click */ $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () { - $(this).find("a").click(); + if (lastNode != undefined) lastNode.removeClass("active"); + $(this).addClass("active"); + $(".main > .loading").fadeIn(); + window.location = $($(this).find("a")[0]).attr("href"); + return; }); /** * get current node and open it */ if (!getCurrentNodeByUrl()){ - getCurrentNodeByHash(); if (tree != undefined && tree[0] == "Status" && tree[1] == "Overview"){ //overview lastNode.addClass("active"); @@ -267,8 +241,10 @@ } } if (tree != undefined){ - var mainNodeName = "node-"+ tree[0] + "-" + tree[1]; - $("body").addClass(mainNodeName.replace(/[ \t\n\r\/]+/g,"_").toLowerCase()); + mainNodeName = "node-"+ tree[0] + "-" + tree[1]; + mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g,"_").toLowerCase(); + $("body").addClass(mainNodeName); + } $(".cbi-button-up").val(""); $(".cbi-button-down").val(""); @@ -283,10 +259,8 @@ if (onclick == undefined || onclick == ""){ that.click(function () { var href = that.attr("href"); - if (tree != undefined && href.indexOf("Text") == -1) { - window.location = href + "#tree-" + $.base64.encode(tree[0] + "|" + tree[1]); - return false; - }else{ + if (href.indexOf("#") == -1){ + $(".main > .loading").fadeIn(); return true; } }); @@ -340,4 +314,22 @@ var that = $(this); that.after("<span class='panel-title'>" + that.text() + "</span>"); }); + + + $(".main-right").focus(); + $(".main-right").blur(); + + if (mainNodeName != undefined){ + console.log(mainNodeName); + switch (mainNodeName){ + case "node-status-system_log": + case "node-status-kernel_log": + $("#syslog").focus(function () { + $("#syslog").blur(); + $(".main-right").focus(); + $(".main-right").blur(); + }); + break; + } + } })(jQuery); |