diff options
| -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), |