Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add grid w/container query for projects #8344

Merged
merged 3 commits into from
Oct 3, 2024
Merged

fix: add grid w/container query for projects #8344

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7aba1c2
fix: add grid w/container query for projects
thomasheartman Oct 2, 2024
1471b24
fix: remove some weird spacing
thomasheartman Oct 2, 2024
4de54e4
fix: use flex when collapsing the grid
thomasheartman Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 69 additions & 0 deletions frontend/src/component/personalDashboard/Grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,75 @@
import { Box, Grid, styled } from '@mui/material';
import type { Theme } from '@mui/material/styles/createTheme';

export const ContentGridContainer = styled('div')({
containerType: 'inline-size',
});
Comment on lines +4 to +6
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You need external containers to be able to use container queries. This contains the grid so we can check the size of it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why only inline and not block+inline?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That... I don't know. When playing with containers before, I've tried both, and I think this is usually the one that's worked out well for me. Must be something I don't quite get, but it works here, so 🤷🏼

(side note: if you read up on it and grok it proper, please let me know 😄 )


const ContentGrid2 = styled('article')(({ theme }) => {
return {
backgroundColor: theme.palette.divider,
borderRadius: `${theme.shape.borderRadiusLarge}px`,
overflow: 'hidden',
border: `0.5px solid ${theme.palette.divider}`,
gap: `2px`,

display: 'grid',

'&>*': {
backgroundColor: theme.palette.background.paper,
},
Comment on lines +18 to +20
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

make sure all direct children have a background color. This can be pushed to the gird items if we want.

};
});

export const ProjectGrid = styled(ContentGrid2)(({ theme }) => ({
gridTemplateAreas: `
"title"
"onboarding"
"projects"
"box1"
"box2"
"owners"
`,

'@container (min-width: 1000px)': {
gridTemplateColumns: '1fr 1fr 1fr',
gridTemplateAreas: `
"title onboarding onboarding"
"projects box1 box2"
". owners owners"
`,
},
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

because we use named areas in the items, that messes things up if we suddenly don't have any areas mentioned in the 1-column layout. As such, the workaround is to list them in all possible layouts.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Optionally (just thought of this): we could only use a grid layout when we're wider than X px, and use a flex layout otherwise. That's probably a cleaner option.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I prefer the grid/flex distinction depending on size

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I agree!


'@supports not (container-type: inline-size)': {
[theme.breakpoints.up('lg')]: {
gridTemplateColumns: '1fr 1fr 1fr',
gridTemplateAreas: `
"title onboarding onboarding"
"projects box1 box2"
". owners owners"
`,
},
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If your browser doesn't support container queries AND we're on 'lg' screens, here's the fallback.

},
}));

export const SpacedGridItem2 = styled('div')(({ theme }) => ({
padding: theme.spacing(4),
}));

export const EmptyGridItem = styled('div')(({ theme }) => ({
display: 'none',

'@container (min-width: 1000px)': {
display: 'block',
},

'@supports not (container-type: inline-size)': {
[theme.breakpoints.up('lg')]: {
display: 'block',
},
},
}));
Comment on lines +52 to +64
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an empty element to take up spaces in the grid when it's multi-column (the special . area). We hide it to avoid showing an empty div in the list when we collapse the grid.


