From 7a2085a8e5798d481e1e8bbb9b7e56815e59bf33 Mon Sep 17 00:00:00 2001 From: shunjou Date: Mon, 18 Feb 2019 20:52:16 -0500 Subject: [PATCH] luci-theme-material: icons and other changes * Remove excess font dependency * Retain two glyphs as svg * Store svg icons externally * Add logout icon * Replace spaces with tabs in script * Various minor fixes Signed-off-by: Shun Jou --- .../htdocs/luci-static/material/cascade.css | 755 +++++++++--------- .../luci-static/material/fonts/font.eot | Bin 1912 -> 0 bytes .../luci-static/material/fonts/font.svg | 16 - .../luci-static/material/fonts/font.ttf | Bin 1748 -> 0 bytes .../luci-static/material/fonts/font.woff | Bin 1824 -> 0 bytes .../luci-static/material/icons/arrow.svg | 1 + .../luci-static/material/icons/logout.svg | 1 + .../luci-static/material/icons/menu.svg | 1 + .../luci-static/material/icons/spinner.svg | 1 + .../htdocs/luci-static/material/js/script.js | 417 +++++----- 10 files changed, 603 insertions(+), 589 deletions(-) delete mode 100644 themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot delete mode 100644 themes/luci-theme-material/htdocs/luci-static/material/fonts/font.svg delete mode 100644 themes/luci-theme-material/htdocs/luci-static/material/fonts/font.ttf delete mode 100644 themes/luci-theme-material/htdocs/luci-static/material/fonts/font.woff create mode 100644 themes/luci-theme-material/htdocs/luci-static/material/icons/arrow.svg create mode 100644 themes/luci-theme-material/htdocs/luci-static/material/icons/logout.svg create mode 100644 themes/luci-theme-material/htdocs/luci-static/material/icons/menu.svg create mode 100644 themes/luci-theme-material/htdocs/luci-static/material/icons/spinner.svg 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 1fa7b50a74..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 - */ -@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,14 +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: #202124; - color: var(--main-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, @@ -606,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; @@ -637,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; @@ -648,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; } @@ -713,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; } @@ -790,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, @@ -801,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; @@ -811,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%; } @@ -834,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; @@ -882,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; } @@ -910,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; @@ -969,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; @@ -1011,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; @@ -1029,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 { @@ -1071,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; @@ -1098,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; } @@ -1132,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; } @@ -1174,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; @@ -1183,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; @@ -1227,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; } @@ -1254,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 { @@ -1304,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 { @@ -1321,6 +1367,7 @@ form[method="post"] + form[method="post"], margin: 0 !important; padding: 0; list-style: none; + outline: 0; } .cbi-dropdown > ul.preview { @@ -1342,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, @@ -1403,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; @@ -1484,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; @@ -1526,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; @@ -1594,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; } @@ -1642,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"], @@ -1774,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; @@ -1930,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 { @@ -1972,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; @@ -2061,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; @@ -2093,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; @@ -2152,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; } @@ -2165,6 +2179,7 @@ input[name="nslookup"] { } .node-main-login > .main .cbi-input-text { + width: 100% !important; min-width: 15rem; } @@ -2180,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; @@ -2206,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; } @@ -2288,6 +2295,7 @@ input[name="nslookup"] { } .Firewall form { + margin: 2rem 2rem 0 0; padding: 0; box-shadow: none; } @@ -2320,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%; } @@ -2342,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; @@ -2362,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; } @@ -2382,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; } @@ -2394,6 +2408,7 @@ input[name="nslookup"] { max-width: 40%; margin: 0; animation: anim-fade-in 1.5s forwards; + word-break: break-word; opacity: 0; } @@ -2403,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; @@ -2416,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; @@ -2430,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 { @@ -2447,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) { @@ -2478,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; } @@ -2501,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; } @@ -2521,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; } @@ -2539,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; @@ -2559,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 { @@ -2589,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; } @@ -2602,6 +2659,10 @@ input[name="nslookup"] { display: block; } + .Interfaces .table { + overflow-x: hidden; + } + #packages.table { display: grid; } @@ -2734,6 +2795,7 @@ input[name="nslookup"] { .commandbox { width: 100% !important; + margin-left: 0 !important; } } @@ -2750,7 +2812,6 @@ input[name="nslookup"] { fieldset, .cbi-section { margin: 1rem 0 0 0; - padding: 1rem; } .tabs { @@ -2761,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; } @@ -2771,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%; } @@ -2787,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; } @@ -2815,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; } @@ -2833,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 { @@ -2897,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; @@ -2911,6 +2983,10 @@ input[name="nslookup"] { ::-webkit-scrollbar { width: 10px; height: 10px; + } + + ::-webkit-scrollbar, + ::-webkit-scrollbar-corner { background: transparent; } @@ -2926,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/fonts/font.eot b/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot deleted file mode 100644 index 9e6ffc9b826cb39a58e56359d6b8b922a4b07364..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1912 zcmah~Ur1Y582`?_x%Vc~T>r!*OpT4P8o`m;m_K$==`c84Z6{8{+A(HKZlhvuY>cgr zKFA)%(1*FfM*FnUZZIZ{J&ZBvpfZF#Y)@lIVSRG2hwi1Y4#u`F`<;8QXe6-ja?bgE zzwN>ij! zo>pmzGE@TNr8Jlltw75)0Xj=z>Nm6}M}y=6>u7^S>VN6wGm(a7S2vh%P-e4*%<|74 z-T45bcKGFdW@Q;|Bm8Z&_WaWN)fd`ZeusaHNO&->WpYaP$#+CHu8YruP`(wvhyN-3 z)ANP$nqL?8;r{@?cd3}o2=nYs_)p+_3z@ZLe9%0RR1ZI(XA0Ww7af1Ye-<&`S}v}X zF;AHMCGRIuyn~rYh<#h&Z+ypW*>5z!99(zI7^Yoq=ZPL)7I!PVbY4V3=V9`>F2E}z z8jskHKC=}KRXf?}74Xf-hKS{56ga3mP!HbyReXH8^0ZRngTXngI9B<^|Cj$y|Mga> z;R}pA9?uwniV?%;hGTu$Jc)CL^hp0d9A5GarZvNJ<6ufi3Gpco?d=T-GZmvH1`UH| zm}{8N!4f`UZ>U1NTNno5ddx?}-q;a0gdKdb1FJ*sPETj7DTdm^s|}H!LSzj^@e}6Xo3K zXf!%Jyy+jD4Tn>yMB=%*RO-r=RBGa)o-oe4%#d}+m|4=Q~$QQ44QKuG~z>i4Xv1q8Lj|COk&su!m zB#R{CF*mpnCZx!x7-pM@8!0(V$8jZ+b@ar1M!vd&d^FFaIShFeNRsTjU4j|Sd#3{Z zXChnUcGm@);*d_c-5qUSPhEZ6>5dLdQtxVZJDg384u_&VOeQt$##&BG!nEAl4Grj% zf?bkj$zHI_k|f*NMx?LL=UZ2u=WI$ybv3ANugm3X>D=4hK9vL(>`jZV6X?ab{kvf)^jN}pSC8R2xdumC)3 zVG%fPVH@zOg(aM_9t+FhFId=#{kw^X%;o^2qQ}GnaNfcq@UVq#z&9-{;jj-_SO!03 zVJAiDPgt_+pY=D^L-I_h!b%DZS?d0}MTT%Y6XQicBm D*A6pu 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 @@ - - - -Generated by IcoMoon - - - - - - - - - - - - \ 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 deleted file mode 100644 index 84669323e9ddfdca80c91416b6d4fe31ea1829ab..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1748 zcmah}U1%d!6h3n&Gn1cY`jbCwn>0i)RYHn=Nd(_}VjX(rt? z-ECzbiVq^~gR7wIJ}Ik$SP&mXgcU4O@Ijw^C=2dW1t0Wf!4*VZ<9BDKw5tWraPR%j zch0@%%sF?41R`?L28k4Z?)j66)(&?+m@hHriq*pM5AWT1he+s#-Y6GVma(=$zlqge zURuBMOt<$}=(mX2y^2;SDaD815ZSn2x&lJ^TKpFJN6=4Hs*Sav&i0^x2YqmLYKX+Z zh4)?i>i(NQi4QI{A2plC?(n|zF-~ay82lsnd+=JP)cPs*9gSyfz$B1>-K|G#j3{&3 za6R<@9}b5+fwX3MZ5)CURiZq_(cRrqHrq5-65u1iXN>y@0f&$Yu-(xnaWfkO;Qq)* z#NF5yH`q4b*n#elr`Ok;YENPI@o7V(M{qI++s^0z-kX`(%jfy~2$ZLw_^~)dT}1uS z0rN>EGwI<(fDgaVtH^j5jW5RI*{t6`F;QxqJJ%>pOeB+IW1GQ|xmYZh%VeIK&*d&( z&gJGW%*>3B-$2WWnmaZ^=Q=5cP!W|W1*=Ev4Ne;?! z)Dy)zd{P0UUVRb1o7d6YhB`8mB)e{xAja}mPdI)uu{C9PpS39tsmJ39b@_d+maY?_ zkmb_i?(jIA?QIT+qTJ7BHSPLZNy|dC(%N+m=)h}3M^?w~_ggCg@Q$N?gdbxG{B zx-Tq&<|jJo3a&GkgUE(rO)7n2#T7^aXXe0w=PWD&r!8y)UbV1p!rv)lfjj9+m((_t< zWuc~rPsQT+HZ`i#3LId-Ij1N_@nd%#OHOO$)ulomK{X`0N=sCr`mvsqHN6ooYr0l1 zG_+E9emy)@ter=0F`6`DHxRvyV{{{<0yVIfz|GS-<|*R^&YLfQ9MQz1E%`702g#=) A_5c6? 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 deleted file mode 100644 index 00cf84ea037c9748eba8fced0acff7dd29c12b2f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1824 zcmah~U1%d!6h3z*Gn1dq^e2DXHffq}n?fO*P4m+=ZK*U=>UMvqZE#n_rpav5(j>cS zx@~12iVq^~gR7vpPs*;oSP-8?SivF%AM{D2EZCG7&Rrx~vs#LD8 z6G>0NAK>b*2>Z*`Jo2P*_+G9;iM>+Jt)s5=Jp7=pDwQg^vIY+G*{fXdJZt;odUXZ8 zDo8Q&L?BVT%Wji|-tGur!++fv+0Qh@Y&`XZu+|ff4#$ZeUJ-X2yEHCB!7-gTOi&;6 zDnMO`aoh#Vv%1Jayytdm1tWk99y$)y!#92uA6{uZZZr@haQ1(2tnt17cmHqxn;lZi z$L30U;t9iuVRnmN#h?YE)H%Ji~}l4#fh3$L$@8 zB@^+8(AyRp6H=J9PPd>@Tz*hhgR$y%{W5Pf*FI~Y9^ z+n%yI&s!9m)a`NwI=vppsm{}ZfSGd2+3vF0+gfclML9^PHEnIZprs*NVSP;l`k-u; zWLdJ7t+FJ^R<;=%9Q64%RQoxL5>}lps>|ziI$L`}{T`#RqrJ^xmt|E|ogPm| zCrxYtUNy0VFSW^2&zRUw zae99-UoBUw6 \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 + * luci-theme-material + * Copyright 2015 Lutty Yang * - * 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 - * Copyright 2008 Jo-Philipp Wich - * Copyright 2012 David Menting + * luci-theme-bootstrap: + * Copyright 2008 Steven Barth + * Copyright 2008 Jo-Philipp Wich + * Copyright 2012 David Menting * - * 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("" + that.text() + ""); - }); - - $(".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("" + that.text() + ""); + }); + + $(".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); -- 2.30.2