From 8c8e06b0157c97ee1771f848ed363c6a0ed398be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C5=99emysl=20Eric=20Janouch?= Date: Thu, 8 Sep 2022 15:53:29 +0200 Subject: [PATCH] xP: enhance mobile experience The left column used to jump around, and phones were near-unusable. --- xP/public/xP.css | 26 +++++++++++++++----------- 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; diff --git a/xP/xP.go b/xP/xP.go index 9428501..bc7ebc2 100644 --- a/xP/xP.go +++ b/xP/xP.go @@ -145,6 +145,7 @@ var page = template.Must(template.New("/").Parse(` xP +