export const ContentGrid = styled(Grid)(({ theme }) => ({
backgroundColor: theme.palette.background.paper,
borderRadius: `${theme.shape.borderRadiusLarge}px`,
Expand Down
223 changes: 125 additions & 98 deletions frontend/src/component/personalDashboard/MyProjects.tsx
View file
Open in desktop
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is mostly just indentation caused by the container element that I added. The only relevant change here is removing item, lg, and md props from the grid items and switching to using the new components instead. Also: add grid areas.

Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,12 @@ import type {
PersonalDashboardSchemaProjectsItem,
} from '../../openapi';
import {
ContentGrid,
ContentGridContainer,
EmptyGridItem,
ListItemBox,
listItemStyle,
SpacedGridItem,
ProjectGrid,
SpacedGridItem2,
} from './Grid';

const ActiveProjectDetails: FC<{
Expand Down Expand Up @@ -78,104 +80,129 @@ export const MyProjects: FC<{
activeProjectStage === 'first-flag-created';

return (
<ContentGrid container columns={{ lg: 12, md: 1 }}>
<SpacedGridItem item lg={4} md={1}>
<Typography variant='h3'>My projects</Typography>
</SpacedGridItem>
<SpacedGridItem
item
lg={8}
md={1}
sx={{ display: 'flex', justifyContent: 'flex-end' }}
>
{setupIncomplete ? (
<Badge color='warning'>Setup incomplete</Badge>
) : null}
</SpacedGridItem>
<SpacedGridItem item lg={4} md={1}>
<List
disablePadding={true}
sx={{ maxHeight: '400px', overflow: 'auto' }}
<ContentGridContainer>
<ProjectGrid>
<SpacedGridItem2
sx={{
gridArea: 'title',
}}
>
{projects.map((project) => {
return (
<ListItem
key={project.id}
disablePadding={true}
sx={{ mb: 1 }}
>
<ListItemButton
sx={listItemStyle}
selected={project.id === activeProject}
onClick={() => setActiveProject(project.id)}
<Typography variant='h3'>My projects</Typography>
</SpacedGridItem2>
<SpacedGridItem2
sx={{
gridArea: 'onboarding',
display: 'flex',
justifyContent: 'flex-end',
}}
>
{setupIncomplete ? (
<Badge color='warning'>Setup incomplete</Badge>
) : null}
</SpacedGridItem2>
<SpacedGridItem2
sx={{
gridArea: 'projects',
}}
>
<List
disablePadding={true}
sx={{ maxHeight: '400px', overflow: 'auto' }}
>
{projects.map((project) => {
return (
<ListItem
key={project.id}
disablePadding={true}
sx={{ mb: 1 }}
>
<ListItemBox>
<ProjectIcon color='primary' />
<StyledCardTitle>
{project.name}
</StyledCardTitle>
<IconButton
component={Link}
href={`projects/${project.id}`}
size='small'
sx={{ ml: 'auto' }}
>
<LinkIcon
titleAccess={`projects/${project.id}`}
<ListItemButton
sx={listItemStyle}
selected={project.id === activeProject}
onClick={() =>
setActiveProject(project.id)
}
>
<ListItemBox>
<ProjectIcon color='primary' />
<StyledCardTitle>
{project.name}
</StyledCardTitle>
<IconButton
component={Link}
href={`projects/${project.id}`}
size='small'
sx={{ ml: 'auto' }}
>
<LinkIcon
titleAccess={`projects/${project.id}`}
/>
</IconButton>
</ListItemBox>
{project.id === activeProject ? (
<ActiveProjectDetails
project={project}
/>
</IconButton>
</ListItemBox>
{project.id === activeProject ? (
<ActiveProjectDetails
project={project}
/>
) : null}
</ListItemButton>
</ListItem>
);
})}
</List>
</SpacedGridItem>
<SpacedGridItem item lg={4} md={1}>
{activeProjectStage === 'onboarded' &&
personalDashboardProjectDetails ? (
<ProjectSetupComplete
project={activeProject}
insights={personalDashboardProjectDetails.insights}
/>
) : null}
{activeProjectStage === 'onboarding-started' ||
activeProjectStage === 'loading' ? (
<CreateFlag project={activeProject} />
) : null}
{activeProjectStage === 'first-flag-created' ? (
<ExistingFlag project={activeProject} />
) : null}
</SpacedGridItem>
<SpacedGridItem item lg={4} md={1} sx={{ pr: 4 }}>
{activeProjectStage === 'onboarded' &&
personalDashboardProjectDetails ? (
<LatestProjectEvents
latestEvents={
personalDashboardProjectDetails.latestEvents
}
/>
) : null}
{setupIncomplete || activeProjectStage === 'loading' ? (
<ConnectSDK project={activeProject} />
) : null}
</SpacedGridItem>
<SpacedGridItem item lg={4} md={1} />
<SpacedGridItem item lg={8} md={1}>
{personalDashboardProjectDetails ? (
<RoleAndOwnerInfo
roles={personalDashboardProjectDetails.roles.map(
(role) => role.name,
)}
owners={personalDashboardProjectDetails.owners}
/>
) : null}
</SpacedGridItem>
</ContentGrid>
) : null}
</ListItemButton>
</ListItem>
);
})}
</List>
</SpacedGridItem2>
<SpacedGridItem2
sx={{
gridArea: 'box1',
}}
>
{activeProjectStage === 'onboarded' &&
personalDashboardProjectDetails ? (
<ProjectSetupComplete
project={activeProject}
insights={personalDashboardProjectDetails.insights}
/>
) : null}
{activeProjectStage === 'onboarding-started' ||
activeProjectStage === 'loading' ? (
<CreateFlag project={activeProject} />
) : null}
{activeProjectStage === 'first-flag-created' ? (
<ExistingFlag project={activeProject} />
) : null}
</SpacedGridItem2>
<SpacedGridItem2
sx={{
gridArea: 'box2',
}}
>
{activeProjectStage === 'onboarded' &&
personalDashboardProjectDetails ? (
<LatestProjectEvents
latestEvents={
personalDashboardProjectDetails.latestEvents
}
/>
) : null}
{setupIncomplete || activeProjectStage === 'loading' ? (
<ConnectSDK project={activeProject} />
) : null}
</SpacedGridItem2>
<EmptyGridItem />
<SpacedGridItem2
sx={{
gridArea: 'owners',
}}
>
{personalDashboardProjectDetails ? (
<RoleAndOwnerInfo
roles={personalDashboardProjectDetails.roles.map(
(role) => role.name,
)}
owners={personalDashboardProjectDetails.owners}
/>
) : null}
</SpacedGridItem2>
</ProjectGrid>
</ContentGridContainer>
);
};
Loading