mirror of
https://github.com/hyperspacedev/hyperspace
synced 2025-01-30 17:14:57 +01:00
adds masonry layout to local and public feeds
This commit is contained in:
parent
af4f6e1d53
commit
95e5849be8
@ -41,7 +41,8 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"electron-notarize": "^0.1.1",
|
"electron-notarize": "^0.1.1",
|
||||||
"electron-updater": "^4.1.2",
|
"electron-updater": "^4.1.2",
|
||||||
"electron-window-state": "^5.0.3"
|
"electron-window-state": "^5.0.3",
|
||||||
|
"react-masonry-css": "^1.0.14"
|
||||||
},
|
},
|
||||||
"main": "public/electron.js",
|
"main": "public/electron.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
@ -15,11 +15,8 @@ import { Status } from "../types/Status";
|
|||||||
import Mastodon, { StreamListener } from "megalodon";
|
import Mastodon, { StreamListener } from "megalodon";
|
||||||
import { withSnackbar } from "notistack";
|
import { withSnackbar } from "notistack";
|
||||||
import Masonry from 'react-masonry-css'
|
import Masonry from 'react-masonry-css'
|
||||||
|
import { getUserDefaultBool } from "../utilities/settings";
|
||||||
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
|
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
|
||||||
import {
|
|
||||||
getConfig,
|
|
||||||
getUserDefaultBool
|
|
||||||
} from "../utilities/settings";
|
|
||||||
|
|
||||||
interface IHomePageState {
|
interface IHomePageState {
|
||||||
posts?: [Status];
|
posts?: [Status];
|
||||||
@ -214,8 +211,8 @@ class HomePage extends Component<any, IHomePageState> {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</Masonry>)
|
</Masonry>
|
||||||
: (
|
) : (
|
||||||
<div>
|
<div>
|
||||||
{this.state.posts.map((post: Status) => {
|
{this.state.posts.map((post: Status) => {
|
||||||
return (
|
return (
|
||||||
@ -229,8 +226,7 @@ class HomePage extends Component<any, IHomePageState> {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
)
|
)}
|
||||||
}
|
|
||||||
<br />
|
<br />
|
||||||
{this.state.viewDidLoad && !this.state.viewDidError ? (
|
{this.state.viewDidLoad && !this.state.viewDidError ? (
|
||||||
<div
|
<div
|
||||||
|
@ -14,6 +14,8 @@ import Post from "../components/Post";
|
|||||||
import { Status } from "../types/Status";
|
import { Status } from "../types/Status";
|
||||||
import Mastodon, { StreamListener } from "megalodon";
|
import Mastodon, { StreamListener } from "megalodon";
|
||||||
import { withSnackbar } from "notistack";
|
import { withSnackbar } from "notistack";
|
||||||
|
import Masonry from 'react-masonry-css';
|
||||||
|
import { getUserDefaultBool } from "../utilities/settings";
|
||||||
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
|
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
|
||||||
|
|
||||||
interface ILocalPageState {
|
interface ILocalPageState {
|
||||||
@ -23,6 +25,7 @@ interface ILocalPageState {
|
|||||||
viewDidLoad?: boolean;
|
viewDidLoad?: boolean;
|
||||||
viewDidError?: boolean;
|
viewDidError?: boolean;
|
||||||
viewDidErrorCode?: any;
|
viewDidErrorCode?: any;
|
||||||
|
isMasonryLayout?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
class LocalPage extends Component<any, ILocalPageState> {
|
class LocalPage extends Component<any, ILocalPageState> {
|
||||||
@ -34,7 +37,8 @@ class LocalPage extends Component<any, ILocalPageState> {
|
|||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
viewIsLoading: true,
|
viewIsLoading: true,
|
||||||
backlogPosts: null
|
backlogPosts: null,
|
||||||
|
isMasonryLayout: getUserDefaultBool('isMasonryLayout'),
|
||||||
};
|
};
|
||||||
|
|
||||||
this.client = new Mastodon(
|
this.client = new Mastodon(
|
||||||
@ -186,15 +190,44 @@ class LocalPage extends Component<any, ILocalPageState> {
|
|||||||
) : null}
|
) : null}
|
||||||
{this.state.posts ? (
|
{this.state.posts ? (
|
||||||
<div>
|
<div>
|
||||||
{this.state.posts.map((post: Status) => {
|
{this.state.isMasonryLayout ? (
|
||||||
return (
|
<Masonry
|
||||||
<Post
|
breakpointCols={{
|
||||||
key={post.id}
|
default: 4,
|
||||||
post={post}
|
2000: 3,
|
||||||
client={this.client}
|
1400: 2,
|
||||||
/>
|
1050: 1,
|
||||||
);
|
}}
|
||||||
})}
|
className={classes.masonryGrid}
|
||||||
|
columnClassName={classes['my-masonry-grid_column']}
|
||||||
|
>
|
||||||
|
{this.state.posts.map((post: Status) => {
|
||||||
|
return (
|
||||||
|
<div className={classes.masonryGrid_item}>
|
||||||
|
<Post
|
||||||
|
key={post.id}
|
||||||
|
post={post}
|
||||||
|
client={this.client}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Masonry>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
{this.state.posts.map((post: Status) => {
|
||||||
|
return (
|
||||||
|
<div className={classes.masonryGrid_item}>
|
||||||
|
<Post
|
||||||
|
key={post.id}
|
||||||
|
post={post}
|
||||||
|
client={this.client}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<br />
|
<br />
|
||||||
{this.state.viewDidLoad && !this.state.viewDidError ? (
|
{this.state.viewDidLoad && !this.state.viewDidError ? (
|
||||||
<div
|
<div
|
||||||
|
@ -14,6 +14,8 @@ import Post from "../components/Post";
|
|||||||
import { Status } from "../types/Status";
|
import { Status } from "../types/Status";
|
||||||
import Mastodon, { StreamListener } from "megalodon";
|
import Mastodon, { StreamListener } from "megalodon";
|
||||||
import { withSnackbar } from "notistack";
|
import { withSnackbar } from "notistack";
|
||||||
|
import Masonry from 'react-masonry-css';
|
||||||
|
import { getUserDefaultBool } from "../utilities/settings";
|
||||||
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
|
import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward";
|
||||||
|
|
||||||
interface IPublicPageState {
|
interface IPublicPageState {
|
||||||
@ -23,6 +25,7 @@ interface IPublicPageState {
|
|||||||
viewDidLoad?: boolean;
|
viewDidLoad?: boolean;
|
||||||
viewDidError?: boolean;
|
viewDidError?: boolean;
|
||||||
viewDidErrorCode?: any;
|
viewDidErrorCode?: any;
|
||||||
|
isMasonryLayout?:boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
class PublicPage extends Component<any, IPublicPageState> {
|
class PublicPage extends Component<any, IPublicPageState> {
|
||||||
@ -34,7 +37,8 @@ class PublicPage extends Component<any, IPublicPageState> {
|
|||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
viewIsLoading: true,
|
viewIsLoading: true,
|
||||||
backlogPosts: null
|
backlogPosts: null,
|
||||||
|
isMasonryLayout: getUserDefaultBool('isMasonryLayout')
|
||||||
};
|
};
|
||||||
|
|
||||||
this.client = new Mastodon(
|
this.client = new Mastodon(
|
||||||
@ -185,15 +189,44 @@ class PublicPage extends Component<any, IPublicPageState> {
|
|||||||
) : null}
|
) : null}
|
||||||
{this.state.posts ? (
|
{this.state.posts ? (
|
||||||
<div>
|
<div>
|
||||||
{this.state.posts.map((post: Status) => {
|
{this.state.isMasonryLayout ? (
|
||||||
return (
|
<Masonry
|
||||||
<Post
|
breakpointCols={{
|
||||||
key={post.id}
|
default: 4,
|
||||||
post={post}
|
2000: 3,
|
||||||
client={this.client}
|
1400: 2,
|
||||||
/>
|
1050: 1,
|
||||||
);
|
}}
|
||||||
})}
|
className={classes.masonryGrid}
|
||||||
|
columnClassName={classes['my-masonry-grid_column']}
|
||||||
|
>
|
||||||
|
{this.state.posts.map((post: Status) => {
|
||||||
|
return (
|
||||||
|
<div className={classes.masonryGrid_item}>
|
||||||
|
<Post
|
||||||
|
key={post.id}
|
||||||
|
post={post}
|
||||||
|
client={this.client}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Masonry>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
{this.state.posts.map((post: Status) => {
|
||||||
|
return (
|
||||||
|
<div className={classes.masonryGrid_item}>
|
||||||
|
<Post
|
||||||
|
key={post.id}
|
||||||
|
post={post}
|
||||||
|
client={this.client}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<br />
|
<br />
|
||||||
{this.state.viewDidLoad && !this.state.viewDidError ? (
|
{this.state.viewDidLoad && !this.state.viewDidError ? (
|
||||||
<div
|
<div
|
||||||
|
Loading…
x
Reference in New Issue
Block a user