admin: menu scrolls independently
Massimo Melina committed
Feb 8, 2023 at 11:01 UTC
a7cf89e92b0b1b7ca25422562b8f9e4dad588abe
2 files changed
+30
-30
admin/src/MainMenu.ts
+29
-29
@@ -48,35 +48,35 @@ let version: any // cache 'version', as it won't change at runtime, while the Dr
48
export default function Menu({ onSelect }: { onSelect: ()=>void }) {
49
const [status] = useApi(!version && 'get_status')
50
version ||= status?.version?.replace('-', ' ')
51
- return h(List, {
52
- sx:{
53
- pr: 1, bgcolor: 'primary.main', color: 'primary.contrastText', minHeight: '100%', boxSizing: 'border-box',
54
- maxHeight: '100vh', // avoid reserving extra space for the final logo
55
- display: 'flex', flexDirection: 'column', '&>a': { flex: '0' },
56
- }
57
- },
58
- h(Box, { display: 'flex', px: 2, py: 1, gap: 2, alignItems: 'flex-end' },
59
- h(Typography, { variant:'h3' }, 'HFS'),
60
- h(Box, { pb: 1, fontSize: 'small' }, version),
61
- ),
62
- mainMenu.map(it =>
63
- h(ListItemButton, {
64
- key: it.path,
65
- to: it.path,
66
- component: NavLink,
67
- onClick: onSelect,
68
- // @ts-ignore
69
- style: ({ isActive }) => isActive ? { textDecoration: 'underline' } : {},
70
- children: undefined, // shut up ts
71
- },
72
- it.icon && h(ListItemIcon, { sx:{ color: 'primary.contrastText' } }, h(it.icon)),
73
- h(ListItemText, { primary: getMenuLabel(it) })
74
- ) ),
75
- h('img', { src: 'hfs-logo.svg', style: {
76
- opacity: .7, bottom: 0, marginLeft: 'auto', marginRight: 'auto', flex: 1,
77
- maxWidth: '80%', // using 'width' produces huge image on safari
78
- height: 0, // trick: without this the flex doesn't work
79
- } }),
51
+ return h(Box, { display: 'flex', flexDirection: 'column', bgcolor: 'primary.main', minHeight: '100%', },
52
+ h(List, {
53
+ sx:{
54
+ pr: 1, color: 'primary.contrastText',
55
+ height: '100vh', // grow as screen permits, so we know the extra space for the logo
56
+ overflowY: 'auto', // ...and account for clipping
57
+ position: 'sticky', top: 0, // be independent (scrolling-wise)
58
+ display: 'flex', flexDirection: 'column', '&>a': { flex: '0' },
59
+ }
60
+ },
61
+ h(Box, { display: 'flex', px: 2, py: 1, gap: 2, alignItems: 'flex-end' },
62
+ h(Typography, { variant:'h3' }, 'HFS'),
63
+ h(Box, { pb: 1, fontSize: 'small' }, version),
64
+ ),
65
+ mainMenu.map(it =>
66
+ h(ListItemButton, {
67
+ key: it.path,
68
+ to: it.path,
69
+ component: NavLink,
70
+ onClick: onSelect,
71
+ // @ts-ignore
72
+ style: ({ isActive }) => isActive ? { textDecoration: 'underline' } : {},
73
+ children: undefined, // shut up ts
74
+ },
75
+ it.icon && h(ListItemIcon, { sx:{ color: 'primary.contrastText' } }, h(it.icon)),
76
+ h(ListItemText, { primary: getMenuLabel(it) })
77
+ ) ),
78
+ h(Box, { sx: { flex: 1, opacity: .7, background: 'url(hfs-logo.svg) no-repeat bottom', backgroundSize: 'contain', margin: 2 } }),
79
+ )
80
)
81
}
82
admin/src/dialog.ts
+1
-1
@@ -76,7 +76,7 @@ dialogsDefaults.Container = function Container(d:DialogOptions) {
76
}
77
78
export function useDialogBarColors() {
79
- return useDark() ? { bgcolor: '#2d2d2d' } : { bgcolor:'#aaa', color: '#444', }
79
+ return useDark() ? { bgcolor: '#2d2d2d' } : { bgcolor:'#ccc', color: '#444', }
80
}
81
82
type AlertType = 'error' | 'warning' | 'info' | 'success'