Skip to content

Commit 0c1f58d

Browse files
siddharthkpsiddharthkp
authored
Dashboard: responsive grid - first draft (#3958)
* responsive grid - first draft * 220 not 240!
1 parent a2c5b24 commit 0c1f58d

File tree

6 files changed

+136
-85
lines changed

6 files changed

+136
-85
lines changed

‎packages/app/src/app/pages/NewDashboard/Components/SandboxCard/index.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
11
import React from 'react';
22
import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
33
import { Element, Link } from '@codesandbox/components';
4+
import css from '@styled-system/css';
45

56
export const SandboxCard = ({ sandbox }) => (
6-
<Element>
7+
<Element
8+
css={css({
9+
width: '100%',
10+
height: 240,
11+
border: '1px solid',
12+
borderColor: 'grays.600',
13+
borderRadius: 'medium',
14+
})}
15+
>
716
<Link href={sandboxUrl({ id: sandbox.id, alias: sandbox.alias })}>
817
{sandbox.title || sandbox.alias || sandbox.id}
918
</Link>

‎packages/app/src/app/pages/NewDashboard/Content/index.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,21 @@ import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
99
// import CreateTeam from './routes/CreateTeam';
1010
// import TeamView from './routes/TeamView';
1111
import { Element } from '@codesandbox/components';
12+
import css from '@styled-system/css';
1213
import { StartSandboxes } from './routes/StartSandboxes';
1314
import { Templates } from './routes/Templates';
1415
import { Deleted } from './routes/Deleted';
1516

1617
const ContentComponent = () => (
17-
<Element style={{ width: 960, margin: '40px auto' }}>
18+
<Element
19+
as="main"
20+
css={css({
21+
maxWidth: 992,
22+
paddingX: 4,
23+
width: '100%',
24+
margin: '40px auto',
25+
})}
26+
>
1827
<Switch>
1928
<Route path="/new-dashboard/start" component={StartSandboxes} />
2029
<Route path="/new-dashboard/templates" component={Templates} />

‎packages/app/src/app/pages/NewDashboard/Content/routes/StartSandboxes/index.tsx‎

Lines changed: 56 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react';
2-
import css from '@styled-system/css';
3-
import { Element, Text, Button } from '@codesandbox/components';
42
import { useQuery } from '@apollo/react-hooks';
53
import { useOvermind } from 'app/overmind';
4+
import { Text, Button, Grid, Column } from '@codesandbox/components';
5+
import css from '@styled-system/css';
6+
67
import {
78
RecentSandboxesQuery,
89
RecentSandboxesQueryVariables,
@@ -56,40 +57,59 @@ export const StartSandboxes = () => {
5657
templatesData.me.recentlyUsedTemplates.slice(0, 4);
5758

5859
return (
59-
<Element>
60-
<Text marginBottom={4} block>
61-
Recently used Templates
62-
</Text>
63-
<Element
64-
css={css({
65-
display: 'grid',
66-
gridTemplateColumns: 'repeat(4,1fr)',
67-
gridGap: 6,
68-
})}
69-
marginBottom={8}
70-
>
71-
{templates.map(({ sandbox }) => (
72-
<SandboxCard sandbox={sandbox} key={sandbox.id} />
73-
))}
74-
</Element>
60+
<>
61+
<section>
62+
<Text marginBottom={4} block>
63+
Recently used Templates
64+
</Text>
65+
<Grid
66+
rowGap={6}
67+
columnGap={6}
68+
marginBottom={8}
69+
css={css({
70+
gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
71+
})}
72+
>
73+
{templates.map(({ sandbox }) => (
74+
<Column key={sandbox.id}>
75+
<SandboxCard sandbox={sandbox} />
76+
</Column>
77+
))}
78+
</Grid>
79+
</section>
7580

76-
<Text marginBottom={4} block>
77-
Your Recent Sandboxes
78-
</Text>
79-
<Element
80-
css={css({
81-
display: 'grid',
82-
gridTemplateColumns: 'repeat(4,1fr)',
83-
gridGap: 6,
84-
})}
85-
>
86-
<Button onClick={() => modalOpened({ modal: 'newSandbox' })}>
87-
New Sandbox
88-
</Button>
89-
{sandboxes.map(sandbox => (
90-
<SandboxCard sandbox={sandbox} key={sandbox.id} />
91-
))}
92-
</Element>
93-
</Element>
81+
<section>
82+
<Text marginBottom={4} block>
83+
Your Recent Sandboxes
84+
</Text>
85+
<Grid
86+
rowGap={6}
87+
columnGap={6}
88+
marginBottom={8}
89+
css={css({
90+
gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
91+
})}
92+
>
93+
<Column>
94+
<Button
95+
onClick={() => modalOpened({ modal: 'newSandbox' })}
96+
css={css({
97+
height: 240,
98+
border: '1px solid',
99+
borderColor: 'grays.600',
100+
borderRadius: 'medium',
101+
})}
102+
>
103+
New Sandbox
104+
</Button>
105+
</Column>
106+
{sandboxes.map(sandbox => (
107+
<Column key={sandbox.id}>
108+
<SandboxCard sandbox={sandbox} />
109+
</Column>
110+
))}
111+
</Grid>
112+
</section>
113+
</>
94114
);
95115
};

‎packages/app/src/app/pages/NewDashboard/Header/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const Header = () => {
3535
<Input
3636
type="text"
3737
placeholder="Search all sandboxes"
38-
css={{ maxWidth: 480 }}
38+
css={css({ maxWidth: 480, display: ['none', 'none', 'block'] })}
3939
/>
4040
<Stack align="center" gap={2}>
4141
<Button

‎packages/app/src/app/pages/NewDashboard/Sidebar/index.tsx‎

Lines changed: 48 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,51 @@
11
import React from 'react';
2-
import { List, Link, ListAction } from '@codesandbox/components';
3-
import { Link as BaseLink } from 'react-router-dom';
2+
import { Link as RouterLink } from 'react-router-dom';
3+
import { Element, List, ListAction, Link } from '@codesandbox/components';
4+
import css from '@styled-system/css';
45

5-
export const Sidebar = () => (
6-
<List>
7-
<ListAction>
8-
<Link to="start" as={BaseLink}>
9-
Start
10-
</Link>
11-
</ListAction>
12-
<ListAction>
13-
<Link to="drafts" as={BaseLink}>
14-
Drafts
15-
</Link>
16-
</ListAction>
17-
<ListAction>
18-
<Link to="recent" as={BaseLink}>
19-
Recent
20-
</Link>
21-
</ListAction>
22-
<ListAction>
23-
<Link to="all" as={BaseLink}>
24-
All Sandboxes
25-
</Link>
26-
</ListAction>
27-
<ListAction>
28-
<Link to="templates" as={BaseLink}>
29-
Templates
30-
</Link>
31-
</ListAction>
32-
<ListAction>
33-
<Link to="deleted" as={BaseLink}>
34-
Recently Deleted
35-
</Link>
36-
</ListAction>
37-
</List>
6+
export const Sidebar = props => (
7+
<Element
8+
as="aside"
9+
{...props}
10+
css={css({
11+
borderRight: '1px solid',
12+
borderColor: 'sideBar.border',
13+
width: [0, 0, 240],
14+
flexShrink: 0,
15+
display: ['none', 'none', 'block'],
16+
})}
17+
>
18+
<List>
19+
<ListAction>
20+
<Link to="start" as={RouterLink}>
21+
Start
22+
</Link>
23+
</ListAction>
24+
<ListAction>
25+
<Link to="drafts" as={RouterLink}>
26+
Drafts
27+
</Link>
28+
</ListAction>
29+
<ListAction>
30+
<Link to="recent" as={RouterLink}>
31+
Recent
32+
</Link>
33+
</ListAction>
34+
<ListAction>
35+
<Link to="all" as={RouterLink}>
36+
All Sandboxes
37+
</Link>
38+
</ListAction>
39+
<ListAction>
40+
<Link to="templates" as={RouterLink}>
41+
Templates
42+
</Link>
43+
</ListAction>
44+
<ListAction>
45+
<Link to="deleted" as={RouterLink}>
46+
Recently Deleted
47+
</Link>
48+
</ListAction>
49+
</List>
50+
</Element>
3851
);

‎packages/app/src/app/pages/NewDashboard/index.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,18 @@ export const Dashboard: FunctionComponent = () => {
3232

3333
return (
3434
<ThemeProvider theme={codesandboxBlack}>
35-
<Stack direction="vertical">
35+
<Stack
36+
direction="vertical"
37+
css={css({
38+
fontFamily: "'Inter', sans-serif",
39+
backgroundColor: 'sideBar.background',
40+
color: 'sideBar.foreground',
41+
width: '100vw',
42+
minHeight: '100vh',
43+
})}
44+
>
3645
<Header />
37-
<Stack
38-
gap={6}
39-
css={css({
40-
backgroundColor: 'sideBar.background',
41-
fontFamily: "'Inter', sans-serif",
42-
color: 'sideBar.foreground',
43-
minHeight: 'calc(100vh - 48px)',
44-
width: '100vw',
45-
})}
46-
>
46+
<Stack css={{ flexGrow: 1 }}>
4747
<Sidebar />
4848
<Content />
4949
</Stack>

0 commit comments

Comments
 (0)