From 043398ef6529a26702f11d346b9e55c3974ecf1e Mon Sep 17 00:00:00 2001
From: Stewart Allen <stewart.allen@gmail.com>
Date: Thu, 23 May 2024 10:42:06 -0400
Subject: [PATCH] move progress bar, cleanup device info

---
 src/kiri/main.js    | 13 ++++---------
 web/kiri/index.css  | 20 +++++++++++++-------
 web/kiri/index.html |  3 ++-
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/kiri/main.js b/src/kiri/main.js
index fb695010..e4f3ba6f 100644
--- a/src/kiri/main.js
+++ b/src/kiri/main.js
@@ -302,15 +302,10 @@ gapp.register("kiri.main", [], (root, exports) => {
          return proto.toLowerCase().indexOf("https") === 0;
     }
 
-    function setProgress(value, msg) {
-        if (value) {
-            value = (value * 100).round(4);
-            UI.loading.display = 'block';
-            UI.progress.width = value+'%';
-            if (msg) UI.prostatus.innerHTML = msg;
-        } else {
-            UI.loading.display = 'none';
-        }
+    function setProgress(value = 0, msg) {
+        value = (value * 100).round(4);
+        UI.progress.width = value+'%';
+        if (msg) UI.prostatus.innerHTML = msg;
     }
 
     function bound(v,min,max) {
diff --git a/web/kiri/index.css b/web/kiri/index.css
index 391d4057..835c7f40 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -515,11 +515,16 @@ th, tr, td, label {
     align-items: stretch;
     justify-content: center;
     padding: 3px;
+    display: grid !important;
+    grid-template-columns: auto 1fr;
+}
+#mode-info > div {
+    display: contents;
 }
 #mode-info label {
     font-size: smaller;
     font-weight: bold;
-    margin-left: 5px;
+    margin: 2px 0 2px 5px;
     padding: 2px 5px 2px 5px;
     color: var(--fg-gray);
     background-color: #eee;
@@ -530,6 +535,7 @@ th, tr, td, label {
     border-bottom: 1px solid #ddd;
 }
 #mode-info span {
+    margin: 2px 5px 2px 0;
     font-size: smaller;
     padding: 2px 5px 2px 5px;
     color: var(--fg-gray);
@@ -1079,23 +1085,23 @@ th, tr, td, label {
 }
 
 #progress {
-    display: none;
-    position: absolute;
-    top: 0px;
-    left: 10%;
-    right: 10%;
+    left: 0;
+    right: 0;
+    height: 6px;
+    min-height: 6px;
     text-align: center;
     background-color: rgba(0,0,0,0.15);
     border-radius: 3px;
 }
 #progbar {
-    width: 100%;
+    width: 0;
     text-align: left;
     position: relative;
     background-color: rgba(255,0,0,0.65);
     border-radius: 3px;
 }
 #progtxt {
+    display: none;
     color: white;
     margin: 0 5px 0 5px;
     padding: 0 5px 2px 5px;
diff --git a/web/kiri/index.html b/web/kiri/index.html
index 946353b4..9cf12e8b 100644
--- a/web/kiri/index.html
+++ b/web/kiri/index.html
@@ -244,9 +244,10 @@
 
     <!-- line betwwen menu bar and main application windows -->
     <div id="top-mid-sep"></div>
+    <div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
+    <div id="top-mid-sep"></div>
 
     <div id="mid" class="grow f-row">
-        <div id="progress"><div id="progbar"><div id="progtxt">loading</div></div></div>
 
         <!-- left settings menu -->
         <div id="mid-left" class="f-col j-left">