web_kbn: update bootstrap to 5.3, add auto-dark-mode support
This commit is contained in:
parent
3741f7cf78
commit
838b01c548
@ -40,17 +40,18 @@ class WebKbnConfig(AppConfigUnit):
|
||||
|
||||
common_static_files = [
|
||||
'bootstrap.min.css',
|
||||
'bootstrap.min.js',
|
||||
'bootstrap.bundle.min.js',
|
||||
'polyfills.js',
|
||||
'app.js',
|
||||
'app.css'
|
||||
]
|
||||
static_version = 3
|
||||
routes = web.RouteTableDef()
|
||||
webkbn_strings = Translation('web_kbn')
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
|
||||
def get_js_link(file, version) -> str:
|
||||
def get_js_link(file, version=static_version) -> str:
|
||||
if is_development_mode():
|
||||
version = int(time.time())
|
||||
if version:
|
||||
@ -58,7 +59,7 @@ def get_js_link(file, version) -> str:
|
||||
return f'<script src="{config.app_config["assets_public_path"]}/{file}" type="text/javascript"></script>'
|
||||
|
||||
|
||||
def get_css_link(file, version) -> str:
|
||||
def get_css_link(file, version=static_version) -> str:
|
||||
if is_development_mode():
|
||||
version = int(time.time())
|
||||
if version:
|
||||
@ -71,7 +72,6 @@ def get_head_static(files=None) -> str:
|
||||
if files is None:
|
||||
files = []
|
||||
for file in common_static_files + files:
|
||||
v = 2
|
||||
try:
|
||||
q_ind = file.index('?')
|
||||
v = file[q_ind+1:]
|
||||
@ -80,9 +80,9 @@ def get_head_static(files=None) -> str:
|
||||
pass
|
||||
|
||||
if file.endswith('.js'):
|
||||
buf.write(get_js_link(file, v))
|
||||
buf.write(get_js_link(file))
|
||||
else:
|
||||
buf.write(get_css_link(file, v))
|
||||
buf.write(get_css_link(file))
|
||||
return buf.getvalue()
|
||||
|
||||
|
||||
|
@ -188,14 +188,14 @@
|
||||
a.camzone {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: var(--bs-dark);
|
||||
color: var(--bs-body-color);
|
||||
flex: 0 0 calc(50% - 10px);
|
||||
height: 100px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
/*border: 1px solid #ccc;*/
|
||||
background: #f0f2f4;
|
||||
background: var(--bs-secondary-bg);
|
||||
border-radius: 4px;
|
||||
word-wrap: break-word;
|
||||
text-overflow: ellipsis;
|
||||
|
@ -102,7 +102,7 @@ function removeClass(el, name) {
|
||||
}
|
||||
|
||||
function indexInit() {
|
||||
var blocks = ['zones', 'all'];
|
||||
var blocks = ['zones', 'list'];
|
||||
for (var i = 0; i < blocks.length; i++) {
|
||||
var button = ge('cam_'+blocks[i]+'_btn');
|
||||
button.addEventListener('click', function(e) {
|
||||
@ -261,3 +261,16 @@ var Inverter = {
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
(function () {
|
||||
var htmlElement = document.querySelector("html")
|
||||
if (htmlElement.getAttribute("data-bs-theme") === 'auto') {
|
||||
function updateTheme() {
|
||||
document.querySelector("html").setAttribute("data-bs-theme", window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light")
|
||||
}
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);
|
||||
updateTheme();
|
||||
}
|
||||
})()
|
||||
|
7
web/kbn_assets/bootstrap.bundle.min.js
vendored
Normal file
7
web/kbn_assets/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
web/kbn_assets/bootstrap.min.css
vendored
7
web/kbn_assets/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
7
web/kbn_assets/bootstrap.min.js
vendored
7
web/kbn_assets/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@ -18,7 +18,7 @@
|
||||
{% endmacro %}
|
||||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<html data-bs-theme="auto">
|
||||
<head>
|
||||
<title>{{ title }}</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
|
@ -31,7 +31,7 @@
|
||||
<nav class="mt-4">
|
||||
<div class="nav nav-tabs" id="nav-tab">
|
||||
<button class="nav-link active" type="button" id="cam_zones_btn" data-id="zones">{{ "cams_by_zone"|lang }}</button>
|
||||
<button class="nav-link" type="button" id="cam_all_btn" data-id="all">{{ "cams_all"|lang }}</button>
|
||||
<button class="nav-link" type="button" id="cam_list_btn" data-id="list">{{ "cams_list"|lang }}</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<ul class="list-group list-group-flush" id="cam_all" style="display: none">
|
||||
<ul class="list-group list-group-flush" id="cam_list" style="display: none">
|
||||
{% for id in allcams %}
|
||||
<li class="list-group-item"><a href="/cams.cgi?id={{ id }}">{{ id|lang('ipcam') }}</a></li>
|
||||
{% endfor %}
|
||||
|
Loading…
x
Reference in New Issue
Block a user