web_kbn: update bootstrap to 5.3, add auto-dark-mode support

This commit is contained in:
Evgeny Zinoviev 2024-02-19 02:09:27 +03:00
parent 3741f7cf78
commit 838b01c548
8 changed files with 36 additions and 24 deletions

View File

@ -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()

View File

@ -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;

View File

@ -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) {
@ -260,4 +260,17 @@ 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();
}
})()

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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">

View File

@ -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 %}