sticky header
Massimo Melina committed
Dec 20, 2021 at 14:38 UTC
84f92dcea162a2b269baa554339e176f9d11a1c8
3 files changed
+18
-6
dev-notes.md
-1
@@ -1,5 +1,4 @@
1
# To do
2
-- sticky breadcrumbs
2
- filter list
3
- search
4
try to use server-sent events for the reply
frontend/src/Head.ts
+5
-3
@@ -7,9 +7,11 @@ import { Spinner } from './components'
7
import { useSnapState } from './state'
8
9
export function Head() {
10
- return h('header', {},
11
- h(MenuPanel),
12
- h(Breadcrumbs),
10
+ return h(Fragment, {},
11
+ h('header', {},
12
+ h(MenuPanel),
13
+ h(Breadcrumbs),
14
+ ),
15
h(FolderStats)
16
)
17
}
frontend/src/index.scss
+13
-2
@@ -37,6 +37,13 @@ button {
37
color: #833;
38
}
39
40
+header {
41
+ position: sticky;
42
+ top: 0;
43
+ padding-bottom: 0.3em;
44
+ background: #fff;
45
+}
46
+
47
@keyframes spin {
48
from { transform: rotate(0deg); }
49
to { transform: rotate(360deg); }
@@ -47,18 +54,22 @@ button {
54
border-radius: 0.7em;
55
background-color: #bcd;
56
color: #444;
57
+ line-height: 1.6em;
58
}
59
#folder-stats {
60
font-size: 90%;
61
padding: 0.1em 0.3em;
62
margin: 0.2em 0.5em;
63
float: right;
64
+
65
+ position: sticky;
66
+ top: 0;
67
}
68
69
ul.dir {
59
- padding:0;
70
+ padding: 0;
71
+ margin: 0;
72
clear: both;
61
- margin-top:.5em;
73
& li {
74
display: block;
75
list-style-type: none;