adds back original padding when masonry disabled
This commit is contained in:
parent
6ef1daaec9
commit
313ff79116
|
@ -158,9 +158,13 @@ class HomePage extends Component<any, IHomePageState> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { classes } = this.props;
|
const { classes } = this.props;
|
||||||
|
const containerClasses = `${classes.pageLayoutMaxConstraints}${
|
||||||
|
this.state.isMasonryLayout
|
||||||
|
? ' ' + classes.pageLayoutMasonry
|
||||||
|
: ''
|
||||||
|
}`;
|
||||||
return (
|
return (
|
||||||
<div className={classes.pageLayoutMaxConstraints}>
|
<div className={containerClasses}>
|
||||||
{this.state.backlogPosts ? (
|
{this.state.backlogPosts ? (
|
||||||
<div className={classes.pageTopChipContainer}>
|
<div className={classes.pageTopChipContainer}>
|
||||||
<div className={classes.pageTopChips}>
|
<div className={classes.pageTopChips}>
|
||||||
|
@ -216,13 +220,11 @@ class HomePage extends Component<any, IHomePageState> {
|
||||||
<div>
|
<div>
|
||||||
{this.state.posts.map((post: Status) => {
|
{this.state.posts.map((post: Status) => {
|
||||||
return (
|
return (
|
||||||
<div className={classes.masonryGrid_item}>
|
|
||||||
<Post
|
<Post
|
||||||
key={post.id}
|
key={post.id}
|
||||||
post={post}
|
post={post}
|
||||||
client={this.client}
|
client={this.client}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -33,22 +33,22 @@ export const styles = (theme: Theme) =>
|
||||||
marginLeft: 250,
|
marginLeft: 250,
|
||||||
marginTop: 88,
|
marginTop: 88,
|
||||||
padding: theme.spacing.unit * 3,
|
padding: theme.spacing.unit * 3,
|
||||||
paddingLeft: theme.spacing.unit * 3,
|
paddingLeft: theme.spacing.unit * 16,
|
||||||
paddingRight: theme.spacing.unit * 3
|
paddingRight: theme.spacing.unit * 16,
|
||||||
},
|
},
|
||||||
[theme.breakpoints.up("lg")]: {
|
[theme.breakpoints.up("lg")]: {
|
||||||
marginLeft: 250,
|
marginLeft: 250,
|
||||||
marginTop: 88,
|
marginTop: 88,
|
||||||
padding: theme.spacing.unit * 3,
|
padding: theme.spacing.unit * 3,
|
||||||
paddingLeft: theme.spacing.unit * 3,
|
paddingLeft: theme.spacing.unit * 32,
|
||||||
paddingRight: theme.spacing.unit * 3
|
paddingRight: theme.spacing.unit * 32,
|
||||||
},
|
},
|
||||||
[theme.breakpoints.up("xl")]: {
|
[theme.breakpoints.up("xl")]: {
|
||||||
marginLeft: 250,
|
marginLeft: 250,
|
||||||
marginTop: 88,
|
marginTop: 88,
|
||||||
padding: theme.spacing.unit * 3,
|
padding: theme.spacing.unit * 3,
|
||||||
paddingLeft: theme.spacing.unit * 3,
|
paddingLeft: theme.spacing.unit * 40,
|
||||||
paddingRight: theme.spacing.unit * 3
|
paddingRight: theme.spacing.unit * 40,
|
||||||
},
|
},
|
||||||
backgroundColor: theme.palette.background.default,
|
backgroundColor: theme.palette.background.default,
|
||||||
minHeight: isDarwinApp() ? "100vh" : "auto"
|
minHeight: isDarwinApp() ? "100vh" : "auto"
|
||||||
|
@ -324,6 +324,10 @@ export const styles = (theme: Theme) =>
|
||||||
},
|
},
|
||||||
backgroundColor: theme.palette.primary.main
|
backgroundColor: theme.palette.primary.main
|
||||||
},
|
},
|
||||||
|
pageLayoutMasonry: {
|
||||||
|
paddingLeft: theme.spacing.unit * 3,
|
||||||
|
paddingRight: theme.spacing.unit * 3,
|
||||||
|
},
|
||||||
masonryGrid: {
|
masonryGrid: {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
width: 'auto',
|
width: 'auto',
|
||||||
|
|
Loading…
Reference in New Issue