diff options
11 files changed, 604 insertions, 588 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 db5304b430..2a88ef3750 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css @@ -15,6 +15,9 @@ * MUI: * https://github.com/muicss/mui * + * Menu and loading spinner icons from IcoMoon: + * https://icomoon.io + * * Pure CSS ripple effect: * https://github.com/mladenplavsic/css-ripple-effect * @@ -26,20 +29,6 @@ */ @import url("custom.css"); -/* - * Font generate by Icomoon<icomoon.io> - */ -@font-face { - font-family: "icomoon"; - font-weight: normal; - font-style: normal; - src: url("fonts/font.eot"); - src: url("fonts/font.eot") format("embedded-opentype"), - url("fonts/font.ttf") format("truetype"), - url("fonts/font.woff") format("woff"), - url("fonts/font.svg") format("svg"); -} - .table { position: relative; display: table; @@ -143,20 +132,6 @@ flex: 10 10 300px !important; } -.cbi-button-up, -.cbi-button-down, -.cbi-value-helpicon, -.showSide { - font-family: "icomoon" !important; - font-weight: normal; - font-style: normal; - font-variant: normal; - line-height: 1; - text-transform: none; - -webkit-font-smoothing: antialiased; - speak: none; -} - * { box-sizing: border-box; margin: 0; @@ -229,12 +204,12 @@ input, select, .cbi-dropdown { width: inherit; + cursor: default; } select:not([multiple="multiple"]):focus, input:not(.cbi-button):focus, -.cbi-dropdown:focus, -.cbi-dynlist > .item:focus { +.cbi-dropdown:focus { border-color: #09c; border-color: var(--main-color); } @@ -298,6 +273,12 @@ footer > a { color: #aaa; } +small { + font-size: 90%; + line-height: 1.42857143; + white-space: normal; +} + .main { position: relative; top: 4rem; @@ -320,7 +301,7 @@ footer > a { .main > .loading > span { font-family: monospace; - font-size: 2.0rem; + font-size: 2rem; font-size-adjust: .35; position: relative; top: 12.5%; @@ -329,17 +310,16 @@ footer > a { color: #888; } -.main > .loading > span > .loading-img:before { - content: "\e603"; -} - .main > .loading > span > .loading-img { - font-family: "icomoon" !important; - font-size: 1.0rem; - font-size-adjust: .6; + position: relative; + top: .1rem; + left: .05rem; display: inline-block; + width: 1.25rem; + height: 1.25rem; margin-right: 1rem; animation: anim-rotate 2s infinite linear; + background: url(./icons/spinner.svg) no-repeat center; } @keyframes anim-rotate { @@ -406,6 +386,9 @@ header { header > .fill > .container { margin-top: .5rem; padding: .5rem 1rem 0 1rem; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; } @@ -508,12 +491,17 @@ header > .fill > .container > .status > * { .main > .main-left > .nav > li { padding: .5rem 1rem; cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -.main > .main-left > .nav > li:nth-last-child(1) { - font-size: 1.2rem; - margin-top: 1rem; - margin-bottom: 1rem; +.main > .main-left > .nav > li:last-child { + display: flex; + align-items: center; + margin: 2rem 0 1rem 0; + padding: 0 0 0 2rem; } .main > .main-left > .nav > li a { @@ -530,15 +518,26 @@ header > .fill > .container > .status > * { display: none; } +.main > .main-left > .nav > .slide > .menu, +.main > .main-left > .nav > li > [data-title="Logout"] { + font-size: 1.15rem; + font-weight: 500; + display: flex; + align-items: center; + width: 100%; + padding: .5rem 1rem; + text-decoration: none; + color: #202124; + color: var(--main-menu-color); +} + .main > .main-left > .nav > .slide > .menu::before { position: absolute; - top: 30%; right: 17px; - width: 1rem; - height: 1rem; + width: 16px; + height: 16px; content: ""; - background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDEwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik01MDAsNjI1LjJMNzUuMywyNTVMMTAsMzE0LjlMNTAwLDc0NWw0OTAtNDMwLjFMOTI0LjcsMjU1TDUwMCw2MjUuMnoiLz48L2c+PC9zdmc+); - background-repeat: no-repeat; + background: url(./icons/arrow.svg) no-repeat; } .main > .main-left > .nav > .slide > .menu.active::before { @@ -557,13 +556,12 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before display: none; } -.main > .main-left > .nav > .slide > .menu { - font-size: 1.15rem; - font-weight: 500; - display: block; - padding: .5rem 1rem; - text-decoration: none; - color: var(--menu-color); +.main > .main-left > .nav > li:last-child::before { + position: absolute; + left: 14px; + width: 24px; + height: 24px; + content: url(./icons/logout.svg); } .main > .main-left > .nav > li:hover, @@ -605,21 +603,22 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before } .main > .main-left > .nav > .slide > .slide-menu > .active:hover { - cursor: hand; background-color: #09c; background-color: var(--main-color); } /* ripple effect */ .main > .main-left > .nav > .slide > .menu, -.main > .main-left > .nav > .slide > .slide-menu > li { +.main > .main-left > .nav > .slide > .slide-menu > li, +.main > .main-left > .nav > li:last-child { position: relative; overflow: hidden; transform: translate3d(0, 0, 0); } -.main > .main-left > .nav > .slide > .menu:after, -.main > .main-left > .nav > .slide > .slide-menu > li:after { +.main > .main-left > .nav > .slide > .menu::after, +.main > .main-left > .nav > .slide > .slide-menu > li::after, +.main > .main-left > .nav > li:last-child::after { position: absolute; top: 0; left: 0; @@ -636,8 +635,9 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before background-position: 50%; } -.main > .main-left > .nav > .slide > .menu:active:after, -.main > .main-left > .nav > .slide > .slide-menu > li:active:after { +.main > .main-left > .nav > .slide > .menu:active::after, +.main > .main-left > .nav > .slide > .slide-menu > li:active::after, +.main > .main-left > .nav > li:last-child:active::after { transition: 0s; transform: scale(0, 0); opacity: .2; @@ -647,10 +647,6 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before margin: 0 2rem 1rem 2rem; } -.Processes #maincontent > .container { - margin-right: 0; -} - ul { line-height: normal; } @@ -712,6 +708,14 @@ h5 { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); } +.cbi-map-descr, +.cbi-section-descr { + font-size: small; + line-height: 1.42857143; + padding: .5rem; + color: #999; +} + .cbi-map-descr + fieldset { margin-top: 1rem; } @@ -789,8 +793,6 @@ tr > th, border-top: thin solid #ddd; } -tr:first-child > td -.tr:first-child > .td, #cbi-wireless .td, #cbi-network .tr:first-child > .td, .table[width="100%"] > .tr:first-child > .td, @@ -800,6 +802,10 @@ tr:first-child > td border-top: 0 !important; } +.table[width="100%"] > .tr:first-child > .td { + margin: auto 0; +} + .cbi-section-table-row { margin-bottom: 1rem; text-align: center !important; @@ -810,10 +816,10 @@ tr:first-child > td margin-bottom: 0; } +.cbi-section-table-row > .cbi-value-field .cbi-dropdown, .cbi-section-table-row > .cbi-value-field .cbi-input-select, .cbi-section-table-row > .cbi-value-field .cbi-input-text, -.cbi-section-table-row > .cbi-value-field .cbi-input-password, -.cbi-section-table-row > .cbi-value-field .cbi-dropdown { +.cbi-section-table-row > .cbi-value-field .cbi-input-password { width: 100%; } @@ -833,20 +839,11 @@ div > .table > .tr:nth-of-type(2n) { /* fix multiple table */ table table, -.table .table { - border: 0; -} - +.table .table, .cbi-value-field table, -.cbi-value-field .table { - border: 0; -} - +.cbi-value-field .table, td > table > tbody > tr > td, -.td > .table > .tbody > .tr > .td { - border: 0; -} - +.td > .table > .tbody > .tr > .td, .cbi-value-field > table > tbody > tr > td, .cbi-value-field > .table > .tbody > .tr > .td { border: 0; @@ -881,11 +878,25 @@ td > table > tbody > tr > td, touch-action: manipulation; } +.cbi-button-up, +.cbi-button-down { + font-size: 1.2rem; + display: inline-block; + min-width: 0; + padding: .2rem .3rem; + color: transparent !important; + background: url(./icons/arrow.svg) no-repeat center; + background-size: 12px 20px; +} + +.cbi-button-up { + transform: scaleY(-1); +} + .cbi-button:not(select) { -webkit-appearance: none !important; } -form[method="post"] + form[method="post"], .cbi-button + .cbi-button { margin-left: .6rem; } @@ -909,15 +920,27 @@ form[method="post"] + form[method="post"], .btn:hover, .btn:focus, .cbi-button:hover, -.cbi-button:focus { +.cbi-button:focus, +.item:hover::after, +.item:focus::after { box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .2); } .btn:active, -.cbi-button:active { +.cbi-button:active, +.item:active::after { box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23); } +.cbi-button-up:hover, +.cbi-button-up:focus { + box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 -2px 2px rgba(0, 0, 0, .2); +} + +.cbi-button-up:active { + box-shadow: 0 -10px 20px rgba(0, 0, 0, .19), 0 -6px 6px rgba(0, 0, 0, .23); +} + .btn:disabled, .cbi-button:disabled { cursor: not-allowed; @@ -968,6 +991,7 @@ form[method="post"] + form[method="post"], .cbi-button-reload, .cbi-button-action, .cbi-button[value="Submit"], +.cbi-button[value="Upload"], .cbi-button[value$="Apply"], .cbi-button[onclick="addKey(event)"] { font-weight: normal; @@ -1010,7 +1034,7 @@ form[method="post"] + form[method="post"], .cbi-button-success, .cbi-button-download, .cbi-button[name="backup"], -.cbi-button[value="Upload"], +.cbi-button[value="Download"], .cbi-button[value="Save mtdblock"] { font-weight: normal; color: #fff; @@ -1028,41 +1052,44 @@ form[method="post"] + form[method="post"], .cbi-value-field .cbi-button-add { font-weight: bold; + margin: 9px 0 4px 3px; padding: 1px 6px; } -.cbi-value-field .cbi-button-neutral { - padding: 1px 8px; -} - -/* table */ .tabs { margin: 0 -2rem; padding-left: .5rem; background-color: #fff; } -.cbi-tabmenu > li, -.tabs > li { +.tabs > li, +.cbi-tabmenu > li { display: inline-block; - padding: .6rem 0; + padding: .55rem 0; + cursor: pointer; } -.cbi-tabmenu > li > a, -.tabs > li > a { - padding: .5rem .8rem; - text-decoration: none; - color: #404040; +.tabs > li { + padding-bottom: .4rem; + border-bottom: .2rem solid transparent; } .tabs > li[class~="active"], .tabs > li:hover { - margin-bottom: -.18751rem; + border-bottom-color: #09c; + border-bottom-color: var(--main-color); +} + +.tabs > li:hover { cursor: pointer; - color: #09c; - color: var(--main-color); - border-bottom: #09c; - border-bottom: .2rem solid var(--main-color); + border-bottom-color: #c9c9c9; +} + +.tabs > li > a, +.cbi-tabmenu > li > a { + padding: .6rem .9rem; + text-decoration: none; + color: #404040; } .tabs > li[class~="active"] > a { @@ -1070,10 +1097,6 @@ form[method="post"] + form[method="post"], color: var(--main-color); } -.tabs > li:hover { - border-bottom: .18751rem solid #c9c9c9; -} - .cbi-tabmenu { border: thin solid #d4d4d4; border-bottom: 0; @@ -1097,15 +1120,15 @@ form[method="post"] + form[method="post"], } [data-tab-title] { + overflow: hidden; height: 0; opacity: 0; - overflow: hidden; } [data-tab-active="true"] { - opacity: 1; - height: auto; overflow: visible; + height: auto; + opacity: 1; transition: opacity .25s ease-in; } @@ -1131,41 +1154,9 @@ form[method="post"] + form[method="post"], display: table-cell; } -.cbi-input-invalid { - color: #f00; - border-color: #f00; -} - -.cbi-section-error { - font-weight: bold; - line-height: 1.42857143; - margin: 18px; - padding: 6px; - border: thin solid #f00; - border-radius: 3px; - background-color: #fce6e6; -} - -.cbi-section-error ul { - margin: 0 0 0 20px; -} - -.cbi-section-error ul li { - font-weight: bold; - color: #f00; -} - -.cbi-value-helpicon > img { - display: none; -} - -.cbi-value-helpicon:before { - content: "\f059"; -} - .cbi-value-description { font-size: small; - padding: .5rem 0 0 0; + padding-top: .4rem; opacity: .5; } @@ -1173,7 +1164,7 @@ form[method="post"] + form[method="post"], display: table-cell; float: left; width: 23rem; - padding-top: .4rem; + padding-top: .35rem; padding-right: 2rem; text-align: right; word-wrap: break-word; @@ -1182,13 +1173,53 @@ form[method="post"] + form[method="post"], .cbi-value { display: inline-block; width: 100%; - padding: .3rem 1rem; + padding: .35rem 1rem .2rem 1rem; } .cbi-value ul { line-height: 1.25; } +.cbi-value-field .cbi-dropdown, +.cbi-value-field .cbi-input-select, +.cbi-value input[type="text"], +.cbi-value input[type="password"] { + min-width: 25rem; +} + +#cbi-firewall-zone .cbi-input-select, +#cbi-network-switch_vlan .cbi-input-select { + min-width: 11rem; +} + +#cbi-network-switch_vlan .cbi-input-text { + max-width: 3rem; +} + +.cbi-input-invalid { + color: #f00; + border-bottom-color: #f00; +} + +.cbi-section-error { + font-weight: bold; + line-height: 1.42857143; + margin: 18px; + padding: 6px; + border: thin solid #f00; + border-radius: 3px; + background-color: #fce6e6; +} + +.cbi-section-error ul { + margin: 0 0 0 20px; +} + +.cbi-section-error ul li { + font-weight: bold; + color: #f00; +} + .td[data-title]::before { font-weight: bold; display: none; @@ -1226,7 +1257,7 @@ form[method="post"] + form[method="post"], .cbi-rowstyle-2 .cbi-button-up, .cbi-rowstyle-2 .cbi-button-down, -.cbi-rowstyle-2:first-child { +body:not(.Interfaces) .cbi-rowstyle-2:first-child { background-color: #fff !important; } @@ -1253,30 +1284,23 @@ form[method="post"] + form[method="post"], margin: 0; } -/* desc */ -.cbi-section-descr, -.cbi-map-descr { - font-size: small; - line-height: 1.42857143; - padding: .5rem; - color: #999; -} - +/* lists */ .cbi-dynlist { line-height: 1.3; flex-direction: column; min-height: 30px; + cursor: text; } .cbi-dynlist > .item { position: relative; - max-width: 24.9rem; - margin: 0 2em 4px 0; - padding: 2px 4px; - cursor: default; + max-width: 25rem; + margin-right: 2em; + padding: .5em .25em .25em 0; pointer-events: none; color: #666; border-bottom: 2px solid rgba(0, 0, 0, .26); + outline: 0; } .cbi-dynlist[name="sshkeys"] > .item { @@ -1303,13 +1327,36 @@ form[method="post"] + form[method="post"], word-break: break-word; } +.cbi-dynlist > .add-item { + display: inline-flex; + align-items: center; + width: 100%; + min-width: 16rem; +} + +.cbi-dynlist > .add-item:not([ondrop]) > input { + overflow: hidden; + width: 100%; + min-width: 15rem; + white-space: nowrap; + text-overflow: ellipsis; +} + +.cbi-dynlist > .add-item[ondrop] > input { + min-width: 13rem; +} + .cbi-dynlist, .cbi-dropdown { position: relative; display: inline-flex; - height: auto; padding: 0; - cursor: default; +} + +.cbi-dropdown[placeholder*="select"] { + max-width: 25rem; + height: auto; + margin-top: -3px; } .cbi-dropdown > ul { @@ -1320,6 +1367,7 @@ form[method="post"] + form[method="post"], margin: 0 !important; padding: 0; list-style: none; + outline: 0; } .cbi-dropdown > ul.preview { @@ -1341,7 +1389,9 @@ form[method="post"] + form[method="post"], flex-shrink: 0; justify-content: center; padding: 0 .25em; + cursor: default; text-align: center; + outline: 0; } .cbi-dropdown > .more, @@ -1402,10 +1452,6 @@ form[method="post"] + form[method="post"], height: 20px; } -.cbi-dropdown[open] { - position: relative; -} - .cbi-dropdown[open] > ul.dropdown { position: absolute; z-index: 1100; @@ -1483,6 +1529,43 @@ form[method="post"] + form[method="post"], width: auto; } +/* progressbar */ +.cbi-progressbar { + position: relative; + min-width: 170px; + height: 20px; + margin: 6px 0; + border: thin solid #999; + background: #eee; +} + +.cbi-progressbar > div { + width: 0; + height: 100%; + transition: width .25s ease-in; + background: #5bc0de; + background: var(--bar-bg); +} + +.cbi-progressbar::after { + font-family: monospace; + font-size: 1.3em; + font-weight: bold; + font-size-adjust: .38; + line-height: normal; + position: absolute; + top: 2px; + right: 0; + bottom: 2px; + left: 0; + overflow: hidden; + content: attr(title); + text-align: center; + white-space: pre; + text-overflow: ellipsis; + text-shadow: 0 0 2px #eee; +} + #modal_overlay { position: fixed; z-index: 900; @@ -1525,6 +1608,7 @@ form[method="post"] + form[method="post"], overflow: auto; margin-bottom: .5em; padding: 8.5px; + cursor: auto; white-space: pre-wrap; color: #eee; outline: 0; @@ -1593,7 +1677,7 @@ body.modal-overlay-active #modal_overlay { bottom: 0; left: .2em; width: 32px; - content: " "; + content: ""; background: url(../resources/icons/loading.gif) no-repeat center; background-size: 16px; } @@ -1641,60 +1725,6 @@ body.modal-overlay-active #modal_overlay { display: inline-block; } -/* input */ -.cbi-value input[type="password"], -.cbi-value input[type="text"] { - min-width: 15rem; -} - -/* select */ -.cbi-value-field .cbi-dropdown, -.cbi-value-field .cbi-input-select { - min-width: 15rem; -} - -.cbi-value-field .cbi-input-invalid { - color: #f00; - border-bottom-color: #f00; -} - -/* progressbar */ -.cbi-progressbar { - position: relative; - min-width: 170px; - height: 20px; - margin: 4px 0; - border: thin solid #999; - background: #eee; -} - -.cbi-progressbar > div { - width: 0; - height: 100%; - transition: width .25s ease-in; - background: #5bc0de; - background: var(--bar-bg); -} - -.cbi-progressbar::after { - font-family: monospace; - font-size: 1.3em; - font-weight: bold; - font-size-adjust: .38; - line-height: normal; - position: absolute; - top: 2px; - right: 0; - bottom: 2px; - left: 0; - overflow: hidden; - content: attr(title); - text-align: center; - white-space: pre; - text-overflow: ellipsis; - text-shadow: 0 0 2px #eee; -} - .th[data-type="button"], .td[data-type="button"], .th[data-type="fvalue"], @@ -1773,12 +1803,11 @@ td > .ifacebadge, #syslog { font-size: small; + line-height: 1.25; overflow-y: hidden; width: 100%; min-height: 15rem; - margin-bottom: 20px; padding: 1rem; - padding-bottom: 2.5rem; resize: none; color: #eee; border: 0; @@ -1929,7 +1958,7 @@ td > .ifacebadge, .cbi-value-field .cbi-input-checkbox, .cbi-value-field .cbi-input-radio { - margin-top: .15rem; + margin-top: .1rem; } .cbi-value-field > ul > li { @@ -1971,20 +2000,6 @@ td.cbi-value-field var, color: #0069d6; } -small { - font-size: 90%; - line-height: 1.42857143; - white-space: normal; -} - -.cbi-button-up, -.cbi-button-down { - font-size: 1.2rem; - display: inline-block; - min-width: 0; - padding: .2rem .3rem; -} - .cbi-optionals { padding: 1rem 1rem 0 1rem; border-top: thin solid #ccc; @@ -2060,8 +2075,6 @@ span[data-tooltip] .label { text-decoration: none; text-transform: uppercase; color: #fff !important; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; border-radius: 3px; background-color: #bfbfbf; text-shadow: none; @@ -2092,11 +2105,13 @@ label > input[type="radio"] { /* diagnostics */ #diag-rc-output > pre, -#command-rc-output > pre { +#command-rc-output > pre, +[data-page="admin-services-wol"] .notice code { font-size: 1.2rem; font-size-adjust: .35; line-height: normal; display: block; + overflow-y: hidden; width: 100%; padding: 8.5px; white-space: pre; @@ -2151,7 +2166,7 @@ input[name="nslookup"] { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12); } -.node-main-login > .main form > div:nth-last-child(1) { +.node-main-login > .main form > div:last-child { float: right; } @@ -2164,6 +2179,7 @@ input[name="nslookup"] { } .node-main-login > .main .cbi-input-text { + width: 100% !important; min-width: 15rem; } @@ -2179,20 +2195,12 @@ input[name="nslookup"] { } } -/* fix status overview */ -.node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2) { - white-space: normal; -} - -/* fix status processes */ +/* fix status */ +.node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2), .node-status-processes > .main .table .tr .td:nth-child(3) { white-space: normal; } -.node-admin-status form { - margin: 2rem 2rem 0 0; -} - /* fix system reboot */ [data-page="admin-system-reboot"] p { padding-left: 2rem; @@ -2205,11 +2213,11 @@ input[name="nslookup"] { } /* samba */ -#cbi-samba .cbi-value-last .cbi-value-field { +#cbi-samba [data-tab="template"] .cbi-value-field { display: block; } -#cbi-samba .cbi-value-last .cbi-value-title { +#cbi-samba [data-tab="template"] .cbi-value-title { width: auto; padding-bottom: .6rem; } @@ -2287,6 +2295,7 @@ input[name="nslookup"] { } .Firewall form { + margin: 2rem 2rem 0 0; padding: 0; box-shadow: none; } @@ -2319,7 +2328,8 @@ input[name="nslookup"] { display: block; } -#cbi-firewall-zone .td.cbi-section-actions { +#cbi-firewall-zone .td, +#cbi-network-switch_vlan .td { width: 100%; } @@ -2341,6 +2351,7 @@ input[name="nslookup"] { /* custom commands */ .commandbox { width: 24% !important; + margin: 10px 0 0 10px !important; padding: .5rem 1rem; border-bottom: thin solid #ccc; background: #eee; @@ -2361,16 +2372,20 @@ input[name="nslookup"] { .commandbox code { position: absolute; - overflow-x: hidden; - overflow-y: auto; + overflow: hidden; max-width: 60%; - max-height: 55px; - margin-top: -3px; margin-left: 4px; padding: 2px 3px; + white-space: nowrap; text-overflow: ellipsis; } +.commandbox code:hover { + overflow-y: auto; + max-height: 50px; + white-space: normal; +} + .commandbox p:first-of-type { margin-top: -6px; } @@ -2381,7 +2396,7 @@ input[name="nslookup"] { [data-page^="admin-system-commands"] .panel-title, [data-page^="command-cfg"] .mobile-hide, -[data-page^="command-cfg"] header > .fill > .container > #logo { +[data-page^="command-cfg"] .showSide { display: none; } @@ -2393,6 +2408,7 @@ input[name="nslookup"] { max-width: 40%; margin: 0; animation: anim-fade-in 1.5s forwards; + word-break: break-word; opacity: 0; } @@ -2402,6 +2418,21 @@ input[name="nslookup"] { } } +/* IE hacks */ +@media all and (-ms-high-contrast: none) { + .main > .main-left > .nav > .slide > .menu::before { + top: 30.25%; + } + + .main > .main-left > .nav > li:last-child::before { + top: 20%; + } + + .showSide::before { + top: -12px; + } +} + @media screen and (max-width: 1600px) { header > .fill > .container > #logo { margin: 0 2.5rem 0 .5rem; @@ -2415,10 +2446,6 @@ input[name="nslookup"] { width: calc(100% - 13rem); } - .cbi-dynlist > .item { - max-width: 21.9rem; - } - .btn:not(button), .cbi-button { font-size: .8rem; @@ -2429,14 +2456,25 @@ input[name="nslookup"] { padding: .2rem .6rem; } + fieldset, + .cbi-section { + padding: 1rem; + } + .cbi-value-title { width: 15rem; padding-right: .6rem; } - fieldset, - .cbi-section { - padding: 1rem; + .cbi-value-field .cbi-dropdown, + .cbi-value-field .cbi-input-select, + .cbi-value input[type="text"], + .cbi-value input[type="password"] { + min-width: 22rem; + } + + #cbi-firewall-zone .cbi-input-select { + min-width: 9rem; } .cbi-input-textarea { @@ -2446,10 +2484,6 @@ input[name="nslookup"] { .node-admin-status > .main fieldset li > a { padding: .3rem .6rem; } - - #cbi-firewall-zone > .table { - display: block; - } } @media screen and (max-width: 1366px) { @@ -2477,12 +2511,8 @@ input[name="nslookup"] { width: calc(100% - 13rem); } - .cbi-dynlist > .item { - max-width: 19.9rem; - } - - .cbi-tabmenu > li > a, - .tabs > li > a { + .tabs > li > a, + .cbi-tabmenu > li > a { padding: .2rem .5rem; } @@ -2500,9 +2530,21 @@ input[name="nslookup"] { width: 100%; } + .cbi-value-field .cbi-dropdown, + .cbi-value-field .cbi-input-select, + .cbi-value input[type="text"], + .cbi-value input[type="password"] { + min-width: 19rem; + } + + #cbi-firewall-zone .cbi-input-select { + min-width: 4rem; + } + .main > .main-left > .nav > li, .main > .main-left > .nav > li a, - .main > .main-left > .nav > .slide > .menu { + .main > .main-left > .nav > .slide > .menu, + .main > .main-left > .nav > li > [data-title="Logout"] { font-size: .9rem; } @@ -2520,7 +2562,8 @@ input[name="nslookup"] { [data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table), [data-page="admin-network-firewall-rules"] .table:not(.cbi-section-table), - [data-page="admin-network-hosts"] .table { + [data-page="admin-network-hosts"] .table, + [data-page="admin-network-routes"] .table { overflow-y: visible; } @@ -2538,16 +2581,15 @@ input[name="nslookup"] { position: relative; } - [data-page^="command-cfg"] header > .fill > .container > .brand { - display: block; - margin-top: -1.75rem; - } - html, .main { overflow-y: visible; } + .main > .loading > span { + top: 25%; + } + .main-left { position: fixed; z-index: 100; @@ -2558,29 +2600,30 @@ input[name="nslookup"] { width: 100%; } - .cbi-dynlist > .item { - max-width: 14.9rem; - } - .showSide { - display: inline-block; - overflow: visible; - margin-right: .5rem; - padding: .1rem; + position: relative; + top: .18rem; + display: inline-flex; + align-items: center; + width: 1.6rem; + height: 1.6rem; + margin-right: .7rem; cursor: pointer; - border-radius: 50%; } - .showSide:before { - font-size: 1.7rem; - content: "\e20e"; + .showSide::before { + position: absolute; + left: 1px; + width: 24px; + height: 24px; + content: ""; + background: url(./icons/menu.svg) no-repeat center; } body:not(.logged-in) .showSide { visibility: hidden; width: 0; margin: 0; - padding: 0; } .node-main-login > .main .cbi-value-title { @@ -2588,12 +2631,27 @@ input[name="nslookup"] { } .cbi-value-title { - width: 9rem; + width: 12rem; padding-right: 1rem; } + .cbi-value-field .cbi-dropdown, + .cbi-value-field .cbi-input-select, + .cbi-value input[type="text"] { + width: 16rem; + min-width: 16rem; + } + + .cbi-value input[type="password"], + .cbi-value input[name^="pw"], + .cbi-value input[data-update="change"]:nth-child(2) { + width: 13rem !important; + min-width: 13rem; + } + #diag-rc-output > pre, - #command-rc-output > pre { + #command-rc-output > pre, + [data-page="admin-services-wol"] .notice code { font-size: 1rem; } @@ -2601,6 +2659,10 @@ input[name="nslookup"] { display: block; } + .Interfaces .table { + overflow-x: hidden; + } + #packages.table { display: grid; } @@ -2733,6 +2795,7 @@ input[name="nslookup"] { .commandbox { width: 100% !important; + margin-left: 0 !important; } } @@ -2749,7 +2812,6 @@ input[name="nslookup"] { fieldset, .cbi-section { margin: 1rem 0 0 0; - padding: 1rem; } .tabs { @@ -2760,7 +2822,8 @@ input[name="nslookup"] { margin: 0 1rem 1.5rem 1rem; } - .main > .main-left > .nav > .slide > .menu { + .main > .main-left > .nav > .slide > .menu, + .main > .main-left > .nav > li > [data-title="Logout"] { font-size: 1.2rem; } @@ -2770,15 +2833,17 @@ input[name="nslookup"] { .cbi-value-title { display: block; - width: 100%; min-width: 0 !important; - margin-top: 1rem; - margin-bottom: .5rem; + margin: .5rem 0; text-align: left; } + .cbi-value-title, + .cbi-value-description, .cbi-value-field, - .cbi-value-description { + .cbi-value-field .cbi-dropdown, + .cbi-value-field .cbi-input-select, + .cbi-value input[type="text"] { width: 100%; } @@ -2786,13 +2851,8 @@ input[name="nslookup"] { display: inline-block; } - .cbi-tabmenu > li, - .tabs > li { - padding: .6rem 0; - } - - .cbi-tabmenu > li > a, - .tabs > li > a { + .tabs > li > a, + .cbi-tabmenu > li > a { font-size: .9rem; padding: .2rem .3rem; } @@ -2814,7 +2874,7 @@ input[name="nslookup"] { padding: 0; } - .node-main-login > .main form > div:nth-last-child(1) { + .node-main-login > .main form > div:last-child { margin-top: 2rem; } @@ -2832,9 +2892,11 @@ input[name="nslookup"] { margin-top: -8px; } + #syslog, #diag-rc-output > pre, - #command-rc-output > pre { - font-size: .8rem; + #command-rc-output > pre, + [data-page="admin-services-wol"] .notice code { + font-size: .8rem !important; } h2 { @@ -2896,10 +2958,21 @@ input[name="nslookup"] { font-size: .62rem; } - #cbi-wireless .td { + #cbi-wireless > #wifi_assoclist_table .td { overflow: hidden; } + #cbi-wireless > .cbi-section-node .td, + .Interfaces .td.cbi-section-actions { + text-align: center !important; + } + + [data-page="admin-status-processes"] .td[data-title="Hang Up"]::before, + [data-page="admin-status-processes"] .td[data-title="Terminate"]::before, + [data-page="admin-status-processes"] .td[data-title="Kill"]::before { + display: none; + } + .hide-sm, .hide-xs:not([data-title="MAC-Address"]) { display: none; @@ -2910,6 +2983,10 @@ input[name="nslookup"] { ::-webkit-scrollbar { width: 10px; height: 10px; + } + + ::-webkit-scrollbar, + ::-webkit-scrollbar-corner { background: transparent; } @@ -2925,52 +3002,3 @@ input[name="nslookup"] { background: #424242; } } - -@media screen and (min-width: 1152px) { - .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 20rem; - } - - .cbi-value-field .cbi-input-select { - width: 20rem; - } - - .cbi-value-field .cbi-dropdown { - min-width: 20rem; - } - - .cbi-section-node .tr { - overflow: hidden; - } -} - -@media screen and (min-width: 1366px) { - .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 22rem; - } - - .cbi-value-field .cbi-input-select { - width: 22rem; - } - - .cbi-value-field .cbi-dropdown { - min-width: 22rem; - } -} - -@media screen and (min-width: 1600px) { - .cbi-value input[type="password"], - .cbi-value input[type="text"] { - min-width: 25rem; - } - - .cbi-value-field .cbi-input-select { - width: 25rem; - } - - .cbi-value-field .cbi-dropdown { - min-width: 25rem; - } -} diff --git a/themes/luci-theme-material/htdocs/luci-static/material/custom.css b/themes/luci-theme-material/htdocs/luci-static/material/custom.css index 6acd5aa3dd..7a5bbb93e8 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/custom.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/custom.css @@ -6,6 +6,7 @@ --menu-bg-color: #fff; --menu-color: #5f6368; --menu-color-hover: #202124; + --main-menu-color: #202124; --submenu-bg-hover: #d4d4d4; --submenu-bg-hover-active: #09c; --font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB"; 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 differdeleted file mode 100644 index 9e6ffc9b82..0000000000 --- a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot +++ /dev/null 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 deleted file mode 100644 index d38d057da3..0000000000 --- a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.svg +++ /dev/null @@ -1,16 +0,0 @@ -<?xml version="1.0" standalone="no"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > -<svg xmlns="http://www.w3.org/2000/svg"> -<metadata>Generated by IcoMoon</metadata> -<defs> -<font id="icomoon" horiz-adv-x="1024"> -<font-face units-per-em="1024" ascent="960" descent="-64" /> -<missing-glyph horiz-adv-x="1024" /> -<glyph unicode=" " horiz-adv-x="512" d="" /> -<glyph unicode="" glyph-name="expand_less" d="M512 596.667l256-256-60-60-196 196-196-196-60 60z" /> -<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 differdeleted file mode 100644 index 84669323e9..0000000000 --- a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.ttf +++ /dev/null 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 differdeleted file mode 100644 index 00cf84ea03..0000000000 --- a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.woff +++ /dev/null diff --git a/themes/luci-theme-material/htdocs/luci-static/material/icons/arrow.svg b/themes/luci-theme-material/htdocs/luci-static/material/icons/arrow.svg new file mode 100644 index 0000000000..be864c5ac9 --- /dev/null +++ b/themes/luci-theme-material/htdocs/luci-static/material/icons/arrow.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#202124" d="m8,10.033663l-6.898535,-6.013274l-1.060688,0.972974l7.959223,6.986249l7.959223,-6.986249l-1.060688,-0.972974l-6.898535,6.013274z"/></svg>
\ No newline at end of file diff --git a/themes/luci-theme-material/htdocs/luci-static/material/icons/logout.svg b/themes/luci-theme-material/htdocs/luci-static/material/icons/logout.svg new file mode 100644 index 0000000000..d529b94e6f --- /dev/null +++ b/themes/luci-theme-material/htdocs/luci-static/material/icons/logout.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#202124" d="M10.09,15.59L11.5,17l5,-5,-5,-5,-1.41,1.41L12.67,11H3v2h9.67l-2.58,2.59zM19,3H5c-1.11,0,-2,0.9,-2,2v4h2V5h14v14H5v-4H3v4c0,1.1,0.89,2,2,2h14c1.1,0,2,-0.9,2,-2V5c0,-1.1,-0.9,-2,-2,-2z"/></svg>
\ No newline at end of file diff --git a/themes/luci-theme-material/htdocs/luci-static/material/icons/menu.svg b/themes/luci-theme-material/htdocs/luci-static/material/icons/menu.svg new file mode 100644 index 0000000000..46bd0ae687 --- /dev/null +++ b/themes/luci-theme-material/htdocs/luci-static/material/icons/menu.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="m2.037076,18.641983l19.925899,0l0,-2.231286l-19.925899,0l0,2.231286zm0,-7.731664l0,2.179395l19.925899,0l0,-2.179395l-19.925899,0zm0,-5.552269l0,2.231286l19.925899,0l0,-2.231286l-19.925899,0z"/></svg>
\ No newline at end of file diff --git a/themes/luci-theme-material/htdocs/luci-static/material/icons/spinner.svg b/themes/luci-theme-material/htdocs/luci-static/material/icons/spinner.svg new file mode 100644 index 0000000000..6ddd3b3ed8 --- /dev/null +++ b/themes/luci-theme-material/htdocs/luci-static/material/icons/spinner.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#888" d="M8,0c-4.355,0-7.898,3.481-7.998,7.812,0.092-3.779,2.966-6.812,6.498-6.812,3.59,0,6.5,3.134,6.5,7,0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5c0-4.418-3.582-8-8-8zM8,16c4.355,0,7.898-3.481,7.998-7.812-0.092,3.779-2.966,6.812-6.498,6.812-3.59,0-6.5-3.134-6.5-7,0-0.828-0.672-1.5-1.5-1.5s-1.5,0.672-1.5,1.5c0,4.418,3.582,8,8,8z"/></svg>
\ No newline at end of file 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 db9c99e118..755191f335 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 @@ -1,219 +1,218 @@ /** - * Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI + * Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI * - * luci-theme-material - * Copyright 2015 Lutty Yang <lutty@wcan.in> + * luci-theme-material + * Copyright 2015 Lutty Yang <lutty@wcan.in> * - * Have a bug? Please create an issue here on GitHub! - * https://github.com/LuttyYang/luci-theme-material/issues + * Have a bug? Please create an issue here on GitHub! + * https://github.com/LuttyYang/luci-theme-material/issues * - * luci-theme-bootstrap: - * Copyright 2008 Steven Barth <steven@midlink.org> - * Copyright 2008 Jo-Philipp Wich <jow@openwrt.org> - * Copyright 2012 David Menting <david@nut-bolt.nl> + * luci-theme-bootstrap: + * Copyright 2008 Steven Barth <steven@midlink.org> + * Copyright 2008 Jo-Philipp Wich <jow@openwrt.org> + * Copyright 2012 David Menting <david@nut-bolt.nl> * - * MUI: - * https://github.com/muicss/mui + * MUI: + * https://github.com/muicss/mui * - * Licensed to the public under the Apache License 2.0 + * Licensed to the public under the Apache License 2.0 */ + (function ($) { - $(".main > .loading").fadeOut(); - - /** - * trim text, Remove spaces, wrap - * @param text - * @returns {string} - */ - function trimText(text) { - return text.replace(/[ \t\n\r]+/g, " "); - } - - - var lastNode = undefined; - var mainNodeName = undefined; - - var nodeUrl = ""; - (function(node){ - var luciLocation; - 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; - if (!$('body').hasClass('logged-in')) { - luciLocation = ["Main", "Login"]; - return true; - } - - $(".main > .main-left > .nav > .slide > .menu").each(function () { - var ulNode = $(this); - ulNode.next().find("a").each(function () { - var that = $(this); - var href = that.attr("href"); - - if (href.indexOf(nodeUrl) != -1) { - ulNode.click(); - ulNode.next(".slide-menu").stop(true, true); - lastNode = that.parent(); - lastNode.addClass("active"); - ret = true; - return true; - } - }); - }); - return ret; - } - - /** - * menu click - */ - $(".main > .main-left > .nav > .slide > .menu").click(function () { - var ul = $(this).next(".slide-menu"); - var menu = $(this); - if (!ul.is(":visible")) { - menu.addClass("active"); - ul.addClass("active"); - ul.stop(true).slideDown("fast"); - } else { - ul.stop(true).slideUp("fast", function () { - menu.removeClass("active"); - ul.removeClass("active"); - }); - } - return false; - }); - - /** - * hook menu click and add the hash - */ - $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () { - if (lastNode != undefined) lastNode.removeClass("active"); - $(this).parent().addClass("active"); - $(".main > .loading").fadeIn("fast"); - return true; - }); - - /** - * fix menu click - */ - $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () { - if (lastNode != undefined) lastNode.removeClass("active"); - $(this).addClass("active"); - $(".main > .loading").fadeIn("fast"); - window.location = $($(this).find("a")[0]).attr("href"); - return false; - }); - - /** - * get current node and open it - */ - 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(""); - - /** - * Sidebar expand - */ - var showSide = false; - $(".showSide").click(function () { - if (showSide) { - $(".darkMask").stop(true).fadeOut("fast"); - $(".main-left").stop(true).animate({ - width: "0" - }, "fast"); - $(".main-right").css("overflow-y", "visible"); - showSide = false; - } else { - $(".darkMask").stop(true).fadeIn("fast"); - $(".main-left").stop(true).animate({ - width: "15rem" - }, "fast"); - $(".main-right").css("overflow-y", "hidden"); - showSide = true; - } - }); - - - $(".darkMask").click(function () { - if (showSide) { - showSide = false; - $(".darkMask").stop(true).fadeOut("fast"); - $(".main-left").stop(true).animate({ - width: "0" - }, "fast"); - $(".main-right").css("overflow-y", "visible"); - } - }); - - $(window).resize(function () { - if ($(window).width() > 921) { - $(".main-left").css("width", ""); - $(".darkMask").stop(true); - $(".darkMask").css("display", "none"); - showSide = false; - } - }); - - /** - * fix legend position - */ - $("legend").each(function () { - var that = $(this); - that.after("<span class='panel-title'>" + that.text() + "</span>"); - }); - - $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () { - var that = $(this); - if (that.text().trim() == ""){ - that.css("display", "none"); - } - }); - - - $(".main-right").focus(); - $(".main-right").blur(); - $("input").attr("size", "0"); - - 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; - case "node-status-firewall": - var button = $(".node-status-firewall > .main fieldset li > a"); - button.addClass("cbi-button cbi-button-reset a-to-btn"); - break; - case "node-system-reboot": - var button = $(".node-system-reboot > .main > .main-right p > a"); - button.addClass("cbi-button cbi-input-reset a-to-btn"); - break; - } - } + $(".main > .loading").fadeOut(); + + /** + * trim text, Remove spaces, wrap + * @param text + * @returns {string} + */ + function trimText(text) { + return text.replace(/[ \t\n\r]+/g, " "); + } + + var lastNode = undefined; + var mainNodeName = undefined; + + var nodeUrl = ""; + (function(node){ + var luciLocation; + 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; + if (!$('body').hasClass('logged-in')) { + luciLocation = ["Main", "Login"]; + return true; + } + + $(".main > .main-left > .nav > .slide > .menu").each(function () { + var ulNode = $(this); + ulNode.next().find("a").each(function () { + var that = $(this); + var href = that.attr("href"); + + if (href.indexOf(nodeUrl) != -1) { + ulNode.click(); + ulNode.next(".slide-menu").stop(true, true); + lastNode = that.parent(); + lastNode.addClass("active"); + ret = true; + return true; + } + }); + }); + return ret; + } + + /** + * menu click + */ + $(".main > .main-left > .nav > .slide > .menu").click(function () { + var ul = $(this).next(".slide-menu"); + var menu = $(this); + if (!ul.is(":visible")) { + menu.addClass("active"); + ul.addClass("active"); + ul.stop(true).slideDown("fast"); + } else { + ul.stop(true).slideUp("fast", function () { + menu.removeClass("active"); + ul.removeClass("active"); + }); + } + return false; + }); + + /** + * hook menu click and add the hash + */ + $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () { + if (lastNode != undefined) lastNode.removeClass("active"); + $(this).parent().addClass("active"); + $(".main > .loading").fadeIn("fast"); + return true; + }); + + /** + * fix menu click + */ + $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () { + if (lastNode != undefined) lastNode.removeClass("active"); + $(this).addClass("active"); + $(".main > .loading").fadeIn("fast"); + window.location = $($(this).find("a")[0]).attr("href"); + return false; + }); + + /** + * get current node and open it + */ + if (getCurrentNodeByUrl()) { + mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1]; + mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase(); + $("body").addClass(mainNodeName); + } + + /** + * Sidebar expand + */ + var showSide = false; + $(".showSide").click(function () { + if (showSide) { + $(".darkMask").stop(true).fadeOut("fast"); + $(".main-left").stop(true).animate({ + width: "0" + }, "fast"); + $(".main-right").css("overflow-y", "visible"); + showSide = false; + } else { + $(".darkMask").stop(true).fadeIn("fast"); + $(".main-left").stop(true).animate({ + width: "15rem" + }, "fast"); + $(".main-right").css("overflow-y", "hidden"); + showSide = true; + } + }); + + $(".darkMask").click(function () { + if (showSide) { + showSide = false; + $(".darkMask").stop(true).fadeOut("fast"); + $(".main-left").stop(true).animate({ + width: "0" + }, "fast"); + $(".main-right").css("overflow-y", "visible"); + } + }); + + $(window).resize(function () { + if ($(window).width() > 921) { + $(".main-left").css("width", ""); + $(".darkMask").stop(true); + $(".darkMask").css("display", "none"); + showSide = false; + } + }); + + /** + * fix legend position + */ + $("legend").each(function () { + var that = $(this); + that.after("<span class='panel-title'>" + that.text() + "</span>"); + }); + + $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () { + var that = $(this); + if (that.text().trim() == ""){ + that.css("display", "none"); + } + }); + + $(".main-right").focus(); + $(".main-right").blur(); + $("input").attr("size", "0"); + $(".cbi-button-up").val("__"); + $(".cbi-button-down").val("__"); + $(".slide > a").removeAttr("href"); + + 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; + case "node-status-firewall": + var button = $(".node-status-firewall > .main fieldset li > a"); + button.addClass("cbi-button cbi-button-reset a-to-btn"); + break; + case "node-system-reboot": + var button = $(".node-system-reboot > .main > .main-right p > a"); + button.addClass("cbi-button cbi-input-reset a-to-btn"); + break; + } + } })(jQuery); |
