taler-typescript-core

commit ca736ba051dfed15e1ccfab3da0162bc6c95b549
parent 8505b7967421d4e4c80ab7d35c07489cb782e08b
Author: Nullptrderef <nullptrderef@proton.me>
Date:   Tue, 20 Aug 2024 10:18:03 +0200

fix: resolve a few live-reload styling bugs

Diffstat:
M
packages/web-util/src/live-reload.ts
 | 
22
++++++++++++++--------

1 file changed, 14 insertions(+), 8 deletions(-)
diff --git a/packages/web-util/src/live-reload.ts b/packages/web-util/src/live-reload.ts
@@ -1,10 +1,12 @@
 /* eslint-disable no-undef */
 
 function setupLiveReload(): void {
-  const stopWs = localStorage.getItem("stop-ws")
+  const stopWs = localStorage.getItem("stop-ws");
   if (!!stopWs) return;
   const protocol = window.location.protocol === "http:" ? "ws:" : "wss:";
-  const ws = new WebSocket(`${protocol}//${window.location.hostname}:${window.location.port}/ws`);
+  const ws = new WebSocket(
+    `${protocol}//${window.location.hostname}:${window.location.port}/ws`,
+  );
 
   ws.addEventListener("message", (message) => {
     try {
@@ -60,18 +62,22 @@ setupLiveReload();
 function showReloadOverlay(): void {
   const d = document.createElement("div");
   d.id = "overlay";
-  d.style.position = "absolute";
-  d.style.width = "100%";
-  d.style.height = "100%";
+  d.style.position = "fixed";
+  d.style.left = "0px";
+  d.style.top = "0px";
+  d.style.width = "100vw";
+  d.style.height = "100vh";
+  d.style.display = "flex";
+  d.style.alignItems = "center";
+  d.style.justifyContent = "center";
+  d.style.fontFamily = `system-ui, -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif`;
   d.style.color = "white";
   d.style.backgroundColor = "rgba(0,0,0,0.5)";
-  d.style.display = "flex";
   d.style.zIndex = String(Number.MAX_SAFE_INTEGER);
-  d.style.justifyContent = "center";
   const h = document.createElement("h1");
   h.id = "overlay-text";
   h.style.margin = "auto";
-  h.innerHTML = "reloading...";
+  h.innerHTML = "Reloading...";
   d.appendChild(h);
   if (document.body.firstChild) {
     document.body.insertBefore(d, document.body.firstChild);