Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Fix issues with DashboardLayout in Toolpad Core homepage #3893

Merged
merged 8 commits into from
Aug 5, 2024
Merged

[docs] Fix issues with DashboardLayout in Toolpad Core homepage #3893

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fee8f23
Fix issues with DashboardLayout in Toolpad Core homepage
apedroferreira Aug 5, 2024
d015b19
Unused import
apedroferreira Aug 5, 2024
285c279
Merge branch 'master' into fix-dashboard-layout-in-homepage
apedroferreira Aug 5, 2024
46ca7a3
Fix spacing around iframes in Core home page
apedroferreira Aug 5, 2024
8c50ddc
Import again
apedroferreira Aug 5, 2024
172dccd
Merge remote-tracking branch 'upstream/master' into fix-dashboard-lay…
apedroferreira Aug 5, 2024
96be431
Merge remote-tracking branch 'upstream/master' into fix-dashboard-lay…
apedroferreira Aug 5, 2024
763a25e
Why can't we just rerun CI
apedroferreira Aug 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/components/landing-core/ToolpadAuthDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,13 @@ export default function ToolpadDashboardLayout() {
<Paper
variant="outlined"
sx={(theme) => ({
p: 2,
display: 'flex',
alignItems: 'center',
maxWidth: '100%',
mx: 'auto',
bgcolor: '#FFF',
borderRadius: '8px',
overflow: 'hidden',
...theme.applyDarkStyles({
bgcolor: 'primaryDark.900',
}),
Expand Down
69 changes: 33 additions & 36 deletions docs/src/components/landing-core/ToolpadDashboardLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react';
import Paper from '@mui/material/Paper';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import Box from '@mui/material/Box';

import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
Expand Down Expand Up @@ -63,8 +62,10 @@ const NAVIGATION: Navigation = [
},
];

function DashboardLayoutBasic() {
const [pathname, setPathname] = React.useState('/dashboard');
function DashboardLayoutBasic(props: DemoProps) {
const { window } = props;

const [pathname, setPathname] = React.useState('/page');

const router = React.useMemo<Router>(() => {
return {
Expand All @@ -74,19 +75,24 @@ function DashboardLayoutBasic() {
};
}, [pathname]);

const demoWindow = window !== undefined ? window() : undefined;

return (
<AppProvider navigation={NAVIGATION} router={router}>
<AppProvider navigation={NAVIGATION} router={router} window={demoWindow}>
<DashboardLayout>
<Box
sx={{
py: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Typography>Dashboard content for {pathname}</Typography>
</Box>
<PageContainer>
<Grid container spacing={2}>
<Grid size={6}>
<PlaceHolder height={100} />
</Grid>
<Grid size={6}>
<PlaceHolder height={100} />
</Grid>
<Grid size={12}>
<PlaceHolder height={200} />
</Grid>
</Grid>
</PageContainer>
</DashboardLayout>
</AppProvider>
);
Expand Down Expand Up @@ -168,28 +174,19 @@ function DashboardLayoutBasic(props: DemoProps) {
return (
<AppProvider navigation={NAVIGATION} router={router} window={demoWindow}>
<DashboardLayout>
<Box
sx={{
py: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<PageContainer>
<Grid container spacing={2}>
<Grid size={6}>
<PlaceHolder height={100} />
</Grid>
<Grid size={6}>
<PlaceHolder height={100} />
</Grid>
<Grid size={12}>
<PlaceHolder height={200} />
</Grid>
<PageContainer>
<Grid container spacing={2}>
<Grid size={6}>
<PlaceHolder height={100} />
</Grid>
<Grid size={6}>
<PlaceHolder height={100} />
</Grid>
<Grid size={12}>
<PlaceHolder height={200} />
</Grid>
</PageContainer>
</Box>
</Grid>
</PageContainer>
</DashboardLayout>
</AppProvider>
);
Expand All @@ -202,13 +199,13 @@ export default function ToolpadDashboardLayout() {
<Paper
variant="outlined"
sx={(theme) => ({
p: 2,
display: 'flex',
alignItems: 'center',
maxWidth: '100%',
mx: 'auto',
bgcolor: '#FFF',
borderRadius: '8px',
overflow: 'hidden',
...theme.applyDarkStyles({
bgcolor: 'primaryDark.900',
}),
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/landing-core/ToolpadPageContainerDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,13 @@ export default function ToolpadPageContainerDemo() {
<Paper
variant="outlined"
sx={(theme) => ({
p: 2,
display: 'flex',
alignItems: 'center',
maxWidth: '100%',
mx: 'auto',
bgcolor: '#FFF',
borderRadius: '8px',
overflow: 'hidden',
...theme.applyDarkStyles({
bgcolor: 'primaryDark.900',
}),
Expand Down
3 changes: 2 additions & 1 deletion packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const AppBar = styled(MuiAppBar)(({ theme }) => ({
borderStyle: 'solid',
borderColor: (theme.vars ?? theme).palette.divider,
boxShadow: 'none',
left: 0,
zIndex: theme.zIndex.drawer + 1,
}));

Expand Down Expand Up @@ -381,7 +382,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
return (
<Box sx={{ display: 'flex' }}>
<AppBar color="inherit" position="fixed">
<Toolbar sx={{ backgroundColor: 'inherit' }}>
<Toolbar sx={{ backgroundColor: 'inherit', width: '100vw' }}>
<Box sx={{ display: { xs: 'block', md: 'none' } }}>
<Tooltip
title={`${isMobileNavigationOpen ? 'Close' : 'Open'} menu`}
Expand Down
Loading