Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +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 { styled } from '@mui/material';
const StyledBreadCrumbs = styled(Breadcrumbs)(({ theme }) => ({
position: 'absolute',
top: theme.spacing(0.25),
const StyledBreadcrumbContainer = styled('div')(({ theme }) => ({
height: theme.spacing(2.5),
margin: theme.spacing(2, 0),
}));
const StyledParagraph = styled('p')({
@ -50,55 +50,57 @@ const BreadcrumbNav = () => {
);
return (
<ConditionallyRender
condition={
(location.pathname.includes('admin') && isAdmin) ||
!location.pathname.includes('admin')
}
show={
<ConditionallyRender
condition={paths.length > 1}
show={
<StyledBreadCrumbs aria-label="Breadcrumbs">
{paths.map((path, index) => {
const lastItem = index === paths.length - 1;
if (lastItem) {
<StyledBreadcrumbContainer>
<ConditionallyRender
condition={
(location.pathname.includes('admin') && isAdmin) ||
!location.pathname.includes('admin')
}
show={
<ConditionallyRender
condition={paths.length > 1}
show={
<Breadcrumbs aria-label="Breadcrumbs">
{paths.map((path, index) => {
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 (
<StyledParagraph key={path}>
<StyledLink key={path} to={link}>
<StringTruncator
maxLength={25}
text={path}
maxWidth="200"
maxLength={25}
/>
</StyledParagraph>
</StyledLink>
);
}
let link = '/';
paths.forEach((path, i) => {
if (i !== index && i < index) {
link += path + '/';
} else if (i === index) {
link += path;
}
});
return (
<StyledLink key={path} to={link}>
<StringTruncator
maxLength={25}
text={path}
maxWidth="200"
/>
</StyledLink>
);
})}
</StyledBreadCrumbs>
}
/>
}
/>
})}
</Breadcrumbs>
}
/>
}
/>
</StyledBreadcrumbContainer>
);
};

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

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