Skip to content

Commit f480440

Browse files
Hyperkid123Hyperkid123
committed
Make the editor responsive.
1 parent 2e0cf96 commit f480440

File tree

1 file changed

+127
-67
lines changed

1 file changed

+127
-67
lines changed

‎packages/react-renderer-demo/src/app/src/components/component-example.js‎

Lines changed: 127 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect } from 'react';
22
import { useRouter } from 'next/router';
3-
import Grid from '@material-ui/core/Grid';
3+
import CircularProgress from '@material-ui/core/CircularProgress';
44
import { makeStyles } from '@material-ui/core/styles';
55
import PropTypes from 'prop-types';
66
import Typography from '@material-ui/core/Typography';
@@ -35,12 +35,32 @@ const project = {
3535
};
3636

3737
const useStyles = makeStyles((theme) => ({
38+
box: {
39+
[theme.breakpoints.down('sm')]: {
40+
flexDirection: 'column-reverse'
41+
}
42+
},
43+
smTabDown: {
44+
display: 'none',
45+
[theme.breakpoints.down('sm')]: {
46+
display: 'block'
47+
}
48+
},
49+
smTabUp: {
50+
display: 'block',
51+
[theme.breakpoints.down('sm')]: {
52+
display: 'none'
53+
}
54+
},
3855
tab: {
3956
minWidth: 'initial',
4057
'&.active': {
4158
color: '#000',
4259
background: theme.palette.common.white,
43-
boxShadow: theme.shadows[1]
60+
boxShadow: theme.shadows[1],
61+
'&:last-child': {
62+
marginBottom: 2
63+
}
4464
}
4565
},
4666
indicator: {
@@ -50,10 +70,29 @@ const useStyles = makeStyles((theme) => ({
5070
textDecoration: 'none',
5171
color: 'inherit'
5272
},
73+
spinnerCheat: {
74+
flex: 1,
75+
position: 'relative'
76+
},
77+
spinner: {
78+
position: 'absolute',
79+
top: 'calc(50% - 40px)',
80+
left: 'calc(50% - 40px)',
81+
zIndex: -1
82+
},
5383
editorContainer: {
54-
height: '100%',
84+
minHeight: 500,
85+
flex: 1,
86+
[theme.breakpoints.down('sm')]: {
87+
marginBottom: 16,
88+
flexDirection: 'column'
89+
},
5590
'& iframe': {
56-
border: 'none'
91+
border: 'none',
92+
boxShadow: theme.shadows[1],
93+
[theme.breakpoints.down('sm')]: {
94+
height: 500
95+
}
5796
}
5897
}
5998
}));
@@ -111,35 +150,83 @@ const ComponentExample = ({ baseStructure, activeMapper, component }) => {
111150
);
112151
}, [activeMapper, baseStructure.value]);
113152

153+
const renderTabsChildren = () => [
154+
<Tab
155+
key="mui"
156+
onClick={() => router.push(`${router.pathname}?mapper=mui`)}
157+
className={clsx(classes.tab, { active: activeTab === 0 })}
158+
label={
159+
<Link href={`${router.pathname}?mapper=mui`}>
160+
<a href={`${router.pathname}?mapper=mui`} className={classes.tabLink}>
161+
Mui
162+
</a>
163+
</Link>
164+
}
165+
/>,
166+
<Tab
167+
key="pf4"
168+
onClick={() => router.push(`${router.pathname}?mapper=pf4`)}
169+
className={clsx(classes.tab, { active: activeTab === 1 })}
170+
label={
171+
<Link href={`${router.pathname}?mapper=pf4`}>
172+
<a href={`${router.pathname}?mapper=pf4`} className={classes.tabLink}>
173+
Pf4
174+
</a>
175+
</Link>
176+
}
177+
/>,
178+
<Tab
179+
key="pf3"
180+
onClick={() => router.push(`${router.pathname}?mapper=pf3`)}
181+
className={clsx(classes.tab, { active: activeTab === 2 })}
182+
label={
183+
<Link href={`${router.pathname}?mapper=pf3`}>
184+
<a href={`${router.pathname}?mapper=pf3`} className={classes.tabLink}>
185+
Pf3
186+
</a>
187+
</Link>
188+
}
189+
/>
190+
];
114191
return (
115-
<Grid container direction="row" spacing={4}>
116-
<Grid item xs={false} md={3}>
117-
<Card style={{ minHeight: 500 }} square>
118-
<CardContent>
119-
<Typography component="h3">Options</Typography>
120-
<Table>
121-
<TableHead>
122-
<TableRow>
123-
<TableCell>Name</TableCell>
124-
<TableCell>Type</TableCell>
125-
<TableCell>Required</TableCell>
192+
<Box display="flex" className={classes.box}>
193+
<Card style={{ minHeight: 500 }} square>
194+
<CardContent>
195+
<Typography component="h3">Options</Typography>
196+
<Table>
197+
<TableHead>
198+
<TableRow>
199+
<TableCell>Name</TableCell>
200+
<TableCell>Type</TableCell>
201+
<TableCell>Required</TableCell>
202+
</TableRow>
203+
</TableHead>
204+
<TableBody>
205+
{baseStructure.variants.map(({ name, type, required }) => (
206+
<TableRow key={name}>
207+
<TableCell>{name}</TableCell>
208+
<TableCell>{`${type}`}</TableCell>
209+
<TableCell>{required && <CheckIcon fontSize="small" />}</TableCell>
126210
</TableRow>
127-
</TableHead>
128-
<TableBody>
129-
{baseStructure.variants.map(({ name, type, required }) => (
130-
<TableRow key={name}>
131-
<TableCell>{name}</TableCell>
132-
<TableCell>{`${type}`}</TableCell>
133-
<TableCell>{required && <CheckIcon fontSize="small" />}</TableCell>
134-
</TableRow>
135-
))}
136-
</TableBody>
137-
</Table>
138-
</CardContent>
139-
</Card>
140-
</Grid>
141-
<Grid item xs={12} md={9}>
142-
<Box display="flex" className={classes.editorContainer}>
211+
))}
212+
</TableBody>
213+
</Table>
214+
</CardContent>
215+
</Card>
216+
<Box display="flex" className={classes.editorContainer}>
217+
<div className={classes.smTabDown}>
218+
<Tabs
219+
value={activeTab}
220+
orientation="horizontal"
221+
variant="fullWidth"
222+
classes={{
223+
indicator: classes.indicator
224+
}}
225+
>
226+
{renderTabsChildren()}
227+
</Tabs>
228+
</div>
229+
<div className={classes.smTabUp}>
143230
<Tabs
144231
value={activeTab}
145232
orientation="vertical"
@@ -148,44 +235,17 @@ const ComponentExample = ({ baseStructure, activeMapper, component }) => {
148235
indicator: classes.indicator
149236
}}
150237
>
151-
<Tab
152-
onClick={() => router.push(`${router.pathname}?mapper=mui`)}
153-
className={clsx(classes.tab, { active: activeTab === 0 })}
154-
label={
155-
<Link href={`${router.pathname}?mapper=mui`}>
156-
<a href={`${router.pathname}?mapper=mui`} className={classes.tabLink}>
157-
Mui
158-
</a>
159-
</Link>
160-
}
161-
/>
162-
<Tab
163-
onClick={() => router.push(`${router.pathname}?mapper=pf4`)}
164-
className={clsx(classes.tab, { active: activeTab === 1 })}
165-
label={
166-
<Link href={`${router.pathname}?mapper=pf4`}>
167-
<a href={`${router.pathname}?mapper=pf4`} className={classes.tabLink}>
168-
Pf4
169-
</a>
170-
</Link>
171-
}
172-
/>
173-
<Tab
174-
onClick={() => router.push(`${router.pathname}?mapper=pf3`)}
175-
className={clsx(classes.tab, { active: activeTab === 2 })}
176-
label={
177-
<Link href={`${router.pathname}?mapper=pf3`}>
178-
<a href={`${router.pathname}?mapper=pf3`} className={classes.tabLink}>
179-
Pf3
180-
</a>
181-
</Link>
182-
}
183-
/>
238+
{renderTabsChildren()}
184239
</Tabs>
240+
</div>
241+
<div className={classes.spinnerCheat}>
185242
<div id="code-target"></div>
186-
</Box>
187-
</Grid>
188-
</Grid>
243+
<div className={classes.spinner}>
244+
<CircularProgress color="secondary" size={80} />
245+
</div>
246+
</div>
247+
</Box>
248+
</Box>
189249
);
190250
};
191251

0 commit comments

Comments
 (0)