better layout: dialog
Massimo Melina committed
Jun 19, 2023 at 18:40 UTC
8bf9a4b6e48f44684adf8d8c95bc247f87247e79
2 files changed
+9
-5
frontend/src/dialog.css
+5
-5
@@ -14,7 +14,7 @@
14
.dialog {
15
background: #fff; /*fallback*/
16
background: var(--bg);
17
- padding: max(0.5em, 1vw);
17
+ padding: max(0.5em, 1vw, 2vh);
18
border-radius: 1em;
19
position: relative;
20
margin: 0 3vw;
@@ -38,6 +38,7 @@
38
font-size: 120%;
39
margin-top: -.4em;
40
padding: 0 0.5em; /* avoid reaching margins */
41
+ min-height: 1.2em;
42
}
43
.dialog-closer ~ .dialog-title {
44
margin-right: 2em;
@@ -55,7 +56,7 @@
56
background-color: #c88;
57
}
58
.dialog-icon ~ .dialog-content {
58
- margin-top: 1.5em;
59
+ margin-top: .5em;
60
}
61
.dialog-type {
62
left: 0;
@@ -87,12 +88,11 @@
88
89
@media (max-width: 42em) {
90
.dialog-icon { font-size: 120% }
90
- .dialog-icon ~ .dialog-content { margin-top: 2.5em; } /* account for larger top icons */
91
+ .dialog-icon ~ .dialog-content { margin-top: 1.5em; } /* account for larger top icons */
92
.dialog-title { margin-top: -.2em; }
93
}
94
95
.dialog-prompt label {
96
display: block;
96
- margin-bottom: .5em;
97
- margin-left: .1em;
97
+ margin: .5em .1em;
98
}
\ No newline at end of file
frontend/src/dialog.ts
+4
@@ -35,6 +35,10 @@ export async function promptDialog(msg: string, { def, type, trim=true, ...rest
35
ref,
36
type,
37
name: 'input',
38
+ style: {
39
+ width: def ? (def.length / 2) + 'em' : 'auto',
40
+ minWidth: '100%', maxWidth: '100%'
41
+ },
42
autoFocus: true,
43
onKeyDown(ev: KeyboardEvent) {
44
const { key } = ev