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;
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;

1
xP/xP.go
View File

@ -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>