xP: enhance mobile experience

The left column used to jump around, and phones were near-unusable.
xP: allow setting a fixed WS URI
2022-09-08 17:11:10 +02:00 · 2022-09-08 17:11:01 +02:00
2 changed files with 26 additions and 14 deletions
--- a/xP/public/xP.css
+++ b/xP/public/xP.css
@ -2,16 +2,19 @@ body {
 	margin: 0;
 	padding: 0;
 	font-family: sans-serif;
+	font-size: clamp(0.5rem, 2vw, 1rem);
 }
 .xP {
-	height: 100vh;
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
+	height: 100vh;
+	/* https://caniuse.com/viewport-unit-variants */
+	height: 100dvh;
 }

 .title, .status {
-	padding: .05rem .3rem;
+	padding: .05em .3em;
 	background: #eee;

 	position: relative;
@ -52,10 +55,11 @@ body {
 .list {
 	overflow-y: auto;
 	border-right: 1px solid #ccc;
-	min-width: 10rem;
+	min-width: 10em;
+	flex-shrink: 0;
 }
 .item {
-	padding: .05rem .3rem;
+	padding: .05em .3em;
 	cursor: default;
 }
 .item.highlighted {
@ -89,7 +93,7 @@ body {
 	overflow-y: auto;
 }
 .log {
-	padding: .1rem .3rem;
+	padding: .1em .3em;
 	font-family: monospace;
 	white-space: pre-wrap;
 	overflow-y: auto;
@ -99,7 +103,7 @@ body {
 	opacity: 50%;
 }
 .date {
-	padding: .3rem;
+	padding: .3em;
 	grid-column: span 2;
 	font-weight: bold;
 }
@ -109,16 +113,16 @@ body {
 	background: #ff5f00;
 }
 .time {
-	padding: .1rem .3rem;
+	padding: .1em .3em;
 	background: #f8f8f8;
 	color: #bbb;
 	border-right: 1px solid #ccc;
 }
 .mark {
-	padding-right: .3rem;
+	padding-right: .3em;
 	text-align: center;
 	display: inline-block;
-	min-width: 2rem;
+	min-width: 2em;
 }
 .mark.error {
 	color: red;
@ -133,7 +137,7 @@ body {
 	color: darkred;
 }
 .content {
-	padding: .1rem .3rem;
+	padding: .1em .3em;
 	white-space: pre-wrap;
 }
 .content .b {
@ -154,7 +158,7 @@ body {

 textarea {
 	font: inherit;
-	padding: .05rem .3rem;
+	padding: .05em .3em;
 	margin: 0;
 	border: 2px inset #eee;
 	flex-shrink: 0;
--- a/xP/xP.go
+++ b/xP/xP.go
@ -22,6 +22,7 @@ import (
 var (
 	addressBind    string
 	addressConnect string
+	addressWS      string
 )

 func clientToRelay(
@ -144,6 +145,7 @@ var page = template.Must(template.New("/").Parse(`<!DOCTYPE html>
 <head>
 	<title>xP</title>
 	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="xP.css" />
 </head>
 <body>
@ -163,18 +165,24 @@ func handleDefault(w http.ResponseWriter, r *http.Request) {
 		return
 	}

-	wsURI := fmt.Sprintf("ws://%s/ws", r.Host)
+	wsURI := addressWS
+	if wsURI == "" {
+		wsURI = fmt.Sprintf("ws://%s/ws", r.Host)
+	}
 	if err := page.Execute(w, wsURI); err != nil {
 		log.Println("Template execution failed: " + err.Error())
 	}
 }

 func main() {
-	if len(os.Args) != 3 {
-		log.Fatalf("usage: %s BIND CONNECT\n", os.Args[0])
+	if len(os.Args) < 3 || len(os.Args) > 4 {
+		log.Fatalf("usage: %s BIND CONNECT [WSURI]\n", os.Args[0])
 	}

 	addressBind, addressConnect = os.Args[1], os.Args[2]
+	if len(os.Args) > 3 {
+		addressWS = os.Args[3]
+	}

 	http.Handle("/ws", websocket.Handler(handleWebSocket))
 	http.Handle("/", http.HandlerFunc(handleDefault))
Author	SHA1	Message	Date
Přemysl Eric Janouch	8c8e06b015	xP: enhance mobile experience The left column used to jump around, and phones were near-unusable.	2022-09-08 17:11:10 +02:00
Přemysl Eric Janouch	d7b6967b6f	xP: allow setting a fixed WS URI For reverse proxies.	2022-09-08 17:11:01 +02:00