diff options
| author | Přemysl Eric Janouch <p@janouch.name> | 2022-09-08 15:53:29 +0200 |
|---|---|---|
| committer | Přemysl Eric Janouch <p@janouch.name> | 2022-09-08 17:11:10 +0200 |
| commit | 8c8e06b0157c97ee1771f848ed363c6a0ed398be (patch) | |
| tree | bad11bb1b3d1b6b315b97256feeb51e79574779c /xP | |
| parent | d7b6967b6f16d9d953c2627232ca194ec08da942 (diff) | |
| download | xK-8c8e06b0157c97ee1771f848ed363c6a0ed398be.tar.gz xK-8c8e06b0157c97ee1771f848ed363c6a0ed398be.tar.xz xK-8c8e06b0157c97ee1771f848ed363c6a0ed398be.zip | |
xP: enhance mobile experience
The left column used to jump around, and phones were near-unusable.
Diffstat (limited to 'xP')
| -rw-r--r-- | xP/public/xP.css | 26 | ||||
| -rw-r--r-- | xP/xP.go | 1 |
2 files changed, 16 insertions, 11 deletions
diff --git a/xP/public/xP.css b/xP/public/xP.css index 81025c9..2e9d4b5 100644 --- 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; @@ -145,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> |