Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-theme-bootstrap: various tweaks and cleanups

Browse source 
- introduce new variable --text-color-highest which results in #000/#fff
   for bright and dark modes respectively
 - drop unused navigation style rules and selectors
 - use sticky positioning for header bar and drop top margin hacks
 - use flex box layout for header bar contents
 - use uniform line-height for button elements instead of pixel paddings
 - fix too bright .cbi-value bottom border in mobile dark mode
 - avoid rendering duplicate .cbi-value bottom borders for nested sections
 - simplify header markup, get rid of unused container elements
 - use non-wrapping flex box layout for page actions, prioritize primary
   action button in automatic width calculation
 - fix border radius of ifacebox headers
 - use brightest color for log output textareas
 - fix dark mode colors for mode menu
 - use flex layout for footer

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2021-10-09 00:30:48 +02:00
parent 28b9663660
commit 588e24f9ca
5 changed files with 88 additions and 212 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

222
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
View file

@ -31,19 +31,24 @@
--background-color-low-l: calc(var(--background-color-high-l) + var(--background-color-delta-l-sign) * var(--background-color-low-delta-l)); --background-color-low-l: calc(var(--background-color-high-l) + var(--background-color-delta-l-sign) * var(--background-color-low-delta-l));
--background-color-low: hsl(var(--background-color-low-h), var(--background-color-low-s), var(--background-color-low-l)); --background-color-low: hsl(var(--background-color-low-h), var(--background-color-low-s), var(--background-color-low-l));
--text-color-delta-l-sign: 1; --text-color-delta-l-sign: 1;
--text-color-high-h: 0; --text-color-highest-h: 0;
--text-color-high-s: 0%; --text-color-highest-s: 0%;
--text-color-high-l: calc(64 / 255 * 100%); --text-color-highest-l: 0%;
--text-color-highest: hsl(var(--text-color-highest-h), var(--text-color-highest-s), var(--text-color-highest-l));
--text-color-high-h: var(--text-color-highest-h);
--text-color-high-s: var(--text-color-highest-s);
--text-color-high-delta-l: calc(64 / 255 * 100%);
--text-color-high-l: calc(var(--text-color-highest-l) + var(--text-color-delta-l-sign) * var(--text-color-high-delta-l));
--text-color-high: hsl(var(--text-color-high-h), var(--text-color-high-s), var(--text-color-high-l)); --text-color-high: hsl(var(--text-color-high-h), var(--text-color-high-s), var(--text-color-high-l));
--text-color-medium-h: var(--text-color-high-h); --text-color-medium-h: var(--text-color-highest-h);
--text-color-medium-s: var(--text-color-high-s); --text-color-medium-s: var(--text-color-highest-s);
--text-color-medium-delta-l: calc(64 / 255 * 100%); --text-color-medium-delta-l: calc(128 / 255 * 100%);
--text-color-medium-l: calc(var(--text-color-high-l) + var(--text-color-delta-l-sign) * var(--text-color-medium-delta-l)); --text-color-medium-l: calc(var(--text-color-highest-l) + var(--text-color-delta-l-sign) * var(--text-color-medium-delta-l));
--text-color-medium: hsl(var(--text-color-medium-h), var(--text-color-medium-s), var(--text-color-medium-l)); --text-color-medium: hsl(var(--text-color-medium-h), var(--text-color-medium-s), var(--text-color-medium-l));
--text-color-low-h: var(--text-color-high-h); --text-color-low-h: var(--text-color-highest-h);
--text-color-low-s: var(--text-color-high-s); --text-color-low-s: var(--text-color-highest-s);
--text-color-low-delta-l: calc(127 / 255 * 100%); --text-color-low-delta-l: calc(191 / 255 * 100%);
--text-color-low-l: calc(var(--text-color-high-l) + var(--text-color-delta-l-sign) * var(--text-color-low-delta-l)); --text-color-low-l: calc(var(--text-color-highest-l) + var(--text-color-delta-l-sign) * var(--text-color-low-delta-l));
--text-color-low: hsl(var(--text-color-low-h), var(--text-color-low-s), var(--text-color-low-l)); --text-color-low: hsl(var(--text-color-low-h), var(--text-color-low-s), var(--text-color-low-l));
--border-color-delta-l-sign: -1; --border-color-delta-l-sign: -1;
--border-color-high-h: var(--background-color-high-h); --border-color-high-h: var(--background-color-high-h);
@ -72,9 +77,9 @@
--background-color-high-s: 0%; --background-color-high-s: 0%;
--background-color-high-l: calc(34 / 255 * 100%); --background-color-high-l: calc(34 / 255 * 100%);
--text-color-delta-l-sign: -1; --text-color-delta-l-sign: -1;
--text-color-high-h: 0; --text-color-highest-h: 0;
--text-color-high-s: 0%; --text-color-highest-s: 0%;
--text-color-high-l: 100%; --text-color-highest-l: 100%;
--border-color-delta-l-sign: 1; --border-color-delta-l-sign: 1;
} }
} }
@ -119,13 +124,6 @@ a:hover, a:active {
outline: 0; outline: 0;
} }
footer,
header,
nav,
section {
display: block;
}
sub, sup { sub, sup {
font-size: 75%; font-size: 75%;
line-height: 0; line-height: 0;
@ -154,7 +152,7 @@ textarea {
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
vertical-align: baseline; vertical-align: baseline;
line-height: normal; line-height: 2em;
} }
button::-moz-focus-inner, input::-moz-focus-inner { button::-moz-focus-inner, input::-moz-focus-inner {
@ -203,8 +201,7 @@ body {
font-weight: normal; font-weight: normal;
line-height: 18px; line-height: 18px;
color: var(--text-color-high); color: var(--text-color-high);
padding: 18px 5px 5px 5px; padding: 5px;
margin-top: 40px;
} }
.container { .container {
@ -215,16 +212,6 @@ body {
zoom: 1; zoom: 1;
} }
.container:before, .container:after {
display: table;
content: "";
zoom: 1;
}
.container:after {
clear: both;
}
a { a {
color: #0069d6; color: #0069d6;
text-decoration: none; text-decoration: none;
@ -834,13 +821,13 @@ textarea[readonly] {
* Repeatable UI elements outside the base styles provided from the scaffolding * Repeatable UI elements outside the base styles provided from the scaffolding
* ---------------------------------------------------------------------------- */ * ---------------------------------------------------------------------------- */
header { header {
position: fixed; position: sticky;
top: 0; top: 0;
left: 0;
right: 0;
z-index: 800; z-index: 800;
overflow: visible; overflow: visible;
color: #BFBFBF; color: #BFBFBF;
margin: -5px -5px 15px -5px;
display: flex;
} }
header a { header a {
@ -848,18 +835,14 @@ header a {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
} }
header h3 a:hover, header .brand:hover, header ul .active > a { header .brand:hover, header ul .active > a {
background-color: #333; background-color: #333;
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
header h3 { header .brand {
position: relative;
}
header h3 a, header .brand {
float: left; float: left;
display: block; display: block;
padding: 8px 20px 12px; padding: 8px 20px 12px;
@ -875,7 +858,7 @@ header p {
line-height: 40px; line-height: 40px;
} }
header .fill { header {
background-color: #222; background-color: #222;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: linear-gradient(to bottom, #333333, #222222); background-image: linear-gradient(to bottom, #333333, #222222);
@ -883,7 +866,7 @@ header .fill {
padding: 0 5px; padding: 0 5px;
} }
header div > ul, .nav { .nav {
display: block; display: block;
float: left; float: left;
margin: 0 10px 0 0; margin: 0 10px 0 0;
@ -891,12 +874,12 @@ header div > ul, .nav {
left: 0; left: 0;
} }
header div > ul > li, .nav > li { .nav > li {
display: block; display: block;
float: left; float: left;
} }
header div > ul a, .nav a { .nav a {
display: block; display: block;
float: none; float: none;
padding: 10px 10px 11px; padding: 10px 10px 11px;
@ -904,83 +887,34 @@ header div > ul a, .nav a {
text-decoration: none; text-decoration: none;
} }
header div > ul a:hover, .nav a:hover { .nav a:hover {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
header div > ul .active > a, .nav .active > a { .nav .active > a {
background-color: #222; background-color: #222;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
header div > ul.secondary-nav, .nav.secondary-nav { .nav a.menu:hover {
float: right;
margin-left: 10px;
margin-right: 0;
}
header div > ul.secondary-nav .menu-dropdown,
.nav.secondary-nav .menu-dropdown,
header div > ul.secondary-nav .dropdown-menu,
.nav.secondary-nav .dropdown-menu {
right: 0;
border: 0;
}
header div > ul a.menu:hover,
.nav a.menu:hover,
header div > ul li.open .menu,
.nav li.open .menu,
header div > ul .dropdown-toggle:hover,
.nav .dropdown-toggle:hover,
header div > ul .dropdown.open .dropdown-toggle,
.nav .dropdown.open .dropdown-toggle {
background: #444; background: #444;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
} }
header div > ul .menu-dropdown,
.nav .menu-dropdown,
header div > ul .dropdown-menu,
.nav .dropdown-menu { .nav .dropdown-menu {
background-color: #333; background-color: #333;
} }
header div > ul .menu-dropdown a.menu, .nav .dropdown-menu a.menu {
.nav .menu-dropdown a.menu,
header div > ul .dropdown-menu a.menu,
.nav .dropdown-menu a.menu,
header div > ul .menu-dropdown .dropdown-toggle,
.nav .menu-dropdown .dropdown-toggle,
header div > ul .dropdown-menu .dropdown-toggle,
.nav .dropdown-menu .dropdown-toggle {
color: #fff; color: #fff;
} }
header div > ul .menu-dropdown a.menu.open,
.nav .menu-dropdown a.menu.open,
header div > ul .dropdown-menu a.menu.open,
.nav .dropdown-menu a.menu.open,
header div > ul .menu-dropdown .dropdown-toggle.open,
.nav .menu-dropdown .dropdown-toggle.open,
header div > ul .dropdown-menu .dropdown-toggle.open,
.nav .dropdown-menu .dropdown-toggle.open {
background: #444;
background: rgba(255, 255, 255, 0.05);
}
header div > ul .menu-dropdown li a,
.nav .menu-dropdown li a,
header div > ul .dropdown-menu li a,
.nav .dropdown-menu li a { .nav .dropdown-menu li a {
color: #999; color: #999;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
} }
header div > ul .menu-dropdown li a:hover,
.nav .menu-dropdown li a:hover,
header div > ul .dropdown-menu li a:hover,
.nav .dropdown-menu li a:hover { .nav .dropdown-menu li a:hover {
background-color: #191919; background-color: #191919;
background-repeat: repeat-x; background-repeat: repeat-x;
@ -988,22 +922,11 @@ header div > ul .dropdown-menu li a:hover,
color: #fff; color: #fff;
} }
header div > ul .menu-dropdown .active a,
.nav .menu-dropdown .active a,
header div > ul .dropdown-menu .active a,
.nav .dropdown-menu .active a { .nav .dropdown-menu .active a {
color: #fff; color: #fff;
} }
header div > ul .menu-dropdown .divider, .nav .dropdown-menu li a {
.nav .menu-dropdown .divider,
header div > ul .dropdown-menu .divider,
.nav .dropdown-menu .divider {
background-color: #222;
border-color: #444;
}
header ul .menu-dropdown li a, header ul .dropdown-menu li a {
padding: 4px 15px; padding: 4px 15px;
} }
@ -1011,7 +934,7 @@ li.menu, .dropdown {
position: relative; position: relative;
} }
a.menu:after, .dropdown-toggle:after { a.menu:after {
width: 0; width: 0;
height: 0; height: 0;
display: inline-block; display: inline-block;
@ -1026,7 +949,7 @@ a.menu:after, .dropdown-toggle:after {
opacity: 0.5; opacity: 0.5;
} }
.menu-dropdown, .dropdown-menu { .dropdown-menu {
background-color: #fff; background-color: #fff;
float: left; float: left;
position: absolute; position: absolute;
@ -1049,21 +972,13 @@ a.menu:after, .dropdown-toggle:after {
background-clip: padding-box; background-clip: padding-box;
} }
.menu-dropdown li, .dropdown-menu li { .dropdown-menu li {
float: none; float: none;
display: block; display: block;
background-color: transparent; background-color: transparent;
} }
.menu-dropdown .divider, .dropdown-menu .divider { .dropdown-menu a {
height: 1px;
margin: 5px 0;
overflow: hidden;
background-color: #eee;
border-bottom: 1px solid #fff;
}
header .dropdown-menu a, .dropdown-menu a {
display: block; display: block;
padding: 4px 15px; padding: 4px 15px;
clear: both; clear: both;
@ -1073,10 +988,7 @@ header .dropdown-menu a, .dropdown-menu a {
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
} }
header .dropdown-menu a:hover, .dropdown-menu a:hover {
.dropdown-menu a:hover,
header .dropdown-menu a.hover,
.dropdown-menu a.hover {
background-color: #ddd; background-color: #ddd;
background-repeat: repeat-x; background-repeat: repeat-x;
background-image: linear-gradient(to bottom, #eee, #ddd); background-image: linear-gradient(to bottom, #eee, #ddd);
@ -1085,22 +997,6 @@ header .dropdown-menu a.hover,
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
} }
.open .menu,
.dropdown.open .menu,
.open .dropdown-toggle,
.dropdown.open .dropdown-toggle {
color: #fff;
background: #ccc;
background: rgba(0, 0, 0, 0.3);
}
.open .menu-dropdown,
.dropdown.open .menu-dropdown,
.open .dropdown-menu,
.dropdown.open .dropdown-menu {
left: 0;
}
.dropdown:hover ul.dropdown-menu { .dropdown:hover ul.dropdown-menu {
left: 0; left: 0;
} }
@ -1231,32 +1127,34 @@ header .dropdown-menu a.hover,
.breadcrumb { .breadcrumb {
padding: 7px 14px; padding: 7px 14px;
margin: 0 0 18px; margin: 0 0 18px;
background-color: #f5f5f5; background: linear-gradient(to bottom, var(--background-color-high), var(--background-color-low));
background-repeat: repeat-x; border: 1px solid var(--border-color-medium);
background-image: linear-gradient(to bottom, #fff, #f5f5f5);
border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 1px 0 #fff; display: flex;
flex: 0;
} }
.breadcrumb li { .breadcrumb li {
display: inline; list-style: none;
text-shadow: 0 1px 0 #fff;
} }
.breadcrumb .divider { .breadcrumb li:not(:last-child)::after {
content: "|";
padding: 0 5px; padding: 0 5px;
color: #bfbfbf;
} }
.breadcrumb .active a { .breadcrumb .active a {
color: #404040; color: var(--text-color-medium);
} }
footer { footer {
margin-top: 17px;
padding-top: 17px; padding-top: 17px;
margin-top: 17px;
border-top: 1px solid var(--border-color-low); border-top: 1px solid var(--border-color-low);
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
} }
#modal_overlay { #modal_overlay {
@ -1377,11 +1275,11 @@ body.modal-overlay-active #modal_overlay {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--border-color-low)) no-repeat; background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--border-color-low)) no-repeat;
padding: 5px 14px 6px; padding: 0 14px;
text-shadow: 0 1px 1px hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.75); text-shadow: 0 1px 1px hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.75);
color: var(--text-color-high); color: var(--text-color-high);
font-size: 13px; font-size: 13px;
line-height: normal; line-height: 2em;
border: 1px solid var(--border-color-high); border: 1px solid var(--border-color-high);
border-radius: 4px; border-radius: 4px;
box-shadow: inset 0 1px 0 hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.2), 0 1px 2px hsla(var(--text-color-high-h), var(--text-color-high-s), var(--text-color-high-l), 0.05); box-shadow: inset 0 1px 0 hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.2), 0 1px 2px hsla(var(--text-color-high-h), var(--text-color-high-s), var(--text-color-high-l), 0.05);
@ -1935,11 +1833,14 @@ header [data-indicator][data-style="active"] {
form.inline { display: inline; margin-bottom: 0; } form.inline { display: inline; margin-bottom: 0; }
header .pull-right { padding-top: 8px; } header .pull-right { padding-top: 8px; margin-left: auto; }
#modemenu li:last-child span.divider { display: none } #modemenu li:last-child span.divider { display: none }
#syslog { width: 100%; } #syslog {
width: 100%;
color: var(--text-color-highest);
}
.cbi-section-table .tr:hover .td, .cbi-section-table .tr:hover .td,
.cbi-section-table .tr:hover .th, .cbi-section-table .tr:hover .th,
@ -2061,7 +1962,7 @@ table table td,
background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--background-color-medium)); background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--background-color-medium));
text-shadow: 0 1px 1px hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.75); text-shadow: 0 1px 1px hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.75);
border-radius: 4px; border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 hsla(var(--text-color-low-h), var(--text-color-low-s), var(--text-color-low-l), 0.2), 0 1px 2px hsla(var(--text-color-highest-h), var(--text-color-highest-s), var(--text-color-highest-l), 0.05);
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
line-height: 1.2em; line-height: 1.2em;
@ -2070,6 +1971,7 @@ table table td,
.ifacebox .ifacebox-head { .ifacebox .ifacebox-head {
border-bottom: 1px solid var(--border-color-high); border-bottom: 1px solid var(--border-color-high);
border-radius: 4px 4px 0 0;
padding: 2px; padding: 2px;
background: #eee; background: #eee;
color: #404040; color: #404040;

45
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css
View file

@ -3,10 +3,6 @@ header h3 a, header .brand {
} }
@media screen and (max-device-width: 600px) { @media screen and (max-device-width: 600px) {
#maincontent.container {
margin-top: 30px;
}
.tabs, .cbi-tabmenu { .tabs, .cbi-tabmenu {
background: linear-gradient(var(--background-color-high) 20%, var(--border-color-medium) 100%); background: linear-gradient(var(--background-color-high) 20%, var(--border-color-medium) 100%);
background-size: 1px 34px; background-size: 1px 34px;
@ -163,10 +159,16 @@ header h3 a, header .brand {
.cbi-value { .cbi-value {
padding-bottom: .5em; padding-bottom: .5em;
border-bottom: 1px solid var(--border-color-medium); border-bottom: 1px solid var(--border-color-high);
margin-bottom: .5em; margin-bottom: .5em;
} }
.cbi-value .cbi-value:last-child {
border-bottom: none;
padding-bottom: inherit;
margin-bottom: inherit;
}
.cbi-value label.cbi-value-title { .cbi-value label.cbi-value-title {
float: none; float: none;
font-weight: bold; font-weight: bold;
@ -221,9 +223,9 @@ header h3 a, header .brand {
margin: 0; margin: 0;
} }
.btn, .cbi-button { button, .btn, .cbi-button {
font-size: 14px !important; font-size: 14px !important;
padding: 4px 8px; padding: 0 8px;
} }
.actions, .actions,
@ -279,10 +281,6 @@ header h3 a, header .brand {
top: 23px; top: 23px;
} }
body {
padding-top: 30px;
}
.cbi-optionals, .cbi-optionals,
.cbi-section-create { .cbi-section-create {
padding: 0 0 14px 0; padding: 0 0 14px 0;
@ -340,34 +338,34 @@ header h3 a, header .brand {
} }
@media screen and (max-device-width: 375px) { @media screen and (max-device-width: 375px) {
#maincontent.container {
margin-top: 55px;
}
.cbi-page-actions { .cbi-page-actions {
display: flex; display: flex;
flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
margin: 0 -1px; margin: 0 -1px;
padding: 0; padding: 0;
} }
.cbi-page-actions .cbi-button:not(.cbi-dropdown) { .cbi-page-actions button {
flex: 1 1 calc(50% - 2px);
margin: 1px !important;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.cbi-page-actions .cbi-button {
flex: 1;
margin: 1px !important;
line-height: 2em;
}
.cbi-page-actions .cbi-button-negative, .cbi-page-actions .cbi-button-negative,
.cbi-page-actions .cbi-button-primary, .cbi-page-actions .cbi-button-primary,
.cbi-page-actions .cbi-button-apply { .cbi-page-actions .cbi-button-apply {
flex-basis: calc(100% - -2px); flex: 3;
} }
.cbi-section-actions .cbi-button { .cbi-section-actions .cbi-button {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 1px !important;
} }
body[data-page="admin-network-wireless"] .td[data-name="_badge"] { body[data-page="admin-network-wireless"] .td[data-name="_badge"] {
@ -391,12 +389,6 @@ header h3 a, header .brand {
} }
} }
@media screen and (max-device-width: 200px) {
#maincontent.container {
margin-top: 230px;
}
}
@media screen and (max-width: 375px) { @media screen and (max-width: 375px) {
.td .ifacebox { .td .ifacebox {
width: 100%; width: 100%;
@ -407,6 +399,7 @@ header h3 a, header .brand {
.td .ifacebox .ifacebox-head { .td .ifacebox .ifacebox-head {
min-width: 25%; min-width: 25%;
justify-content: space-around; justify-content: space-around;
border-radius: 4px 0 0 4px;
} }
.td .ifacebox .ifacebox-head, .td .ifacebox .ifacebox-head,

19
themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js
View file

@ -22,14 +22,6 @@ return baseclass.extend({
if (node) if (node)
this.renderTabMenu(node, url); this.renderTabMenu(node, url);
} }
document.addEventListener('poll-start', this.handleBodyMargin);
document.addEventListener('poll-stop', this.handleBodyMargin);
document.addEventListener('uci-new-changes', this.handleBodyMargin);
document.addEventListener('uci-clear-changes', this.handleBodyMargin);
window.addEventListener('resize', this.handleBodyMargin);
this.handleBodyMargin();
}, },
renderTabMenu: function(tree, url, level) { renderTabMenu: function(tree, url, level) {
@ -96,9 +88,7 @@ return baseclass.extend({
var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0); var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
ul.appendChild(E('li', { 'class': isActive ? 'active' : null }, [ ul.appendChild(E('li', { 'class': isActive ? 'active' : null }, [
E('a', { 'href': L.url(children[i].name) }, [ _(children[i].title) ]), E('a', { 'href': L.url(children[i].name) }, [ _(children[i].title) ])
' ',
E('span', { 'class': 'divider' }, [ '|' ])
])); ]));
if (isActive) if (isActive)
@ -107,12 +97,5 @@ return baseclass.extend({
if (ul.children.length > 1) if (ul.children.length > 1)
ul.style.display = ''; ul.style.display = '';
},
handleBodyMargin: function(ev) {
var body = document.querySelector('body'),
head = document.querySelector('header');
body.style.marginTop = head.offsetHeight + 'px';
} }
}); });

4
themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/footer.htm
View file

@ -8,7 +8,9 @@
<% local ver = require "luci.version" %> <% local ver = require "luci.version" %>
<footer> <footer>
<a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %> <span>
<a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %>
</span>
<ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul> <ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul>
</footer> </footer>
</div> </div>

10
themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm
View file

@ -39,13 +39,9 @@
<body class="lang_<%=luci.i18n.context.lang%> <% if node then %><%= striptags( node.title ) %><%- end %>" data-page="<%= pcdata(table.concat(disp.context.requestpath, "-")) %>"> <body class="lang_<%=luci.i18n.context.lang%> <% if node then %><%= striptags( node.title ) %><%- end %>" data-page="<%= pcdata(table.concat(disp.context.requestpath, "-")) %>">
<header> <header>
<div class="fill"> <a class="brand" href="/"><%=striptags(boardinfo.hostname or "?")%></a>
<div class="container"> <ul class="nav" id="topmenu" style="display:none"></ul>
<a class="brand" href="/"><%=striptags(boardinfo.hostname or "?")%></a> <div id="indicators" class="pull-right"></div>
<ul class="nav" id="topmenu" style="display:none"></ul>
<div id="indicators" class="pull-right"></div>
</div>
</div>
</header> </header>
<div id="maincontent" class="container"> <div id="maincontent" class="container">