p/xK
1
1
Fork 0
Code Issues 1 Pull Requests Releases 11 Wiki Activity

xP: enhance mobile experience

Browse Source 
The left column used to jump around, and phones were near-unusable.
This commit is contained in:
Přemysl Eric Janouch 2022-09-08 15:53:29 +02:00
parent d7b6967b6f
commit 8c8e06b015
Signed by: p
GPG Key ID: A0420B94F92B9493
2 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
xP/public/xP.css
View File

@ -2,16 +2,19 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: sans-serif; font-family: sans-serif;
font-size: clamp(0.5rem, 2vw, 1rem);
} }
.xP { .xP {
height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
height: 100vh;
/* https://caniuse.com/viewport-unit-variants */
height: 100dvh;
} }
.title, .status { .title, .status {
padding: .05rem .3rem; padding: .05em .3em;
background: #eee; background: #eee;
position: relative; position: relative;
@ -52,10 +55,11 @@ body {
.list { .list {
overflow-y: auto; overflow-y: auto;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
min-width: 10rem; min-width: 10em;
flex-shrink: 0;
} }
.item { .item {
padding: .05rem .3rem; padding: .05em .3em;
cursor: default; cursor: default;
} }
.item.highlighted { .item.highlighted {
@ -89,7 +93,7 @@ body {
overflow-y: auto; overflow-y: auto;
} }
.log { .log {
padding: .1rem .3rem; padding: .1em .3em;
font-family: monospace; font-family: monospace;
white-space: pre-wrap; white-space: pre-wrap;
overflow-y: auto; overflow-y: auto;
@ -99,7 +103,7 @@ body {
opacity: 50%; opacity: 50%;
} }
.date { .date {
padding: .3rem; padding: .3em;
grid-column: span 2; grid-column: span 2;
font-weight: bold; font-weight: bold;
} }
@ -109,16 +113,16 @@ body {
background: #ff5f00; background: #ff5f00;
} }
.time { .time {
padding: .1rem .3rem; padding: .1em .3em;
background: #f8f8f8; background: #f8f8f8;
color: #bbb; color: #bbb;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
} }
.mark { .mark {
padding-right: .3rem; padding-right: .3em;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
min-width: 2rem; min-width: 2em;
} }
.mark.error { .mark.error {
color: red; color: red;
@ -133,7 +137,7 @@ body {
color: darkred; color: darkred;
} }
.content { .content {
padding: .1rem .3rem; padding: .1em .3em;
white-space: pre-wrap; white-space: pre-wrap;
} }
.content .b { .content .b {
@ -154,7 +158,7 @@ body {
textarea { textarea {
font: inherit; font: inherit;
padding: .05rem .3rem; padding: .05em .3em;
margin: 0; margin: 0;
border: 2px inset #eee; border: 2px inset #eee;
flex-shrink: 0; flex-shrink: 0;

1
xP/xP.go
View File

@ -145,6 +145,7 @@ var page = template.Must(template.New("/").Parse(`<!DOCTYPE html>
<head> <head>
<title>xP</title> <title>xP</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="xP.css" /> <link rel="stylesheet" href="xP.css" />
</head> </head>
<body> <body>