Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-12 13:48:35 +02: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

12
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,6 +50,7 @@ const BreadcrumbNav = () => {
); );
return ( return (
<StyledBreadcrumbContainer>
<ConditionallyRender <ConditionallyRender
condition={ condition={
(location.pathname.includes('admin') && isAdmin) || (location.pathname.includes('admin') && isAdmin) ||
@ -59,7 +60,7 @@ const BreadcrumbNav = () => {
<ConditionallyRender <ConditionallyRender
condition={paths.length > 1} condition={paths.length > 1}
show={ show={
<StyledBreadCrumbs aria-label="Breadcrumbs"> <Breadcrumbs aria-label="Breadcrumbs">
{paths.map((path, index) => { {paths.map((path, index) => {
const lastItem = index === paths.length - 1; const lastItem = index === paths.length - 1;
if (lastItem) { if (lastItem) {
@ -94,11 +95,12 @@ const BreadcrumbNav = () => {
</StyledLink> </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 }) => ({ 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,
})); }));