LuCI - OpenWrt Configuration Interface
Revisão | bc7fccdd43483a50e57293bbe1ca134bd102a478 (tree) |
---|---|
Hora | 2022-01-26 17:10:56 |
Autor | Tianling Shen <cnsztl@immo...> |
Commiter | Tianling Shen |
luci-theme-bootstrap-mod: sync with upstream source
Signed-off-by: Tianling Shen <cnsztl@immortalwrt.org>
@@ -1,4 +1,4 @@ | ||
1 | -# Copyright (C) 2020 Lienol <lawlienol@gmail.com> | |
1 | +# Copyright (C) 2018-2022 Lienol <lawlienol@gmail.com> | |
2 | 2 | # |
3 | 3 | # This is free software, licensed under the GNU General Public License v3. |
4 | 4 | # |
@@ -7,8 +7,8 @@ include $(TOPDIR)/rules.mk | ||
7 | 7 | |
8 | 8 | LUCI_TITLE:=Bootstrap Mod Theme By Lienol |
9 | 9 | LUCI_DEPENDS:= |
10 | -PKG_VERSION:=2 | |
11 | -PKG_DATE:=20200912 | |
10 | +PKG_VERSION:=20220102 | |
11 | +PKG_RELEASE:=1 | |
12 | 12 | |
13 | 13 | include ../../luci.mk |
14 | 14 |
@@ -6,8 +6,8 @@ body { | ||
6 | 6 | body { |
7 | 7 | background: #ffffff; |
8 | 8 | color: #333; |
9 | - font-family: Helvetica, Arial, sans-serif; | |
10 | - font-size: 14px; | |
9 | + font-family: "Helvetica Neue, Helvetica, Arial, sans-serif"; | |
10 | + font-size: 13px; | |
11 | 11 | line-height: 1.8; |
12 | 12 | margin: 0; |
13 | 13 | /* padding-top: 60px; */ |
@@ -122,6 +122,7 @@ header { | ||
122 | 122 | box-shadow: 0 2px 2px rgba(0, 0, 0, .1); |
123 | 123 | z-index: 100; |
124 | 124 | border-bottom: 2px solid #ccc; |
125 | + background-image: linear-gradient(to bottom, #333333, #222222); | |
125 | 126 | } |
126 | 127 | |
127 | 128 | .brand { |
@@ -556,23 +557,23 @@ p { | ||
556 | 557 | |
557 | 558 | .tabs, |
558 | 559 | .cbi-tabmenu { |
559 | - border-bottom: 2px solid #ddd; | |
560 | - margin-bottom: 20px; | |
560 | + border-bottom: 1px solid #ddd; | |
561 | + margin-bottom: 15px; | |
561 | 562 | } |
562 | 563 | |
563 | 564 | .tabs li, |
564 | 565 | .cbi-tabmenu li { |
565 | 566 | display: inline-block; |
567 | + margin-bottom: -1px; | |
566 | 568 | } |
567 | 569 | |
568 | 570 | .tabs a, |
569 | 571 | .cbi-tabmenu a { |
570 | 572 | display: block; |
571 | - color: #404040; | |
573 | + /* color: #404040; */ | |
572 | 574 | line-height: 34px; |
573 | - margin-bottom: -2px; | |
574 | - margin-right: 20px; | |
575 | - padding: 0 3px; | |
575 | + margin-right: 3px; | |
576 | + padding: 0 15px; | |
576 | 577 | } |
577 | 578 | |
578 | 579 | .active a, |
@@ -581,6 +582,13 @@ p { | ||
581 | 582 | color: #111; |
582 | 583 | } |
583 | 584 | |
585 | +.tabs>li>a:hover, | |
586 | +.cbi-tabmenu>li>a:hover { | |
587 | + text-decoration: none; | |
588 | + background-color: #eee; | |
589 | + border-color: #eee #eee #ddd; | |
590 | +} | |
591 | + | |
584 | 592 | |
585 | 593 | /* Fieldset */ |
586 | 594 |
@@ -603,6 +611,7 @@ fieldset fieldset { | ||
603 | 611 | table .cbi-value-field, |
604 | 612 | .table .cbi-value-field { |
605 | 613 | display: table-cell; |
614 | + width: unset; | |
606 | 615 | } |
607 | 616 | |
608 | 617 | .cbi-value-title { |
@@ -613,7 +622,7 @@ table .cbi-value-field, | ||
613 | 622 | padding-top: 0.4em; |
614 | 623 | line-height: 1.2em; |
615 | 624 | float: left; |
616 | - width: 13em; | |
625 | + width: 14em; | |
617 | 626 | margin-right: 1.5em; |
618 | 627 | text-align: right; |
619 | 628 | color: #404040; |
@@ -622,6 +631,7 @@ table .cbi-value-field, | ||
622 | 631 | .cbi-value-field { |
623 | 632 | color: #811; |
624 | 633 | display: table-cell; |
634 | + width: 0.1%; | |
625 | 635 | } |
626 | 636 | |
627 | 637 | .cbi-section-table-cell { |
@@ -808,6 +818,17 @@ select { | ||
808 | 818 | line-height: 18px; |
809 | 819 | } |
810 | 820 | |
821 | +input[disabled], | |
822 | +select[disabled], | |
823 | +textarea[disabled], | |
824 | +input[readonly], | |
825 | +select[readonly], | |
826 | +textarea[readonly] { | |
827 | + background-color: #f5f5f5; | |
828 | + border-color: #ddd; | |
829 | + color: unset; | |
830 | +} | |
831 | + | |
811 | 832 | table.cbi-section-table input, |
812 | 833 | table.cbi-section-table textarea, |
813 | 834 | table.cbi-section-table select, |
@@ -880,11 +901,11 @@ input[type=file] { | ||
880 | 901 | } |
881 | 902 | |
882 | 903 | .cbi-value-description { |
883 | - /* display: inline; */ | |
904 | + display: inline; | |
884 | 905 | background-image: url(/luci-static/resources/cbi/help.gif); |
885 | 906 | /* background-position-x: 0px; |
886 | 907 | background-position-y: 1px; */ |
887 | - background-position: 0em 0.3em; | |
908 | + background-position: 0em 0.2em; | |
888 | 909 | background-repeat: no-repeat; |
889 | 910 | padding: 0 1.2rem; |
890 | 911 | } |
@@ -906,15 +927,13 @@ input[type=file] { | ||
906 | 927 | |
907 | 928 | /* Button */ |
908 | 929 | |
909 | -.btn, | |
910 | 930 | .cbi-button, |
911 | 931 | button { |
912 | - border-radius: 6px !important; | |
932 | + border-radius: 4px; | |
913 | 933 | display: inline-block; |
914 | - background: #fff; | |
934 | + background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat; | |
915 | 935 | border: 1px solid #ccc; |
916 | - border-radius: 2px; | |
917 | - box-shadow: 0 2px 2px rgba(0, 0, 0, .05); | |
936 | + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); | |
918 | 937 | color: #333; |
919 | 938 | line-height: 16px; |
920 | 939 | padding: 0.5em; |
@@ -922,16 +941,12 @@ button { | ||
922 | 941 | margin-left: 0.2em; |
923 | 942 | } |
924 | 943 | |
925 | -.btn:active, | |
926 | -.btn:focus, | |
927 | 944 | .cbi-button:active, |
928 | -.cbi-button:focus, | |
929 | -button:active, | |
945 | +.cbi-button:focus button:active, | |
930 | 946 | button:focus { |
931 | 947 | border-color: #bbb; |
932 | 948 | } |
933 | 949 | |
934 | -/* | |
935 | 950 | .cbi-button-up, |
936 | 951 | .cbi-input-up { |
937 | 952 | background-position: center; |
@@ -949,27 +964,23 @@ button:focus { | ||
949 | 964 | padding-left: 15px; |
950 | 965 | padding-right: 15px; |
951 | 966 | } |
952 | -*/ | |
953 | 967 | |
954 | 968 | .cbi-button-add, |
955 | 969 | .cbi-input-add { |
956 | - background: #404040; | |
957 | - border-color: #404040; | |
958 | - color: #fff; | |
970 | + border-color: #4a4; | |
971 | + color: #4a4; | |
959 | 972 | } |
960 | 973 | |
961 | 974 | .cbi-button-add:active, |
962 | 975 | .cbi-button-add:focus, |
963 | 976 | .cbi-input-add:active, |
964 | -.cbi-input-add:focus { | |
965 | -} | |
977 | +.cbi-input-add:focus {} | |
966 | 978 | |
967 | 979 | .cbi-button-remove, |
968 | 980 | .cbi-input-remove, |
969 | 981 | .cbi-section-remove input { |
970 | - border-color: red; | |
971 | - background-color: red; | |
972 | - color: #fff; | |
982 | + border-color: #c44; | |
983 | + color: #c44; | |
973 | 984 | } |
974 | 985 | |
975 | 986 | .cbi-button-remove:active, |
@@ -977,79 +988,74 @@ button:focus { | ||
977 | 988 | .cbi-input-remove:active, |
978 | 989 | .cbi-input-remove:focus, |
979 | 990 | .cbi-section-remove input:active, |
980 | -.cbi-section-remove input:focus { | |
981 | -} | |
991 | +.cbi-section-remove input:focus {} | |
982 | 992 | |
983 | 993 | .cbi-button-reload, |
984 | 994 | .cbi-input-reload { |
985 | - background: rgb(148, 143, 225); | |
986 | 995 | border-color: rgb(148, 143, 225); |
987 | - color: #fff; | |
996 | + color: rgb(148, 143, 225); | |
988 | 997 | } |
989 | 998 | |
990 | 999 | .cbi-button-reload:active, |
991 | 1000 | .cbi-button-reload:focus, |
992 | 1001 | .cbi-input-reload:active, |
993 | -.cbi-input-reload:focus { | |
994 | -} | |
1002 | +.cbi-input-reload:focus {} | |
995 | 1003 | |
996 | 1004 | .cbi-button-reset, |
997 | 1005 | .cbi-input-reset { |
998 | - background: #6bde84; | |
999 | - border-color: #6bde84; | |
1000 | - color: #fff; | |
1006 | + border-color: #4a4; | |
1007 | + color: #4a4; | |
1001 | 1008 | } |
1002 | 1009 | |
1003 | 1010 | .cbi-button-reset:active, |
1004 | 1011 | .cbi-button-reset:focus, |
1005 | 1012 | .cbi-input-reset:active, |
1006 | -.cbi-input-reset:focus { | |
1007 | -} | |
1013 | +.cbi-input-reset:focus {} | |
1008 | 1014 | |
1009 | 1015 | .cbi-button-edit, |
1010 | 1016 | .cbi-input-edit { |
1011 | - background: #ff7700; | |
1012 | 1017 | border-color: #ff7700; |
1013 | - color: #fff; | |
1018 | + color: #ff7700; | |
1014 | 1019 | } |
1015 | 1020 | |
1016 | 1021 | .cbi-button-edit:active, |
1017 | 1022 | .cbi-button-edit:focus, |
1018 | 1023 | .cbi-input-edit:active, |
1019 | -.cbi-input-edit:focus { | |
1020 | -} | |
1024 | +.cbi-input-edit:focus {} | |
1021 | 1025 | |
1022 | 1026 | .cbi-button-apply, |
1023 | 1027 | .cbi-input-apply { |
1024 | - color: #fff; | |
1025 | - background: #0069d6; | |
1026 | - border: 1px solid #0069d6; | |
1028 | + border-color: #0069d6; | |
1029 | + color: #0069d6; | |
1027 | 1030 | } |
1028 | 1031 | |
1029 | 1032 | .cbi-button-apply:active, |
1030 | 1033 | .cbi-button-apply:focus, |
1031 | 1034 | .cbi-input-apply:active, |
1032 | -.cbi-input-apply:focus { | |
1033 | -} | |
1035 | +.cbi-input-apply:focus {} | |
1034 | 1036 | |
1035 | 1037 | .cbi-button-save, |
1036 | 1038 | .cbi-input-save { |
1037 | - background: rgb(148, 143, 225); | |
1038 | 1039 | border-color: rgb(148, 143, 225); |
1039 | - color: #fff; | |
1040 | + color: rgb(148, 143, 225); | |
1040 | 1041 | } |
1041 | 1042 | |
1042 | 1043 | .cbi-button-save:active, |
1043 | 1044 | .cbi-button-save:focus, |
1044 | 1045 | .cbi-input-save:active, |
1045 | -.cbi-input-save:focus { | |
1046 | -} | |
1046 | +.cbi-input-save:focus {} | |
1047 | 1047 | |
1048 | 1048 | /* LuCI 18 DynamicList */ |
1049 | -input[type="text"] + .cbi-button, | |
1050 | -input[type="password"] + .cbi-button, | |
1051 | -select + .cbi-button { | |
1052 | - padding: 4px 8px; | |
1049 | +input[type="text"]+.cbi-button, | |
1050 | +input[type="password"]+.cbi-button, | |
1051 | +select+.cbi-button { | |
1052 | + vertical-align: top; | |
1053 | + padding: 0.4em; | |
1054 | + border-color: #ccc; | |
1055 | + margin: 0 0 1px -3px; | |
1056 | + font-size: 14px; | |
1057 | + line-height: 18px; | |
1058 | + border-radius: 5px; | |
1053 | 1059 | } |
1054 | 1060 | |
1055 | 1061 |
@@ -1121,9 +1127,9 @@ select + .cbi-button { | ||
1121 | 1127 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); |
1122 | 1128 | border-radius: 4px; |
1123 | 1129 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); |
1124 | - display: inline-flex; | |
1130 | + /* display: inline-flex; */ | |
1125 | 1131 | flex-direction: column; |
1126 | - line-height: 1.2em; | |
1132 | + line-height: 1.6em; | |
1127 | 1133 | min-width: 100px; |
1128 | 1134 | } |
1129 | 1135 |
@@ -1259,8 +1265,7 @@ footer a { | ||
1259 | 1265 | |
1260 | 1266 | /* login */ |
1261 | 1267 | body.node-main-login { |
1262 | - /* background: url(bg.jpg); */ | |
1263 | - background: linear-gradient(#22b9a4, #9a87d4); | |
1268 | + background: rgba(0, 0, 0, 0.7); | |
1264 | 1269 | background-repeat: no-repeat; |
1265 | 1270 | background-size: 100% 100%; |
1266 | 1271 | -moz-background-size: 100% 100%; |
@@ -1272,8 +1277,13 @@ body.node-main-login>header { | ||
1272 | 1277 | border-bottom: none; |
1273 | 1278 | } |
1274 | 1279 | |
1280 | +body.node-main-login>header .brand { | |
1281 | + display: none; | |
1282 | +} | |
1283 | + | |
1275 | 1284 | body.node-main-login .alert-message { |
1276 | 1285 | z-index: 999; |
1286 | + display: none; | |
1277 | 1287 | } |
1278 | 1288 | |
1279 | 1289 | .node-main-login>.container>form { |
@@ -1283,32 +1293,18 @@ body.node-main-login .alert-message { | ||
1283 | 1293 | border-radius: .375rem; |
1284 | 1294 | text-align: center; |
1285 | 1295 | position: absolute; |
1286 | - top: 50%; | |
1296 | + top: 30%; | |
1287 | 1297 | left: 50%; |
1288 | 1298 | transform: translate(-50%, -50%); |
1299 | + background: #fff; | |
1289 | 1300 | } |
1290 | 1301 | |
1291 | -.node-main-login>.container>form .errorbox { | |
1292 | - color: red; | |
1302 | +.node-main-login>.container>form .errorbox, | |
1303 | +.node-main-login>.container>form .errorbox>p { | |
1304 | + color: red !important; | |
1293 | 1305 | } |
1294 | 1306 | |
1295 | -.node-main-login>.container>form>.cbi-map>h2 { | |
1296 | - width: 100px; | |
1297 | - height: 100px; | |
1298 | - color: #fff; | |
1299 | - text-align: center; | |
1300 | - letter-spacing: 4px; | |
1301 | - display: block; | |
1302 | - margin: -100px auto 15px auto; | |
1303 | - padding: 0; | |
1304 | - text-indent: -500px; | |
1305 | - overflow: hidden; | |
1306 | - border-radius: 60px; | |
1307 | - /* border: #ccc 3px solid; */ | |
1308 | - background-image: url(wifi.png); | |
1309 | - background-size: cover; | |
1310 | - /* box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4); */ | |
1311 | -} | |
1307 | +.node-main-login>.container>form>.cbi-map>h2 {} | |
1312 | 1308 | |
1313 | 1309 | .node-main-login>.container>form input[name='luci_username'], |
1314 | 1310 | .node-main-login>.container>form input[name='luci_password'] { |
@@ -1334,6 +1330,14 @@ body.node-main-login .alert-message { | ||
1334 | 1330 | text-align: center !important; |
1335 | 1331 | } |
1336 | 1332 | |
1333 | +.node-main-login>.container .cbi-button-apply { | |
1334 | + width: 100% !important; | |
1335 | +} | |
1336 | + | |
1337 | +.node-main-login>.container .cbi-button-reset { | |
1338 | + display: none; | |
1339 | +} | |
1340 | + | |
1337 | 1341 | /* luci18 */ |
1338 | 1342 | .cbi-section-table-titles.named::before { |
1339 | 1343 | content: attr(data-title) " "; |
@@ -1365,6 +1369,10 @@ body.node-main-login .alert-message { | ||
1365 | 1369 | } |
1366 | 1370 | |
1367 | 1371 | /* luci 19 */ |
1372 | +.node-main-login>header .nav { | |
1373 | + display: none; | |
1374 | +} | |
1375 | + | |
1368 | 1376 | body.modal-overlay-active { |
1369 | 1377 | overflow: hidden; |
1370 | 1378 | height: 100vh; |
@@ -1386,7 +1394,7 @@ body.modal-overlay-active #modal_overlay>.modal { | ||
1386 | 1394 | max-width: unset; |
1387 | 1395 | min-height: 32px; |
1388 | 1396 | min-width: 270px; |
1389 | - /* background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x !important; */ | |
1397 | + background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x !important; | |
1390 | 1398 | border-radius: 3px; |
1391 | 1399 | padding: 1em; |
1392 | 1400 | margin: 0; |
@@ -1427,14 +1435,14 @@ body.modal-overlay-active #modal_overlay>.modal { | ||
1427 | 1435 | |
1428 | 1436 | .modal>* { |
1429 | 1437 | flex-basis: 100%; |
1430 | - /* line-height: normal; */ | |
1438 | + line-height: normal; | |
1431 | 1439 | margin-bottom: .5em; |
1432 | 1440 | max-width: 100%; |
1433 | 1441 | } |
1434 | 1442 | |
1435 | 1443 | #modal_overlay .modal>* { |
1436 | 1444 | flex-basis: 100%; |
1437 | - /* line-height: normal; */ | |
1445 | + line-height: normal; | |
1438 | 1446 | margin-bottom: .5em; |
1439 | 1447 | } |
1440 | 1448 |
@@ -1470,10 +1478,10 @@ body.modal-overlay-active #modal_overlay>.modal { | ||
1470 | 1478 | max-width: 400px; |
1471 | 1479 | width: auto; |
1472 | 1480 | background: white; |
1473 | - /* border: 1px solid #ccc; */ | |
1481 | + border: 1px solid #ccc; | |
1474 | 1482 | border-radius: 5px; |
1475 | 1483 | box-sizing: border-box; |
1476 | - /* padding: 0 0.4em !important; */ | |
1484 | + padding: 0 0.4em !important; | |
1477 | 1485 | } |
1478 | 1486 | |
1479 | 1487 | .cbi-dynlist>.item { |
@@ -1484,7 +1492,7 @@ body.modal-overlay-active #modal_overlay>.modal { | ||
1484 | 1492 | border-radius: 3px; |
1485 | 1493 | position: relative; |
1486 | 1494 | pointer-events: none; |
1487 | - padding: 2px 2em 2px 10px; | |
1495 | + padding: 2px 2em 2px 4px; | |
1488 | 1496 | } |
1489 | 1497 | |
1490 | 1498 | .cbi-dynlist>.item::after { |
@@ -1530,9 +1538,8 @@ body.modal-overlay-active #modal_overlay>.modal { | ||
1530 | 1538 | |
1531 | 1539 | .btn.primary, |
1532 | 1540 | .cbi-button-action.important { |
1533 | - color: #fff; | |
1534 | - background: #0069d6; | |
1535 | - border: 1px solid #0069d6; | |
1541 | + border-color: #ff7700; | |
1542 | + color: #ff7700; | |
1536 | 1543 | } |
1537 | 1544 | |
1538 | 1545 | .cbi-dropdown { |
@@ -1572,21 +1579,4 @@ body.modal-overlay-active #modal_overlay>.modal { | ||
1572 | 1579 | white-space: pre; |
1573 | 1580 | overflow: hidden; |
1574 | 1581 | text-overflow: ellipsis; |
1575 | -} | |
1576 | - | |
1577 | -header [data-indicator] { | |
1578 | - padding: 1px 3px 2px; | |
1579 | - font-size: 9.75px; | |
1580 | - font-weight: bold; | |
1581 | - color: #fff !important; | |
1582 | - text-transform: uppercase; | |
1583 | - white-space: nowrap; | |
1584 | - background-color: #bfbfbf; | |
1585 | - border-radius: 3px; | |
1586 | - text-shadow: none; | |
1587 | - margin-left: .4em; | |
1588 | -} | |
1589 | - | |
1590 | -header [data-indicator][data-style="active"] { | |
1591 | - background-color: #62cffc; | |
1592 | 1582 | } |
\ No newline at end of file |
@@ -2,24 +2,44 @@ | ||
2 | 2 | Copyright 2008 Steven Barth <steven@midlink.org> |
3 | 3 | Copyright 2008 Jo-Philipp Wich <jow@openwrt.org> |
4 | 4 | Copyright 2012 David Menting <david@nut-bolt.nl> |
5 | - Copyright 2020 Lienol <lawlienol@gmail.com> | |
5 | + Copyright 2018-2020 Lienol <lawlienol@gmail.com> | |
6 | 6 | Licensed to the public under the Apache License 2.0. |
7 | 7 | -%> |
8 | 8 | |
9 | 9 | <% |
10 | 10 | local ver = require "luci.version" |
11 | + local disp = require "luci.dispatcher" | |
12 | + local request = disp.context.path | |
13 | + local category = request[1] | |
14 | + local tree = disp.node() | |
15 | + local categories = disp.node_childs(tree) | |
11 | 16 | %> |
12 | - | |
13 | 17 | <footer> |
14 | - <a href="https://github.com/Lienol/openwrt-luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %> | |
15 | - <ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul> | |
18 | + <a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %></a> / <%= ver.distversion %> | |
19 | + <% if #categories > 1 then %> | |
20 | + <ul class="breadcrumb pull-right" id="modemenu"> | |
21 | + <% for i, r in ipairs(categories) do %> | |
22 | + <li<% if request[1] == r then %> class="active"<%end%>><a href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a> <span class="divider">|</span></li> | |
23 | + <% end %> | |
24 | + </ul> | |
25 | + <% end %> | |
16 | 26 | </footer> |
27 | + </div> | |
17 | 28 | </div> |
18 | - <script type="text/javascript">L.require('menu-bootstrap')</script> | |
19 | 29 | </body> |
20 | -</html> | |
21 | -<script> | |
22 | - window.onload = function(){ | |
30 | + <script> | |
31 | + function addLoadEvent(func) { | |
32 | + var oldonload = window.onload; | |
33 | + if (typeof window.onload != 'function') { | |
34 | + window.onload = func; | |
35 | + } else { | |
36 | + window.onload = function () { | |
37 | + oldonload(); | |
38 | + func(); | |
39 | + } | |
40 | + } | |
41 | + } | |
42 | + addLoadEvent(function(){ | |
23 | 43 | var content = document.getElementsByName("content"); |
24 | 44 | var luci_username = document.getElementsByName("luci_username"); |
25 | 45 | var luci_password = document.getElementsByName("luci_password"); |
@@ -49,6 +69,6 @@ | ||
49 | 69 | } |
50 | 70 | } |
51 | 71 | } |
52 | - } | |
53 | -</script> | |
72 | + }); | |
73 | + </script> | |
54 | 74 | </html> |
@@ -1,8 +1,8 @@ | ||
1 | 1 | <%# |
2 | 2 | Copyright 2008 Steven Barth <steven@midlink.org> |
3 | - Copyright 2008-2016 Jo-Philipp Wich <jow@openwrt.org> | |
3 | + Copyright 2008 Jo-Philipp Wich <jow@openwrt.org> | |
4 | 4 | Copyright 2012 David Menting <david@nut-bolt.nl> |
5 | - Copyright 2020 Lienol <lawlienol@gmail.com> | |
5 | + Copyright 2018-2019 Lienol <lawlienol@gmail.com> | |
6 | 6 | Licensed to the public under the Apache License 2.0. |
7 | 7 | -%> |
8 | 8 |
@@ -14,24 +14,157 @@ | ||
14 | 14 | |
15 | 15 | local boardinfo = util.ubus("system", "board") |
16 | 16 | |
17 | + local request = disp.context.path | |
18 | + local request2 = disp.context.request | |
19 | + | |
20 | + local category = request[1] | |
21 | + local cattree = category and disp.node(category) | |
22 | + | |
23 | + local leaf = request2[#request2] | |
24 | + | |
25 | + local tree = disp.node() | |
17 | 26 | local node = disp.context.dispatched |
18 | 27 | |
28 | + local categories = disp.node_childs(tree) | |
29 | + | |
30 | + local c = tree | |
31 | + local i, r | |
32 | + | |
33 | + -- tag all nodes leading to this page | |
34 | + for i, r in ipairs(request) do | |
35 | + if c.nodes and c.nodes[r] then | |
36 | + c = c.nodes[r] | |
37 | + c._menu_selected = true | |
38 | + end | |
39 | + end | |
40 | + | |
19 | 41 | -- send as HTML5 |
20 | 42 | http.prepare_content("text/html") |
43 | + | |
44 | + local function nodeurl(prefix, name, query) | |
45 | + local u = url(prefix, name) | |
46 | + if query then | |
47 | + u = u .. http.build_querystring(query) | |
48 | + end | |
49 | + return pcdata(u) | |
50 | + end | |
51 | + | |
52 | + local function render_tabmenu(prefix, node, level) | |
53 | + if not level then | |
54 | + level = 1 | |
55 | + end | |
56 | + | |
57 | + local childs = disp.node_childs(node) | |
58 | + if #childs > 0 then | |
59 | + if level > 2 then | |
60 | + write('<ul class="tabs">') | |
61 | + end | |
62 | + | |
63 | + local selected_node | |
64 | + local selected_name | |
65 | + local i, v | |
66 | + | |
67 | + for i, v in ipairs(childs) do | |
68 | + local nnode = node.nodes[v] | |
69 | + if nnode._menu_selected then | |
70 | + selected_node = nnode | |
71 | + selected_name = v | |
72 | + end | |
73 | + | |
74 | + if level > 2 then | |
75 | + write('<li class="tabmenu-item-%s %s"><a href="%s">%s</a></li>' %{ | |
76 | + v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'active' or '', | |
77 | + nodeurl(prefix, v, nnode.query), | |
78 | + striptags(translate(nnode.title)) | |
79 | + }) | |
80 | + end | |
81 | + end | |
82 | + | |
83 | + if level > 2 then | |
84 | + write('</ul>') | |
85 | + end | |
86 | + | |
87 | + if selected_node then | |
88 | + render_tabmenu(prefix .. "/" .. selected_name, selected_node, level + 1) | |
89 | + end | |
90 | + end | |
91 | + end | |
92 | + | |
93 | + local function render_submenu(prefix, node) | |
94 | + local childs = disp.node_childs(node) | |
95 | + if #childs > 0 then | |
96 | + write('<ul class="dropdown-menu">') | |
97 | + | |
98 | + for i, r in ipairs(childs) do | |
99 | + local nnode = node.nodes[r] | |
100 | + write('<li><a href="%s">%s</a></li>' %{ | |
101 | + nodeurl(prefix, r, nnode.query), | |
102 | + pcdata(striptags(translate(nnode.title))) | |
103 | + }) | |
104 | + end | |
105 | + | |
106 | + write('</ul>') | |
107 | + end | |
108 | + end | |
109 | + | |
110 | + local function render_topmenu() | |
111 | + local childs = disp.node_childs(cattree) | |
112 | + if #childs > 0 then | |
113 | + write('<ul class="nav">') | |
114 | + | |
115 | + for i, r in ipairs(childs) do | |
116 | + local nnode = cattree.nodes[r] | |
117 | + local grandchildren = disp.node_childs(nnode) | |
118 | + | |
119 | + if #grandchildren > 0 then | |
120 | + write('<li class="dropdown"><a class="menu" href="#">%s</a>' % pcdata(striptags(translate(nnode.title)))) | |
121 | + render_submenu(category .. "/" .. r, nnode) | |
122 | + write('</li>') | |
123 | + else | |
124 | + write('<li><a href="%s">%s</a></li>' %{ | |
125 | + nodeurl(category, r, nnode.query), | |
126 | + pcdata(striptags(translate(nnode.title))) | |
127 | + }) | |
128 | + end | |
129 | + end | |
130 | + | |
131 | + write('</ul>') | |
132 | + end | |
133 | + end | |
134 | + | |
135 | + local function render_changes() | |
136 | + -- calculate the number of unsaved changes | |
137 | + if tree.nodes[category] and tree.nodes[category].ucidata then | |
138 | + local ucichanges = 0 | |
139 | + | |
140 | + for i, j in pairs(require("luci.model.uci").cursor():changes()) do | |
141 | + for k, l in pairs(j) do | |
142 | + for m, n in pairs(l) do | |
143 | + ucichanges = ucichanges + 1; | |
144 | + end | |
145 | + end | |
146 | + end | |
147 | + | |
148 | + if ucichanges > 0 then | |
149 | + write('<a class="uci_change_indicator label notice" href="%s?redir=%s">%s: %d</a>' %{ | |
150 | + url(category, 'uci/changes'), | |
151 | + http.urlencode(http.formvalue('redir') or table.concat(disp.context.request, "/")), | |
152 | + translate('Unsaved Changes'), | |
153 | + ucichanges | |
154 | + }) | |
155 | + end | |
156 | + end | |
157 | + end | |
21 | 158 | -%> |
22 | 159 | <!DOCTYPE html> |
23 | 160 | <html lang="<%=luci.i18n.context.lang%>"> |
24 | -<style> | |
25 | -body { | |
26 | - margin-top: unset !important | |
27 | -} | |
28 | -</style> | |
29 | 161 | <head> |
30 | 162 | <meta charset="utf-8"> |
31 | 163 | <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title> |
164 | + <!--[if lt IE 9]><script src="<%=media%>/html5.js"></script><![endif]--> | |
32 | 165 | <meta name="viewport" content="initial-scale=1.0"> |
33 | 166 | <link rel="stylesheet" href="<%=media%>/cascade.css"> |
34 | - <link rel="stylesheet" media="only screen and (max-device-width: 1600px)" href="<%=media%>/mobile.css" type="text/css" /> | |
167 | + <link rel="stylesheet" media="only screen and (max-width: 1600px)" href="<%=media%>/mobile.css" type="text/css" /> | |
35 | 168 | <link rel="shortcut icon" href="<%=media%>/favicon.ico"> |
36 | 169 | <% if node and node.css then %> |
37 | 170 | <link rel="stylesheet" href="<%=resource%>/<%=node.css%>"> |
@@ -39,38 +172,45 @@ body { | ||
39 | 172 | <% if css then %> |
40 | 173 | <style title="text/css"><%= css %></style> |
41 | 174 | <% end -%> |
42 | - <script src="<%=url('admin/translations', luci.i18n.context.lang)%>"></script> | |
175 | + | |
176 | + <!-- <script src="<%=url('admin/translations', luci.i18n.context.lang)%>"></script> --> | |
43 | 177 | <script src="<%=resource%>/cbi.js"></script> |
44 | - <!-- <script src="<%=resource%>/xhr.js"></script> --> | |
178 | + <script src="<%=resource%>/xhr.js"></script> | |
45 | 179 | </head> |
46 | - | |
47 | - <body class="lang_<%=luci.i18n.context.lang%> <% if node then %><%= striptags( node.title ) %><%- end %>" data-page="<%= pcdata(table.concat(disp.context.requestpath, "-")) %>"> | |
180 | + | |
181 | + <body class="lang_<%=luci.i18n.context.lang%> <% if node then %><%= striptags( node.title ) %><%- end %>" data-page="<%= table.concat(disp.context.requestpath, "-") %>"> | |
48 | 182 | <header> |
49 | 183 | <div class="fill"> |
50 | 184 | <div class="container"> |
51 | - <a class="brand" href="/"><%=boardinfo.hostname or "?"%></a> | |
52 | - <ul class="nav" id="topmenu" style="display:none"></ul> | |
53 | - <div id="indicators" class="pull-right"></div> | |
185 | + <a class="brand" href="#"><%=boardinfo.hostname or "?"%></a> | |
186 | + <% render_topmenu() %> | |
187 | + <div class="pull-right"> | |
188 | + <% render_changes() %> | |
189 | + <span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()"> | |
190 | + <span class="label success" id="xhr_poll_status_on"><span class="mobile-hide"><%:Auto Refresh%> </span><%:on%></span> | |
191 | + <span class="label" id="xhr_poll_status_off" style="display:none"><span class="mobile-hide"><%:Auto Refresh%> </span><%:off%></span> | |
192 | + </span> | |
193 | + </div> | |
54 | 194 | </div> |
55 | 195 | </div> |
56 | 196 | </header> |
57 | 197 | |
58 | - <div id="maincontent" class="container"> | |
59 | - <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> | |
198 | + <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> | |
199 | + <div class="container"> | |
60 | 200 | <div class="alert-message warning"> |
61 | 201 | <h4><%:No password set!%></h4> |
62 | - <p><%:There is no password set on this router. Please configure a root password to protect the web interface.%></p> | |
63 | - <% if disp.lookup("admin/system/admin") then %> | |
64 | - <div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div> | |
65 | - <% end %> | |
202 | + <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%><br> | |
203 | + <a href="<%=pcdata(luci.dispatcher.build_url("admin/system/admin"))%>"><%:Go to password configuration...%></a> | |
66 | 204 | </div> |
67 | - <%- end -%> | |
205 | + </div> | |
206 | + <%- end -%> | |
68 | 207 | |
69 | - <noscript> | |
70 | - <div class="alert-message warning"> | |
71 | - <h4><%:JavaScript required!%></h4> | |
72 | - <p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p> | |
73 | - </div> | |
74 | - </noscript> | |
208 | + <noscript> | |
209 | + <div class="alert-message warning"> | |
210 | + <strong><%:JavaScript required!%></strong><br /> | |
211 | + <%:You must enable JavaScript in your browser or LuCI will not work properly.%> | |
212 | + </div> | |
213 | + </noscript> | |
75 | 214 | |
76 | - <div id="tabmenu" style="display:none"></div> | |
\ No newline at end of file | ||
215 | + <div id="maincontent" class="container"> | |
216 | + <% if category then render_tabmenu(category, cattree) end %> |