implements masonry layout with breakpoints
This commit is contained in:
parent
4cdc67b94f
commit
e178a01fff
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue