From de861bc47526772f4eadfe902ae85ce0354fba2e Mon Sep 17 00:00:00 2001
From: Stefan Bethke <stb@lassitu.de>
Date: Fri, 30 May 2025 16:59:09 +0200
Subject: [PATCH] More design adjustments

---
 hmdooris/static/main.css | 33 +++++++++++++++++++++++++++------
 hmdooris/static/main.js  | 11 ++++++-----
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/hmdooris/static/main.css b/hmdooris/static/main.css
index fb0d2e7..1431eee 100644
--- a/hmdooris/static/main.css
+++ b/hmdooris/static/main.css
@@ -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 {
diff --git a/hmdooris/static/main.js b/hmdooris/static/main.js
index b6b014c..d76f9c1 100644
--- a/hmdooris/static/main.js
+++ b/hmdooris/static/main.js
@@ -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);