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 { #locks {
width: 40em; max-width: 40em;
} }
.lock__line { .lock__line {
@ -23,8 +34,7 @@ body {
} }
.lock__line * { .lock__line * {
flex-grow: 1; /*flex-grow: 1;*/
font-size: 1.2rem;
} }
.lock__state-and-label { .lock__state-and-label {
@ -43,12 +53,23 @@ body {
} }
.lock__line button { .lock__line button {
min-width: 8rem; min-width: 5rem;
margin: 0.1rem 0.5rem; margin: 0.1rem 0.5rem;
padding: 0.1rem 0.5rem; padding: 0.1rem 0.5rem;
border-radius: 2rem; border-radius: 2rem;
background-color: white; 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 { .lock__line .lock__state-icon {
@ -79,7 +100,7 @@ svg.icon {
} }
.legend { .legend {
width: 40em; max-width: 40em;
} }
.legend__icons { .legend__icons {

11
hmdooris/static/main.js
View file

@ -76,10 +76,11 @@
let lock_line = document.createElement("div"); let lock_line = document.createElement("div");
lock_line.id = `lock__line__${lock.id}`; lock_line.id = `lock__line__${lock.id}`;
lock_line.classList.add("lock__line"); lock_line.classList.add("lock__line");
let lock_line_inner = `<span class="lock__state-icon"></span>` let lock_line_inner = ""
lock_line_inner += `<span class="lock__name">${lock.name}:&nbsp;</span>` lock_line_inner += `<span class="lock__state-icon"></span>`
lock_line_inner += `<span class="lock__state-label"></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__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>`; lock_line.innerHTML = `<div class="lock__state-and-label">${lock_line_inner}</div>`;
locks.appendChild(lock_line); locks.appendChild(lock_line);
@ -87,7 +88,7 @@
lock_button.classList.add("lock__button__lock"); lock_button.classList.add("lock__button__lock");
lock_button.name = lock.id; lock_button.name = lock.id;
lock_button.disabled = true; 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_button_add_event_handler(lock_button, lock.id, true);
lock_line.appendChild(lock_button); lock_line.appendChild(lock_button);
@ -95,7 +96,7 @@
lock_button.classList.add("lock__button__unlock"); lock_button.classList.add("lock__button__unlock");
lock_button.name = lock.id; lock_button.name = lock.id;
lock_button.disabled = true; 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_button_add_event_handler(lock_button, lock.id, false);
lock_line.appendChild(lock_button); lock_line.appendChild(lock_button);