smarter header layout
Massimo Melina committed
Dec 20, 2021 at 00:19 UTC
567b32bc7fdb72f1b90cfccd0bb58a64d963fd0f
3 files changed
+18
-20
dev-notes.md
+1
-1
@@ -6,9 +6,9 @@
6
7
# To do
8
- when reloading vfs wait for it to be unlocked
9
-- search
9
- sticky breadcrumbs
10
- frontend: ensure icons are loaded before going on
11
+- search
12
- frontend: dialogs
13
- vfs: serve an html for a folder?
14
- "default" property for vfsNode?
frontend/src/Head.ts
+5
-6
@@ -6,7 +6,7 @@ import { formatBytes, hIcon, prefix, Spinner } from './misc'
6
import { useSnapState } from './state'
7
8
export function Head() {
9
- return h(Fragment, {},
9
+ return h('header', {},
10
h(MenuPanel),
11
h(Breadcrumbs),
12
h(FolderStats)
@@ -70,16 +70,15 @@ function FolderStats() {
70
function Breadcrumbs() {
71
const path = useLocation().pathname.slice(1,-1)
72
let prev = ''
73
- const breadcrumbs = path ? path.split('/').map(x => [prev = prev + x + '/', x]) : []
74
- return h('div', { id: 'folder-path' },
73
+ const breadcrumbs = path ? path.split('/').map(x => [prev = prev + x + '/', decodeURI(x)]) : []
74
+ return h(Fragment, {},
75
h(Breadcrumb),
76
breadcrumbs.map(([path,label]) => h(Breadcrumb, { key: path, path, label }))
77
)
78
}
79
80
function Breadcrumb({ path, label }:{ path?: string, label?: string }) {
81
- return h(Link, { to:path||'/' },
82
- h('button', {},
83
- label || hIcon('home')) )
81
+ return h(Link, { className:'breadcrumb', to:path||'/' },
82
+ label || hIcon('home') )
83
}
84
frontend/src/index.scss
+12
-13
@@ -42,16 +42,11 @@ button {
42
to { transform: rotate(360deg); }
43
}
44
45
-#folder-path {
46
- margin: 0.2em;
47
- & a {
48
- float: left;
49
- height: 2em;
50
- }
51
- & button {
52
- padding: 0.4em 0.6em;
53
- border-radius: 0.7em;
54
- }
45
+.breadcrumb {
46
+ padding: 0.1em 0.6em 0.2em;
47
+ border-radius: 0.7em;
48
+ background-color: #bcd;
49
+ color: #444;
50
}
51
#folder-stats {
52
font-size: 90%;
@@ -63,6 +58,7 @@ button {
58
ul.dir {
59
padding:0;
60
clear: both;
61
+ margin-top:.5em;
62
& li {
63
display: block;
64
list-style-type: none;
@@ -93,7 +89,10 @@ ul.dir {
89
}
90
}
91
96
-#menu-panel button label {
97
- cursor: inherit;
98
- margin-left: 0.8em;
92
+#menu-panel {
93
+ margin-bottom: .2em;
94
+ & button label {
95
+ cursor: inherit;
96
+ margin-left: 0.8em;
97
+ }
98
}