summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPřemysl Eric Janouch <p@janouch.name>2022-09-16 03:18:53 +0200
committerPřemysl Eric Janouch <p@janouch.name>2022-09-16 03:19:48 +0200
commit430968e5d5fdf627ce7e1563bbee22bf2f9256b2 (patch)
tree5e4063f4725f1c7b24edb65efb4e20c33e6489b3
parentd5153fe354dce4bc9aef990614dad29d9804aa9b (diff)
downloadxK-430968e5d5fdf627ce7e1563bbee22bf2f9256b2.tar.gz
xK-430968e5d5fdf627ce7e1563bbee22bf2f9256b2.tar.xz
xK-430968e5d5fdf627ce7e1563bbee22bf2f9256b2.zip
xP: make non-connected states more apparent
-rw-r--r--xP/public/xP.css10
-rw-r--r--xP/public/xP.js14
2 files changed, 19 insertions, 5 deletions
diff --git a/xP/public/xP.css b/xP/public/xP.css
index 71422a1..c231620 100644
--- a/xP/public/xP.css
+++ b/xP/public/xP.css
@@ -13,6 +13,16 @@ body {
height: 100dvh;
}
+.overlay {
+ padding: .6em .9em;
+ background: #eee;
+ border: 1px outset #eee;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+}
.title, .status {
padding: .05em .3em;
background: #eee;
diff --git a/xP/public/xP.js b/xP/public/xP.js
index a5f1218..30491d3 100644
--- a/xP/public/xP.js
+++ b/xP/public/xP.js
@@ -41,7 +41,7 @@ class RelayRpc extends EventTarget {
}
this.ws.onclose = event => {
let message = "Connection closed: " +
- event.code + " (" + event.reason + ")"
+ event.reason + " (" + event.code + ")"
for (const seq in this.promised)
this.promised[seq].reject(message)
@@ -811,14 +811,18 @@ let Input = {
let Main = {
view: vnode => {
- let state = "Connected"
+ let overlay = undefined
if (connecting)
- state = "Connecting..."
+ overlay = m('.overlay', {}, "Connecting...")
else if (rpc.ws === undefined)
- state = "Disconnected"
+ overlay = m('.overlay', {}, [
+ m('', {}, "Disconnected"),
+ m('', {}, m('small', {}, "Reload page to reconnect.")),
+ ])
return m('.xP', {}, [
- m('.title', {}, [`xP (${state})`, m(Toolbar)]),
+ overlay,
+ m('.title', {}, [`xP`, m(Toolbar)]),
m('.middle', {}, [m(BufferList), m(BufferContainer)]),
m(Status),
m(Input),