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

feat: More spacious layout (#7138)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-05-24 11:18:11 +02:00 committed by GitHub
parent 345c34a945
commit 242f31c251
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,23 +38,7 @@ const MainLayoutContentWrapper = styled('main')(({ theme }) => ({
position: 'relative', position: 'relative',
})); }));
const MainLayoutContent = styled(Grid)(({ theme }) => ({ const OldMainLayoutContent = styled(Grid)(({ theme }) => ({
width: '1250px',
margin: '0 auto',
[theme.breakpoints.down('lg')]: {
width: '1024px',
},
[theme.breakpoints.down(1024)]: {
width: '100%',
marginLeft: 0,
marginRight: 0,
},
[theme.breakpoints.down('sm')]: {
minWidth: '100%',
},
}));
const SpaciousMainLayoutContent = styled(Grid)(({ theme }) => ({
width: '100%', width: '100%',
maxWidth: '1512px', maxWidth: '1512px',
margin: '0 auto', margin: '0 auto',
@ -74,6 +58,19 @@ const SpaciousMainLayoutContent = styled(Grid)(({ theme }) => ({
}, },
})); }));
const NewMainLayoutContent = styled(Grid)(({ theme }) => ({
width: '100%',
minWidth: 0, // this is a fix for overflowing flex
margin: theme.spacing(0, 7),
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
[theme.breakpoints.down('lg')]: {
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
margin: 0,
},
}));
const StyledImg = styled('img')(() => ({ const StyledImg = styled('img')(() => ({
display: 'block', display: 'block',
position: 'fixed', position: 'fixed',
@ -103,10 +100,12 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
projectId || '', projectId || '',
); );
const StyledMainLayoutContent = SpaciousMainLayoutContent;
const sidebarNavigationEnabled = useUiFlag('navigationSidebar'); const sidebarNavigationEnabled = useUiFlag('navigationSidebar');
const StyledMainLayoutContent = sidebarNavigationEnabled
? NewMainLayoutContent
: OldMainLayoutContent;
const theme = useTheme(); const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg'));
return ( return (
<> <>
@ -122,6 +121,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
)} )}
show={<DraftBanner project={projectId || ''} />} show={<DraftBanner project={projectId || ''} />}
/> />
<Box <Box
sx={(theme) => ({ sx={(theme) => ({
display: 'flex', display: 'flex',
@ -134,6 +134,7 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
} }
show={<NavigationSidebar />} show={<NavigationSidebar />}
/> />
<StyledMainLayoutContent <StyledMainLayoutContent
item item
xs={12} xs={12}

3
frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
View File

@ -170,9 +170,6 @@ export const StyledBox = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.background.paper, backgroundColor: theme.palette.background.paper,
paddingTop: theme.spacing(2), paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(6), paddingBottom: theme.spacing(6),
height: '100%',
position: 'absolute',
zIndex: theme.zIndex.sticky,
})); }));
const icons: Record<string, typeof SvgIcon> = { const icons: Record<string, typeof SvgIcon> = {

7
frontend/src/component/menu/Header/Header.tsx
View File

@ -158,7 +158,12 @@ const Header: VFC = () => {
const disableNotifications = useUiFlag('disableNotifications'); const disableNotifications = useUiFlag('disableNotifications');
const { uiConfig, isOss } = useUiConfig(); const { uiConfig, isOss } = useUiConfig();
const smallScreen = useMediaQuery(theme.breakpoints.down('md')); const sidebarNavigationEnabled = useUiFlag('navigationSidebar');
const smallScreen = useMediaQuery(
sidebarNavigationEnabled
? theme.breakpoints.down('lg')
: theme.breakpoints.down('md'),
);
const [openDrawer, setOpenDrawer] = useState(false); const [openDrawer, setOpenDrawer] = useState(false);
const toggleDrawer = () => setOpenDrawer((prev) => !prev); const toggleDrawer = () => setOpenDrawer((prev) => !prev);
const onAdminClose = () => setAdminRef(null); const onAdminClose = () => setAdminRef(null);