From fea55f75c75859856cc607fe619449a8c549f180 Mon Sep 17 00:00:00 2001 From: Lutty Yang Date: Sat, 19 Sep 2015 17:22:54 +0800 Subject: [PATCH] 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 --- .../htdocs/luci-static/material/css/style.css | 208 ++++++++++++------ .../luci-static/material/fonts/font.eot | Bin 1744 -> 1912 bytes .../luci-static/material/fonts/font.svg | 1 + .../luci-static/material/fonts/font.ttf | Bin 1580 -> 1748 bytes .../luci-static/material/fonts/font.woff | Bin 1656 -> 1824 bytes .../htdocs/luci-static/material/js/script.js | 76 +++---- .../luasrc/view/themes/material/footer.htm | 18 +- .../luasrc/view/themes/material/header.htm | 3 +- 8 files changed, 191 insertions(+), 115 deletions(-) mode change 100755 => 100644 themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot mode change 100755 => 100644 themes/luci-theme-material/htdocs/luci-static/material/fonts/font.svg mode change 100755 => 100644 themes/luci-theme-material/htdocs/luci-static/material/fonts/font.ttf mode change 100755 => 100644 themes/luci-theme-material/htdocs/luci-static/material/fonts/font.woff 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 old mode 100755 new mode 100644 index ae254576665760e30c1f89b1e4b64cb026743d98..9e6ffc9b826cb39a58e56359d6b8b922a4b07364 GIT binary patch delta 525 zcmcb>`-6|Qf}Mfk%0yOkmiiJkO?<}uA@cv< z|NlYifnr=JVvPSE%l?x6AzLQJ%D(}qkCB04vka3ZV?7fC!~X*;49o`@q!>(rmMZZv zvD+~l8_6+=iijB-nVFjCF)0fg*)f^(F)J(SF`1gEDJ!vwipVh;GcjcD=n7(HaxR=2 z8aAWQ(LzJRBA|PB7IsnQ1AZObGNR{~xwus=j@7WR(8$`|9U%UP0h=(x=3r(`MitLj zMf>CVZN4&avw(edN$CbCwiqBZ#NCq@u*ir2rGY*|0bG+Wuqd#A^iBT2BF4jThcO4p N2C3rO%*T3&5deICiEjV^ delta 392 zcmeytcY&An0viK^&O}yombLGXE}49gRb*mFa=j=61H&F5PDsv8EV#7cXbuAdqYRLr zlb%>y0Hg(g{0<<^k)BhTrg7jx9gshPfq}^(BQ-IFoh2%ifr0q~P~I#9D8Qb>e2RgA zg#*Y}$;d6Kkj!Jc2IT92_&NE>i41=jj{*4sK)y(BVnqQ1uO34NP#^^;ppciCn>y2r z^EZ&+0<@&9AiubTff*>nz{UfTXJBTYG&zN_+7_f;00=>Hj0_5oxF7L7n)o5||KI=r zfg(VakGPOT82>+({U!TDwv2y0PzU2?6(&o@&0m?-8C8}XeZMxI-{va=Hw#$bCAqGz zAO?(PUd5a@*@0C?gn1Rv9#p_NxqwwcgE%EchUAje?9;KGo^Fo974tele}4dQ$T Prpbxy!kaI%E@cD&iO60{ 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 old mode 100755 new mode 100644 index c2b360aee..d38d057da --- 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 @@ + \ 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 old mode 100755 new mode 100644 index 793f68a287f779ba05e1537cd2914c8b4bbfee9f..84669323e9ddfdca80c91416b6d4fe31ea1829ab GIT binary patch delta 545 zcmZ3(bA`8_fsuiMft#U$ftkU;KUm+0Ux-%~D6$8L6OwZi3vMr1G>w6QQ3l8_Nlz>; z0MY_L{sbV+k)BhT<}M@h8OWc(z`%4PBQ-IFJ^9OV1_l<8ITgkLenae+J0c$jMK3Ok~PnYyt{=0SbuaCRP+M@G)dCFtG9f`3iZ7xv4X~IDZ5A zIzUU>3i69ffDQ!$wk;re24?0(6Ax57M*ulOKzA`SFaiCe@QC{n-=m4om_J1R|NH+x zNI6i93q_3a|6|!-vOi?Yq*(bk0QE6W7Gx9N+{viHSkJ`3@c#e{1M>j}DF#!Ztx9}M z>~_q?MsiG|B4WlyW~L^3Ov-{rc1-4c%*sl7Or|Dk%1UgaB63W|ObnSjx`LRQoC~Lh zhRrB+w9wG72K)+G_rPg2Z;Y+z$VPFc|DURql)LN zqW$swHeVUIS-}3fq;vxmT?`N!;_k_Rm}NwO(x8|{23(VMSQOMi`k3>e;#>?O3~~$x Z3@!{w3=qNE952Srq1-@{0-!{ z04-@N$S*DdIur=lctG+D%*>M}9;mhjX%+xNkQ5_>!XxfSe2*r6i2VQe|9_weP~jsk zBoW5{k7a+!{*W!>Uk}v5xVeGRl5uk&vpS>7lB4g}#`D{JW#DE3>$@b^^%cZ`(afuu w^Cr(>kr82D1+)hha85qMqA>Xbi02B~dX8-^I 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 old mode 100755 new mode 100644 index 61a1184ac113cb8a874e65713c58d0bfe8af64c8..00cf84ea037c9748eba8fced0acff7dd29c12b2f GIT binary patch delta 597 zcmeytvw%;e+~3WOfsp|S*cBMKK{VTy$%$;@6SYO^Rg-fQ3m6y}Gk~HcAbfklqG{=g z#UQaeKt2Z)3#8{%rUAvCFfcIP0AY6-k>( z$V<#k1&RR;U~B{7nO>Z~3-XJBj%5cbfvRH$vY43{P3B>&wg>4JVh~_pW?%yPTHz7* zBfduypD}-k{Qvj=e~=cS7#E5dULDV-gh+Gd40aHPK^I7BsSBGUsDfR?=fKHBnPmViOgSV=`u9 z$lTEt#LVPeI5jkEMxmpHhK5Bz_wFq0qRa>UI<{p*&o6Uvt6ChZVPT<>wYxh&{0{>* zVTR4WnKT(yJYN;%1%goe0#vImQd2vC|4tO7xBO|D>3FaYUe t&V!0_F^Dk8F&HqoFeEWdV7SAW0~7~o<6=ky1|$eD0h5gI=F2Qg83Fd=jmrQ4 delta 413 zcmZ3$_k%~I+~3WOfsp|S*eV#f!L-gq5$$@>420QPqCzu(fjjr zW#pDr0L6e9A|{!~bS)=88K};WWe!kK1dRVM9?MOv09wql0mxSXV_t@gyu{p8px6bV zHeVUIS-|=($#s1N zF<> .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("" + that.text() + ""); }); + + + $(".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); 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 596615213..5cb74ce1e 100755 --- a/themes/luci-theme-material/luasrc/view/themes/material/footer.htm +++ b/themes/luci-theme-material/luasrc/view/themes/material/footer.htm @@ -26,16 +26,18 @@ local tree = disp.node() local categories = disp.node_childs(tree) %> + + 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 494cfe39e..f96653a9c 100755 --- a/themes/luci-theme-material/luasrc/view/themes/material/header.htm +++ b/themes/luci-theme-material/luasrc/view/themes/material/header.htm @@ -109,7 +109,7 @@ <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI - + @@ -166,6 +166,7 @@
+
Loading...
    <%- -- 2.25.1