frontend: nicer
Massimo Melina committed
Feb 25, 2023 at 16:25 UTC
f1cc790b07d3331999189b3a09752f4e9fb18639
4 files changed
+47
-51
frontend/src/dialog.css
+9
-9
@@ -18,7 +18,9 @@
18
position: relative;
19
margin: 0 3vw;
20
overflow: hidden;
21
- max-height: calc(100vh - 2em)
21
+ max-height: calc(100vh - 2em);
22
+ display: flex;
23
+ justify-content: center;
24
}
25
.dialog-icon {
26
color: #fff;
@@ -31,8 +33,9 @@
33
border-radius: .8em 0;
34
}
35
.dialog-title {
34
- margin-top: -.7em;
36
+ margin-top: -.4em;
37
font-size: 110%;
38
+ position: absolute; /* avoid moving content down */
39
}
40
.dialog-icon ~ .dialog-title {
41
text-align: center;
@@ -74,13 +77,10 @@
77
--color: #822;
78
}
79
77
-@media (max-width: 50em) {
78
- .dialog-closer {
79
- font-size: 120%
80
- }
81
- .dialog-icon ~ .dialog-content {
82
- margin-top: 2em;
83
- }
80
+@media (max-width: 42em) {
81
+ .dialog-icon { font-size: 120% }
82
+ .dialog-icon ~ .dialog-content { margin-top: 2.5em; } /* account for larger top icons */
83
+ .dialog-title { margin-top: -0.2em; }
84
}
85
86
.dialog-prompt label {
frontend/src/index.scss
+25
-32
@@ -8,7 +8,7 @@
8
--mild-contrast: #8886;
9
--good-contrast: #000a;
10
--button-bg: #68a;
11
- --button-text: #fff;
11
+ --button-text: #eaeaea;
12
--focus-color: #468;
13
.theme-dark {
14
--bg: #000;
@@ -89,8 +89,8 @@ button {
89
cursor: pointer;
90
}
91
button.toggled {
92
- color: #444;
93
- text-shadow: 0 0 2px var(--good-contrast);
92
+ color: #fff;
93
+ text-shadow: 0 0 3px #fff;
94
}
95
button, .breadcrumb { /* consistent focus color */
96
&:focus-visible {
@@ -228,9 +228,7 @@ ul.dir {
228
font-variant-numeric: tabular-nums; /* trick to get stuff aligned */
229
230
& .entry-size-unit {
231
- display:inline-block;
231
margin-left: .3em;
233
- width: 1.5em;
232
}
233
}
234
&>div:last-of-type { clear:both }
@@ -249,10 +247,6 @@ ul.dir {
247
}
248
}
249
252
-#menu-panel {
253
- margin-bottom: 0.2em;
254
-
255
-}
250
#menu-bar {
251
display: flex;
252
justify-content: space-evenly;
@@ -296,7 +290,7 @@ button label {
290
}
291
292
.dialog {
299
- min-width: 10em;
293
+ min-width: 11em;
294
--color: var(--button-bg);
295
}
296
@@ -306,11 +300,9 @@ button label {
300
display: flex;
301
gap: .1em;
302
background: var(--bg);
309
- &,&>button {
310
- box-shadow: 0 0 .3em .3em #0003;
311
- z-index: 1; /* make shadow visible also when page-first button is not selected */
312
- }
303
padding: 0 0.2em 0.2em;
304
+ &>button { z-index: 1; }
305
+ & button { box-shadow: 0 0 .3em .3em #0003; }
306
& #paging-middle {
307
padding: 0 0.5em;
308
margin: 0 -0.3em;
@@ -319,7 +311,6 @@ button label {
311
flex: 1;
312
overflow-x: auto;
313
}
322
- & *::-webkit-scrollbar { height: 8px; } /* keep this thin */
314
& #paging-middle>button {
315
flex: 1;
316
padding-top: 0; padding-bottom: 0; /* reduce vertically in case a horizontal scrolling bar is needed */
@@ -359,25 +350,27 @@ button label {
350
}
351
}
352
362
-/* Works on Firefox */
363
-* {
364
- scrollbar-width: thin;
365
- scrollbar-color: var(--button-bg) var(--ghost-contrast);
366
-}
353
+@media (min-width: 2em) {
354
+ body {
355
+ /* Works on Firefox */
356
+ & {
357
+ scrollbar-width: thin;
358
+ scrollbar-color: var(--button-bg) var(--ghost-contrast);
359
+ }
360
368
-/* Works on Chrome, Edge, and Safari */
369
-*::-webkit-scrollbar {
370
- width: 12px;
371
-}
372
-*::-webkit-scrollbar-track {
373
- background: var(--ghost-contrast);
374
-}
375
-*::-webkit-scrollbar-thumb {
376
- background-color: var(--button-bg);
377
- border-radius: 20px;
378
- border: 1px solid var(--ghost-contrast)
361
+ /* Works on Chrome, Edge, and Safari */
362
+ &::-webkit-scrollbar {
363
+ width: 12px;
364
+ }
365
+ &::-webkit-scrollbar-track {
366
+ background: var(--ghost-contrast);
367
+ }
368
+ &::-webkit-scrollbar-thumb {
369
+ background-color: var(--button-bg);
370
+ border-radius: 20px;
371
+ border: 1px solid var(--ghost-contrast)
372
+ } }
373
}
380
-
374
@media (max-width: 42em) {
375
:root { --ghost-contrast: #8883; } /* phones have different curve */
376
body, button, select { font-size: 14pt; }
frontend/src/options.ts
+11
-8
@@ -18,20 +18,23 @@ export function showOptions (){
18
19
function Content(){
20
const snap = useSnapState()
21
- return h(FlexV, {},
21
+ return h(FlexV, { gap: '1.2em' },
22
snap.adminUrl && h(MenuLink, {
23
icon: 'admin',
24
label: t`Admin-panel`,
25
href: snap.adminUrl,
26
target: 'admin',
27
}),
28
- h('div', {}, t`Sort by`),
29
- options.map(x => h('button',{
30
- key: x,
31
- onClick(){
32
- close(state.sortBy = x)
33
- }
34
- }, t(x), ' ', snap.sortBy===x && hIcon('check'))),
28
+ h(FlexV, { gap: '.5em' },
29
+ h('div', {}, t`Sort by`),
30
+ options.map(x => h('button',{
31
+ key: x,
32
+ className: snap.sortBy === x ? 'toggled' : undefined,
33
+ onClick(){
34
+ close(state.sortBy = x)
35
+ }
36
+ }, t(x)))
37
+ ),
38
h(Checkbox, {
39
value: snap.invertOrder,
40
onChange(v) {
frontend/src/upload.ts
+2
-2
@@ -70,7 +70,7 @@ export function showUpload() {
70
resetCounters()
71
uploadDialogIsOpen = true
72
const close = newDialog({
73
- dialogProps: { style: { minWidth: 'min(20em, 100vw - 1em)' } },
73
+ dialogProps: { style: { minHeight: '6em', minWidth: 'min(20em, 100vw - 1em)' } },
74
title: t`Upload`,
75
icon: () => hIcon('upload'),
76
Content,
@@ -92,7 +92,7 @@ export function showUpload() {
92
return h(FlexV, { props: acceptDropFiles(x => setFiles([ ...files, ...x ])) },
93
h(FlexV, { position: 'sticky', top: -4, background: 'var(--bg)' },
94
!can_upload ? t('no_upload_here', "No upload permission for the current folder")
95
- : h(Flex, { justifyContent: 'center', flexWrap: 'wrap', },
95
+ : h(Flex, { justifyContent: 'center', flexWrap: 'wrap', marginTop: '1em' },
96
h('button', { onClick: () => pickFiles() }, t`Pick files`),
97
h('button', { onClick: () => pickFiles(true) }, t`Pick folder`),
98
files.length > 0 && h('button', {