admin/menu: free vertical space on short screens
Massimo Melina committed
Aug 29, 2023 at 11:45 UTC
df7604e836e00078d20733a51a7d6c7c6b93d39e
2 files changed
+10
-4
admin/src/MainMenu.ts
+9
-4
@@ -30,6 +30,8 @@ import PluginsPage from './PluginsPage';
30
import { getHFS } from '@hfs/shared'
31
import CustomHtmlPage from './CustomHtmlPage';
32
import InternetPage from './InternetPage'
33
+import { replaceStringToReact } from './md'
34
+import { useWindowSize } from 'usehooks-ts'
35
36
interface MenuEntry {
37
path: string
@@ -55,6 +57,8 @@ export const mainMenu: MenuEntry[] = [
57
58
export default function Menu({ onSelect }: { onSelect: ()=>void }) {
59
const { VERSION } = getHFS()
60
+ const logo = 'hfs-logo.svg'
61
+ const short = useWindowSize().height < 700
62
return h(Box, { display: 'flex', flexDirection: 'column', bgcolor: 'primary.main', minHeight: '100%', },
63
h(List, {
64
sx:{
@@ -65,9 +69,10 @@ export default function Menu({ onSelect }: { onSelect: ()=>void }) {
69
display: 'flex', flexDirection: 'column', '&>a': { flex: '0' },
70
}
71
},
68
- h(Box, { display: 'flex', px: 2, py: 1, gap: 2, alignItems: 'flex-end' },
69
- h(Box, { fontSize: 'min(3rem, 5vh)' }, 'HFS'),
70
- h(Box, { pb: 1, fontSize: 'small' }, VERSION?.replace('-', ' ')),
72
+ h(Box, { display: 'flex', px: 2, py: 1, gap: 2, alignItems: 'center' },
73
+ h(Box, { fontSize: 'min(3rem, max(5vw, 4vh))' }, 'HFS'),
74
+ h(Box, { fontSize: 'small' }, replaceStringToReact(VERSION||'', /-/, () => h('br'))),
75
+ short && h('img', { src: logo, style: { height: '2.5em' } }),
76
),
77
mainMenu.map(it =>
78
h(ListItemButton, {
@@ -82,7 +87,7 @@ export default function Menu({ onSelect }: { onSelect: ()=>void }) {
87
it.icon && h(ListItemIcon, { sx:{ color: 'primary.contrastText', minWidth: 48 } }, h(it.icon)),
88
h(ListItemText, { sx: { whiteSpace: 'nowrap' }, primary: getMenuLabel(it) })
89
) ),
85
- h(Box, { sx: { flex: 1, opacity: .7, background: 'url(hfs-logo.svg) no-repeat bottom', backgroundSize: 'contain', margin: 2 } }),
90
+ !short && h(Box, { sx: { flex: 1, opacity: .7, background: `url(${logo}) no-repeat bottom`, backgroundSize: 'contain', margin: 2 } }),
91
)
92
)
93
}
admin/src/md.ts
+1
@@ -28,6 +28,7 @@ export function replaceStringToReact(text: string, re: RegExp, cb: (match: RegEx
28
res.push(onText(text.slice(last, match.index)))
29
res.push(cb(match))
30
last = match.index + match[0].length
31
+ if (!re.global) break
32
}
33
return h(Fragment, {}, ...res, onText(text.slice(last, Infinity)))
34
}