CCCHH/hmdooris
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

More design adjustments
All checks were successful
docker-image / docker (push) Successful in 1m27s
Details

Browse source
This commit is contained in:
Stefan Bethke 2025-05-30 16:59:09 +02:00
commit de861bc475
2 changed files with 33 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

33
hmdooris/static/main.css
View file

@ -12,8 +12,19 @@ body {
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
#locks {
width: 40em;
max-width: 40em;
}
.lock__line {
@ -23,8 +34,7 @@ body {
}
.lock__line * {
flex-grow: 1;
font-size: 1.2rem;
/*flex-grow: 1;*/
}
.lock__state-and-label {
@ -43,12 +53,23 @@ body {
}
.lock__line button {
min-width: 8rem;
min-width: 5rem;
margin: 0.1rem 0.5rem;
padding: 0.1rem 0.5rem;
border-radius: 2rem;
background-color: white;
color: black;
}
.lock__line button.lock__button__lock {
background-color: #f88;
}
.lock__line button.lock__button__unlock {
background-color: #8f8;
}
.lock__line button.lock__button__lock:disabled, .lock__line button.lock__button__unlock:disabled {
background-color: #ccc;
}
.lock__line .lock__state-icon {
@ -79,7 +100,7 @@ svg.icon {
}
.legend {
width: 40em;
max-width: 40em;
}
.legend__icons {

11
hmdooris/static/main.js
View file

@ -76,10 +76,11 @@
let lock_line = document.createElement("div");
lock_line.id = `lock__line__${lock.id}`;
lock_line.classList.add("lock__line");
let lock_line_inner = `<span class="lock__state-icon"></span>`
lock_line_inner += `<span class="lock__name">${lock.name}:&nbsp;</span>`
lock_line_inner += `<span class="lock__state-label"></span>`
let lock_line_inner = ""
lock_line_inner += `<span class="lock__state-icon"></span>`
lock_line_inner += `<span class="lock__state-label sr-only"></span>`
lock_line_inner += `<span class="lock__state-bat"></span>`
lock_line_inner += `<span class="lock__name">${lock.name}</span>`
lock_line.innerHTML = `<div class="lock__state-and-label">${lock_line_inner}</div>`;
locks.appendChild(lock_line);
@ -87,7 +88,7 @@
lock_button.classList.add("lock__button__lock");
lock_button.name = lock.id;
lock_button.disabled = true;
lock_button.innerText = "Lock";
lock_button.innerHTML = '<span class="sr-only">lock</span><svg class="icon"><use href="static/icons.svg#icon-lock-alt-svgrepo-com"/></svg>'
lock_button_add_event_handler(lock_button, lock.id, true);
lock_line.appendChild(lock_button);
@ -95,7 +96,7 @@
lock_button.classList.add("lock__button__unlock");
lock_button.name = lock.id;
lock_button.disabled = true;
lock_button.innerText = "Unlock";
lock_button.innerHTML = '<span class="sr-only">unlock</span><svg class="icon"><use href="static/icons.svg#icon-unlock-alt-svgrepo-com"/></svg>'
lock_button_add_event_handler(lock_button, lock.id, false);
lock_line.appendChild(lock_button);