admin: optimized layout on mobile for some pages
Massimo Melina committed
Nov 28, 2023 at 14:19 UTC
37a7e2b32c1479bbce13a76a0542cd65fd55855a
2 files changed
+7
-5
admin/src/App.ts
+3
-2
@@ -41,6 +41,7 @@ function Routed() {
41
title = current && (current.title || getMenuLabel(current)) || title
42
const [open, setOpen] = useState(false)
43
const large = useBreakpoint('lg')
44
+ const xs = current?.noPaddingOnMobile ? 0 : 1
45
return h(Fragment, {},
46
!large && h(StickyBar, { title, openMenu: () => setOpen(true) }),
47
!large && h(Drawer, { anchor:'left', open, onClose(){ setOpen(false) } },
@@ -54,8 +55,8 @@ function Routed() {
55
sx: {
56
background: 'url(cup.svg) no-repeat right fixed',
57
backgroundSize: 'contain',
57
- px: { xs: 1, md: 2, lg: 3 },
58
- pb: { xs: 1, md: 2 },
58
+ px: { xs, md: 2, lg: 3 },
59
+ pb: { xs, md: 2 },
60
boxSizing: 'border-box', // keep padding inside the viewport
61
position: 'relative',
62
display: 'flex',
admin/src/MainMenu.ts
+4
-3
@@ -39,6 +39,7 @@ interface MenuEntry {
39
label?: string
40
title?: string
41
comp: FC
42
+ noPaddingOnMobile?: true
43
}
44
45
export const mainMenu: MenuEntry[] = [
@@ -47,10 +48,10 @@ export const mainMenu: MenuEntry[] = [
48
{ path: 'accounts', icon: ManageAccounts, comp: AccountsPage },
49
{ path: 'options', icon: Settings, comp: OptionsPage },
50
{ path: 'internet', icon: Public, comp: InternetPage },
50
- { path: 'monitoring', icon: Monitor, comp: MonitorPage },
51
- { path: 'logs', icon: History, comp: LogsPage },
51
+ { path: 'monitoring', icon: Monitor, comp: MonitorPage, noPaddingOnMobile: true },
52
+ { path: 'logs', icon: History, comp: LogsPage, noPaddingOnMobile: true },
53
{ path: 'language', icon: Translate, comp: LangPage },
53
- { path: 'plugins', icon: Extension, comp: PluginsPage },
54
+ { path: 'plugins', icon: Extension, comp: PluginsPage, noPaddingOnMobile: true },
55
{ path: 'html', icon: Code, label: "Custom HTML", comp: CustomHtmlPage },
56
{ path: 'logout', icon: Logout, comp: LogoutPage }
57
]