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

fix: handle long names in new project card footers (#7216)

Browse Source 
This is a redo of #7215. I missed the case where you have multiple
owners, causing it to lay out weird in that case.

This version handles that by returning an empty div for the owners
instead to fill up that space.

![image](https://github.com/Unleash/unleash/assets/17786332/4d0944a8-988c-4507-a127-755bbda90921)


![image](https://github.com/Unleash/unleash/assets/17786332/14feee20-e1f7-4507-b53d-c70b7d2961dc)


There **are** edge cases where the owners wrap:

![image](https://github.com/Unleash/unleash/assets/17786332/159838e3-2ea1-4846-9d53-357b1377c8e0)


But that is also the case with the current implementation:

![image](https://github.com/Unleash/unleash/assets/17786332/3e3be245-5ca7-46d9-bb3f-a453c90b4b78)

And only happens at very specific breakpoints.
This commit is contained in:
Thomas Heartman 2024-05-30 10:59:44 +02:00 committed by GitHub
parent 669e21eef0
commit 1ac447141a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/component/project/NewProjectCard/ProjectCardFooter/ProjectCardFooter.tsx
View File

@ -11,17 +11,17 @@ interface IProjectCardFooterProps {
}
const StyledFooter = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
display: 'grid',
gridTemplateColumns: 'auto 1fr auto',
alignItems: 'center',
padding: theme.spacing(1.5, 3),
padding: theme.spacing(1.5, 3, 2.5, 3),
background: theme.palette.envAccordion.expanded,
boxShadow: theme.boxShadows.accordionFooter,
}));
const StyledFavoriteIconButton = styled(FavoriteIconButton)(({ theme }) => ({
marginRight: theme.spacing(-1),
marginLeft: 'auto',
marginBottom: theme.spacing(-1),
}));
export const ProjectCardFooter: FC<IProjectCardFooterProps> = ({

15
frontend/src/component/project/NewProjectCard/ProjectOwners/ProjectOwners.tsx
View File

@ -41,15 +41,13 @@ const useOwnersMap = () => {
};
};
const StyledContainer = styled('div')(({ theme }) => ({
marginBottom: theme.spacing(1),
display: 'flex',
alignItems: 'flex-end',
}));
const StyledUserName = styled('p')(({ theme }) => ({
fontSize: theme.typography.body1.fontSize,
margin: theme.spacing(0, 0, 0.5, 0),
overflowX: 'hidden',
textOverflow: 'ellipsis',
textWrap: 'nowrap',
alignSelf: 'end',
}));
export const ProjectOwners: FC<IProjectOwnersProps> = ({ owners = [] }) => {
@ -57,7 +55,7 @@ export const ProjectOwners: FC<IProjectOwnersProps> = ({ owners = [] }) => {
const users = owners.map(ownersMap);
return (
<StyledContainer>
<>
<GroupCardAvatars
header={owners.length === 1 ? 'Owner' : 'Owners'}
users={users}
@ -69,7 +67,8 @@ export const ProjectOwners: FC<IProjectOwnersProps> = ({ owners = [] }) => {
{users[0]?.name || users[0]?.description}
</StyledUserName>
}
elseShow={<div />}
/>
</StyledContainer>
</>
);
};