frontend: restyle
Massimo Melina committed
Jun 19, 2022 at 15:29 UTC
35e6ea1622aabdf69073f874a49e4f6619963c0f
4 files changed
+48
-37
frontend/src/dialog.css
+23
-24
@@ -13,53 +13,49 @@
13
.dialog {
14
background: #fff; /*fallback*/
15
background: var(--bg);
16
- padding: 1em 2em;
16
+ padding: max(0.5em, 1vw);
17
border-radius: 1em;
18
position: relative;
19
- color: var(--color);
20
- border: 3px solid var(--color);
21
- margin: -10vh 1.5em 0; /* leave space for corner icons */
22
- max-width: calc(100vw - 7em);
19
+ margin: 0 3vw;
20
+ overflow: hidden;
21
+ max-height: calc(100vh - 2em)
22
}
23
.dialog-icon {
24
color: #fff;
25
+ background-color: var(--color);
26
position: absolute;
27
- width: 1.6em;
28
- height: 1.6em;
27
+ top: 0;
28
+ width: 1.8em;
29
+ height: 1.7em;
30
text-align: center;
30
- border-radius: 50%;
31
+ border-radius: .8em 0;
32
}
33
.dialog-closer {
33
- background: #c77;
34
- right: -1.3em;
35
- bottom: -1.3em;
36
- width: 2.5em;
37
- height: 2.5em;
38
- opacity: .9;
34
+ border-radius: 0 0.8em;
35
+ right: 0;
36
+ padding: 0;
37
+ background-color: #c99;
38
+}
39
+.dialog-icon ~ .dialog-content {
40
+ margin-top: 1.3em;
41
}
42
.dialog-type {
41
- left: -0.1em;
42
- top: -0.1em;
43
- border-radius: 50% 0 50% 0;
43
+ left: 0;
44
+ top: 0;
45
overflow: hidden;
46
line-height: 1.7em;
46
- background-color: var(--color);
47
}
48
.dialog-content {
49
overflow: auto;
50
- max-height: 80vh;
50
+ max-height: calc(100vh - 4em);
51
}
52
.dialog-content p {
53
white-space: pre-wrap;
54
margin: .5em 0;
55
}
56
-.dialog-confirm button {
56
+.dialog-confirm .dialog-content button {
57
margin-top: 1em;
58
}
59
-.dialog-confirm,
60
-.dialog-prompt {
61
- --color: #228
62
-}
59
.dialog-alert-info {
60
--color: #282
61
}
@@ -74,4 +70,7 @@
70
.dialog-closer {
71
font-size: 120%
72
}
73
+ .dialog-icon ~ .dialog-content {
74
+ margin-top: 2em;
75
+ }
76
}
frontend/src/dialog.ts
+2
-1
@@ -85,7 +85,8 @@ export async function confirmDialog(msg: ReactElement | string, { href }: Confir
85
msg,
86
h('a', {
87
href,
88
- onClick: () => closeDialog(true),
88
+ style: { float: 'right' },
89
+ onClick() { closeDialog(true) },
90
}, h('button', {}, 'Confirm'))
91
)
92
}
frontend/src/index.scss
+16
-9
@@ -4,9 +4,9 @@
4
--faint-contrast: #0002;
5
--mild-contrast: #0005;
6
--good-contrast: #000a;
7
- --button-bg: #a4bac9;
8
- --button-text: #444;
9
- --focus-color: #55A;
7
+ --button-bg: #68a;
8
+ --button-text: #fff;
9
+ --focus-color: #468;
10
.theme-dark {
11
--bg: #000;
12
--text: #999;
@@ -16,8 +16,7 @@
16
--button-bg: #345;
17
--button-text: #999;
18
a { color:#8ac; }
19
- .dialog-confirm, .dialog-prompt { --color:#77a }
20
- .dialog-closer { background: #844 }
19
+ .dialog-closer { background: #633 }
20
.dialog-icon { color: #ccc; }
21
.dialog-backdrop { background: #333b; }
22
}
@@ -51,6 +50,7 @@ input, select {
50
background: var(--bg);
51
border-color: var(--mild-contrast);
52
color: var(--good-contrast);
53
+ max-width: 100%; box-sizing: border-box; // avoid scrolling
54
}
55
input[type=checkbox] {
56
margin: 0 1.3em 0 0.8em;
@@ -67,7 +67,7 @@ input[type=checkbox] {
67
.icon.mirror:before { transform: scaleX(-1); }
68
a {
69
text-decoration: none;
70
- color: #357;
70
+ color: #57a;
71
}
72
button {
73
background-color: var(--button-bg);
@@ -87,10 +87,11 @@ button, .breadcrumb { /* consistent focus color */
87
outline: 3px solid var(--focus-color);
88
}
89
}
90
-input, select {
90
+input, select, ul a {
91
&:focus-visible {
92
- outline: 1px solid var(--focus-color);
93
- border: 2px solid var(--focus-color);
92
+ border-radius: .3em;
93
+ border-color: transparent;
94
+ outline: 2px solid var(--focus-color);
95
}
96
}
97
@@ -176,6 +177,7 @@ ul.dir {
177
178
& a {
179
word-break: break-word;
180
+ padding-right: 0.3em;
181
182
& .icon {
183
margin-right: .3em;
@@ -243,6 +245,11 @@ button label {
245
padding: .2em; /* give space for focus outline */
246
}
247
248
+.dialog-confirm,
249
+.dialog-prompt {
250
+ --color: var(--button-bg);
251
+}
252
+
253
#paging {
254
display: flex;
255
position: sticky;
shared/src/dialogs.ts
+7
-3
@@ -55,9 +55,13 @@ function Dialog(d:DialogOptions) {
55
ev.stopPropagation()
56
}
57
},
58
- d.closable || d.closable===undefined && h('button', { className:'dialog-icon dialog-closer', onClick:()=> closeDialog() }, d.closableContent),
59
- d.icon && h('div', { className:'dialog-icon dialog-type' }, d.icon),
60
- h('div', { className:'dialog-content' }, h(d.Content || 'div'))
58
+ d.closable || d.closable===undefined
59
+ && h('button', {
60
+ className: 'dialog-icon dialog-closer',
61
+ onClick() { closeDialog() }
62
+ }, d.closableContent),
63
+ d.icon && h('div', { className: 'dialog-icon dialog-type' }, d.icon),
64
+ h('div', { className: 'dialog-content' }, h(d.Content || 'div'))
65
)
66
)
67
}