Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-09 01:17:06 +02:00
Code Issues Projects Releases Wiki Activity

chore: fix weird alignment issue with main content and admin menu (#9636)

Browse Source
This commit is contained in:
David Leek 2025-03-28 13:22:13 +01:00 committed by GitHub
parent db1ec7ffa6
commit 5da9f75014
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 83 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/src/component/layout/MainLayout/AdminMenu/AdminMenu.tsx
View File

@ -5,21 +5,84 @@ import { Sticky } from 'component/common/Sticky/Sticky';
import { AdminMenuNavigation } from './AdminNavigationItems';
import { useLocation } from 'react-router-dom';
const StyledAdminMainGrid = styled(Grid)(({ theme }) => ({
const breakpointLgMinusPadding = 1250;
const breakpointLgMinusPaddingAdmin = 1550;
const breakpointXlMinusPadding = 1512;
const breakpointXlAdmin = 1812;
const breakpointXxl = 1856;
const breakpointXxlAdmin = 2156;
const MainLayoutContent = styled(Grid)(({ theme }) => ({
minWidth: 0, // this is a fix for overflowing flex
maxWidth: '1812px',
maxWidth: `${breakpointXlMinusPadding}px`,
margin: '0 auto',
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
[theme.breakpoints.up(2156)]: {
[theme.breakpoints.up(breakpointXxl)]: {
width: '100%',
},
[theme.breakpoints.down(2156)]: {
[theme.breakpoints.down(breakpointXxl)]: {
marginLeft: theme.spacing(7),
marginRight: theme.spacing(7),
},
[theme.breakpoints.down('lg')]: {
maxWidth: `${breakpointLgMinusPadding}px`,
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
},
[theme.breakpoints.down(1024)]: {
marginLeft: 0,
marginRight: 0,
},
[theme.breakpoints.down('sm')]: {
minWidth: '100%',
},
minHeight: '94vh',
}));
const AdminMainLayoutContent = styled(Grid)(({ theme }) => ({
minWidth: 0, // this is a fix for overflowing flex
maxWidth: `${breakpointXlMinusPadding}px`,
margin: '0 auto',
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
[theme.breakpoints.up(breakpointXxl)]: {
width: '100%',
},
[theme.breakpoints.down(breakpointXxl)]: {
marginLeft: 0,
marginRight: 0,
},
[theme.breakpoints.down('lg')]: {
maxWidth: '1550px',
maxWidth: `${breakpointLgMinusPadding}px`,
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
},
[theme.breakpoints.down(1024)]: {
marginLeft: 0,
marginRight: 0,
},
[theme.breakpoints.down('sm')]: {
minWidth: '100%',
},
minHeight: '94vh',
}));
const StyledAdminMainGrid = styled(Grid)(({ theme }) => ({
minWidth: 0, // this is a fix for overflowing flex
maxWidth: `${breakpointXlAdmin}px`,
margin: '0 auto',
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
[theme.breakpoints.up(breakpointXxlAdmin)]: {
width: '100%',
},
[theme.breakpoints.down(breakpointXxlAdmin)]: {
marginLeft: 0,
marginRight: 0,
},
[theme.breakpoints.down('lg')]: {
maxWidth: `${breakpointLgMinusPaddingAdmin}px`,
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
},
@ -65,10 +128,14 @@ export const WrapIfAdminSubpage = ({ children }: IWrapIfAdminSubpageProps) => {
location.pathname.indexOf('/admin') === 0;
if (showAdminMenu) {
return <AdminMenu>{children}</AdminMenu>;
return (
<AdminMenu>
<AdminMainLayoutContent>{children}</AdminMainLayoutContent>
</AdminMenu>
);
}
return <>{children}</>;
return <MainLayoutContent>{children}</MainLayoutContent>;
};
interface IAdminMenuProps {
@ -77,7 +144,8 @@ interface IAdminMenuProps {
export const AdminMenu = ({ children }: IAdminMenuProps) => {
const theme = useTheme();
const isBreakpoint = useMediaQuery(theme.breakpoints.down(1350));
const isBreakpoint = useMediaQuery(theme.breakpoints.down(1352));
const breakpointedSize = isBreakpoint ? 8 : 9;
const onClick = () => {
scrollTo({
top: 0,
@ -94,7 +162,7 @@ export const AdminMenu = ({ children }: IAdminMenuProps) => {
</StyledMenuPaper>
</StickyContainer>
</Grid>
<Grid item md={isBreakpoint ? true : 9}>
<Grid item md={breakpointedSize}>
{children}
</Grid>
</StyledAdminMainGrid>

44
frontend/src/component/layout/MainLayout/MainLayout.tsx
View File

@ -42,34 +42,6 @@ const MainLayoutContentWrapper = styled('div')(({ theme }) => ({
position: 'relative',
}));
const MainLayoutContent = styled(Grid)(({ theme }) => ({
minWidth: 0, // this is a fix for overflowing flex
maxWidth: '1512px',
margin: '0 auto',
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
[theme.breakpoints.up(1856)]: {
width: '100%',
},
[theme.breakpoints.down(1856)]: {
marginLeft: theme.spacing(7),
marginRight: theme.spacing(7),
},
[theme.breakpoints.down('lg')]: {
maxWidth: '1250px',
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
},
[theme.breakpoints.down(1024)]: {
marginLeft: 0,
marginRight: 0,
},
[theme.breakpoints.down('sm')]: {
minWidth: '100%',
},
minHeight: '94vh',
}));
const StyledImg = styled('img')(() => ({
display: 'block',
position: 'fixed',
@ -147,16 +119,12 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
<Header />
<WrapIfAdminSubpage>
<MainLayoutContent>
<SkipNavTarget />
<MainLayoutContentContainer ref={ref}>
<BreadcrumbNav />
<Proclamation
toast={uiConfig.toast}
/>
{children}
</MainLayoutContentContainer>
</MainLayoutContent>
<SkipNavTarget />
<MainLayoutContentContainer ref={ref}>
<BreadcrumbNav />
<Proclamation toast={uiConfig.toast} />
{children}
</MainLayoutContentContainer>
</WrapIfAdminSubpage>
</Box>
</Box>