diff options
| author | Přemysl Eric Janouch <p@janouch.name> | 2022-09-16 03:18:53 +0200 |
|---|---|---|
| committer | Přemysl Eric Janouch <p@janouch.name> | 2022-09-16 03:19:48 +0200 |
| commit | 430968e5d5fdf627ce7e1563bbee22bf2f9256b2 (patch) | |
| tree | 5e4063f4725f1c7b24edb65efb4e20c33e6489b3 /xP | |
| parent | d5153fe354dce4bc9aef990614dad29d9804aa9b (diff) | |
| download | xK-430968e5d5fdf627ce7e1563bbee22bf2f9256b2.tar.gz xK-430968e5d5fdf627ce7e1563bbee22bf2f9256b2.tar.xz xK-430968e5d5fdf627ce7e1563bbee22bf2f9256b2.zip | |
xP: make non-connected states more apparent
Diffstat (limited to 'xP')
| -rw-r--r-- | xP/public/xP.css | 10 | ||||
| -rw-r--r-- | xP/public/xP.js | 14 |
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), |