implements masonry layout with breakpoints

This commit is contained in:
Travis Kohlbeck 2019-12-21 17:14:50 -05:00
parent 4cdc67b94f
commit e178a01fff
2 changed files with 34 additions and 13 deletions

View File

@ -14,6 +14,7 @@ import Post from "../components/Post";
import { Status } from "../types/Status";
import Mastodon, { StreamListener } from "megalodon";
import { withSnackbar } from "notistack";
import Masonry from 'react-masonry-css'
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
interface IHomePageState {
@ -185,15 +186,28 @@ class HomePage extends Component<any, IHomePageState> {
) : null}
{this.state.posts ? (
<div>
<Masonry
breakpointCols={{
default: 4,
2000: 3,
1400: 2,
1050: 1,
}}
className={classes.masonryGrid}
columnClassName={classes['my-masonry-grid_column']}
>
{this.state.posts.map((post: Status) => {
return (
<Post
key={post.id}
post={post}
client={this.client}
/>
<div className={classes.masonryGrid_item}>
<Post
key={post.id}
post={post}
client={this.client}
/>
</div>
);
})}
</Masonry>
<br />
{this.state.viewDidLoad && !this.state.viewDidError ? (
<div

View File

@ -1,4 +1,4 @@
import { Theme, createStyles } from "@material-ui/core";
import { Theme, createStyles, FormHelperText } from "@material-ui/core";
import { isDarwinApp } from "../utilities/desktop";
import { isAppbarExpanded } from "../utilities/appbar";
@ -33,22 +33,22 @@ export const styles = (theme: Theme) =>
marginLeft: 250,
marginTop: 88,
padding: theme.spacing.unit * 3,
paddingLeft: theme.spacing.unit * 16,
paddingRight: theme.spacing.unit * 16
paddingLeft: theme.spacing.unit * 3,
paddingRight: theme.spacing.unit * 3
},
[theme.breakpoints.up("lg")]: {
marginLeft: 250,
marginTop: 88,
padding: theme.spacing.unit * 3,
paddingLeft: theme.spacing.unit * 32,
paddingRight: theme.spacing.unit * 32
paddingLeft: theme.spacing.unit * 3,
paddingRight: theme.spacing.unit * 3
},
[theme.breakpoints.up("xl")]: {
marginLeft: 250,
marginTop: 88,
padding: theme.spacing.unit * 3,
paddingLeft: theme.spacing.unit * 40,
paddingRight: theme.spacing.unit * 40
paddingLeft: theme.spacing.unit * 3,
paddingRight: theme.spacing.unit * 3
},
backgroundColor: theme.palette.background.default,
minHeight: isDarwinApp() ? "100vh" : "auto"
@ -323,5 +323,12 @@ export const styles = (theme: Theme) =>
display: "block"
},
backgroundColor: theme.palette.primary.main
}
},
masonryGrid: {
display: 'flex',
width: 'auto',
},
'my-masonry-grid_column': { // non-standard name fixes react-masonry-css bug :shrug:
padding: 5,
},
});