fix: issues with dialogs on landscape on mobile
Massimo Melina committed
Jan 11, 2022 at 12:01 UTC
764a140b99c330fa3baa70f78307db4f5c60311a
5 files changed
+33
-18
frontend/src/dialog.css
+7
-2
@@ -10,14 +10,15 @@
10
align-Items: center;
11
}
12
.dialog {
13
- background: #fff;
13
+ background: #fff; /*fallback*/
14
background: var(--bg);
15
padding: 1em 1.5em;
16
border-radius: 1em;
17
position: relative;
18
color: var(--color);
19
border: 3px solid var(--color);
20
- margin: 0 1.5em; /* leave space for corner icons */
20
+ margin: -10vh 1.5em 0; /* leave space for corner icons */
21
+ max-height: 80vh;
22
}
23
.dialog-icon {
24
color: #fff;
@@ -43,6 +44,10 @@
44
line-height: 1.7em;
45
background-color: var(--color);
46
}
47
+.dialog-content {
48
+ overflow: auto;
49
+ max-height: 80vh;
50
+}
51
.dialog-content p {
52
white-space: pre;
53
margin: .5em 0;
frontend/src/dialog.ts
+14
-11
@@ -10,6 +10,7 @@ interface DialogOptions {
10
icon?: string | FunctionComponent,
11
closableContent?: string | ReactNode,
12
reserveClosing?: true
13
+ noFrame?: boolean
14
}
15
16
const dialogs = proxy<DialogOptions[]>([])
@@ -33,21 +34,23 @@ function Dialog(d:DialogOptions) {
34
d = { ...dialogsDefaults, ...d }
35
return h('div', {
36
ref,
36
- className: 'dialog-backdrop',
37
+ className: 'dialog-backdrop '+(d.className||''),
38
tabIndex: 0,
39
onKeyDown,
40
onClick: ()=> closeDialog()
41
},
41
- h('div', {
42
- className:'dialog '+(d.className||''),
43
- onClick(ev:any){
44
- ev.stopPropagation()
45
- }
46
- },
47
- d.closable || d.closable===undefined && h('button', { className:'dialog-icon dialog-closer', onClick:()=> closeDialog() }, d.closableContent),
48
- d.icon && h('div', { className:'dialog-icon dialog-type' }, d.icon),
49
- h('div', { className:'dialog-content' }, h(d.Content || 'div'))
50
- ))
42
+ d.noFrame ? h(d.Content || 'div')
43
+ : h('div', {
44
+ className: 'dialog',
45
+ onClick(ev:any){
46
+ ev.stopPropagation()
47
+ }
48
+ },
49
+ d.closable || d.closable===undefined && h('button', { className:'dialog-icon dialog-closer', onClick:()=> closeDialog() }, d.closableContent),
50
+ d.icon && h('div', { className:'dialog-icon dialog-type' }, d.icon),
51
+ h('div', { className:'dialog-content' }, h(d.Content || 'div'))
52
+ )
53
+ )
54
}
55
56
function onKeyDown(ev:any) {
frontend/src/index.scss
+10
-5
@@ -15,6 +15,7 @@
15
.dialog-confirm, .dialog-prompt { --color:#77a }
16
.dialog-closer { background: #844 }
17
.dialog-icon { color: #ccc; }
18
+ .dialog-backdrop { background: #333b; }
19
}
20
}
21
body {
@@ -188,15 +189,19 @@ button label {
189
}
190
select { font-size:110% }
191
191
-.dialog.working {
192
- background: none;
192
+.dialog-backdrop.working {
193
font-size: 5em;
194
- animation: 1s spin infinite, 1s fade-in;
194
+ animation: 1s fade-in;
195
}
196
197
-@media (max-width: 50em) {
197
+@media (max-width: 40em) {
198
body { font-size: 120%; }
199
- #menu-bar button label { display: none } /* icons only */
199
+ #menu-bar {
200
+ display: flex;
201
+ justify-content: space-between;
202
+ align-content: stretch;
203
+ & button label { display: none } /* icons only */
204
+ }
205
.breadcrumb .icon {
206
font-size:24px;
207
}
frontend/src/misc.ts
+1
@@ -65,6 +65,7 @@ export function working() {
65
isWorking = true
66
return newDialog({
67
closable: false,
68
+ noFrame: true,
69
Content: Spinner,
70
reserveClosing: true,
71
className: 'working',
todo.md
+1
@@ -15,6 +15,7 @@
15
- thumbnails support
16
- archive for search results
17
- archive only selected files
18
+- "bottom" button (only on long screens, only after you scroll a bit, only for a few seconds)
19
- webdav?
20
- vfs: ability to remove/hide/rename files deep in a source
21
- administration interface