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

fix: improve breadcrumb spacing (#2889)

Browse Source 
https://linear.app/unleash/issue/2-575/improve-the-breadcrumb-spacing


![image](https://user-images.githubusercontent.com/14320932/212101040-1ac8420a-6e16-4879-b030-e343bb977f85.png)


![image](https://user-images.githubusercontent.com/14320932/212101196-50737ab4-49e6-454b-b386-491142798f37.png)
This commit is contained in:
Nuno Góis 2023-01-12 15:23:45 +00:00 committed by GitHub
parent dd7d3de76a
commit 172f911851
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
View File

@ -6,9 +6,9 @@ import { useContext } from 'react';
import StringTruncator from '../StringTruncator/StringTruncator'; import StringTruncator from '../StringTruncator/StringTruncator';
import { styled } from '@mui/material'; import { styled } from '@mui/material';
const StyledBreadCrumbs = styled(Breadcrumbs)(({ theme }) => ({ const StyledBreadcrumbContainer = styled('div')(({ theme }) => ({
position: 'absolute', height: theme.spacing(2.5),
top: theme.spacing(0.25), margin: theme.spacing(2, 0),
})); }));
const StyledParagraph = styled('p')({ const StyledParagraph = styled('p')({
@ -50,55 +50,57 @@ const BreadcrumbNav = () => {
); );
return ( return (
<ConditionallyRender <StyledBreadcrumbContainer>
condition={ <ConditionallyRender
(location.pathname.includes('admin') && isAdmin) || condition={
!location.pathname.includes('admin') (location.pathname.includes('admin') && isAdmin) ||
} !location.pathname.includes('admin')
show={ }
<ConditionallyRender show={
condition={paths.length > 1} <ConditionallyRender
show={ condition={paths.length > 1}
<StyledBreadCrumbs aria-label="Breadcrumbs"> show={
{paths.map((path, index) => { <Breadcrumbs aria-label="Breadcrumbs">
const lastItem = index === paths.length - 1; {paths.map((path, index) => {
if (lastItem) { const lastItem = index === paths.length - 1;
if (lastItem) {
return (
<StyledParagraph key={path}>
<StringTruncator
text={path}
maxWidth="200"
maxLength={25}
/>
</StyledParagraph>
);
}
let link = '/';
paths.forEach((path, i) => {
if (i !== index && i < index) {
link += path + '/';
} else if (i === index) {
link += path;
}
});
return ( return (
<StyledParagraph key={path}> <StyledLink key={path} to={link}>
<StringTruncator <StringTruncator
maxLength={25}
text={path} text={path}
maxWidth="200" maxWidth="200"
maxLength={25}
/> />
</StyledParagraph> </StyledLink>
); );
} })}
</Breadcrumbs>
let link = '/'; }
/>
paths.forEach((path, i) => { }
if (i !== index && i < index) { />
link += path + '/'; </StyledBreadcrumbContainer>
} else if (i === index) {
link += path;
}
});
return (
<StyledLink key={path} to={link}>
<StringTruncator
maxLength={25}
text={path}
maxWidth="200"
/>
</StyledLink>
);
})}
</StyledBreadCrumbs>
}
/>
}
/>
); );
}; };

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

@ -34,8 +34,7 @@ const MainLayoutContentWrapper = styled('main')(({ theme }) => ({
const MainLayoutContent = styled(Grid)(({ theme }) => ({ const MainLayoutContent = styled(Grid)(({ theme }) => ({
width: '1250px', width: '1250px',
marginLeft: 'auto', margin: '0 auto',
marginRight: 'auto',
[theme.breakpoints.down('lg')]: { [theme.breakpoints.down('lg')]: {
width: '1024px', width: '1024px',
}, },
@ -62,10 +61,10 @@ const StyledImg = styled('img')(() => ({
const MainLayoutContentContainer = styled('div')(({ theme }) => ({ const MainLayoutContentContainer = styled('div')(({ theme }) => ({
height: '100%', height: '100%',
padding: theme.spacing(6.5, 0), padding: theme.spacing(0, 0, 6.5, 0),
position: 'relative', position: 'relative',
[theme.breakpoints.down('md')]: { [theme.breakpoints.down('md')]: {
padding: theme.spacing(6.5, 1.5), padding: theme.spacing(0, 1.5, 6.5, 1.5),
}, },
zIndex: 200, zIndex: 200,
})); }));