Mastodon
/
hyperspace-desktop-client-windows-linux-macos
mirror of https://github.com/hyperspacedev/hyperspace
1
0
Fork 0
Code Issues Releases Wiki Activity

Rearrange components in profile page hero 

Signed-off-by: Marquis Kurt <software@marquiskurt.net>
This commit is contained in:
Marquis Kurt 2019-08-22 18:07:33 -04:00
parent 5c8c6ed3de
commit 858117918c
No known key found for this signature in database
GPG Key ID: 725636D259F5402D
2 changed files with 42 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/PageLayout.styles.tsx
View File

@ -85,13 +85,13 @@ export const styles = (theme: Theme) => createStyles({
},
pageHeroContent: {
padding: 16,
paddingTop: 24,
paddingTop: 116,
textAlign: 'center',
width: '100%',
height: '100%',
[theme.breakpoints.up('md')]: {
paddingLeft: '25%',
paddingRight: '25%',
paddingLeft: '5%',
paddingRight: '5%',
},
position: "relative",
zIndex: 1
@ -112,7 +112,33 @@ export const styles = (theme: Theme) => createStyles({
},
profileToolbar: {
zIndex: 2,
paddingTop: 108,
paddingTop: 100,
},
profileContent: {
padding: 16,
[theme.breakpoints.up('md')]: {
paddingLeft: '5%',
paddingRight: '5%'
},
width: '100%',
height: '100%',
position: 'relative',
zIndex: 1,
display: 'flex',
paddingBottom: 24,
paddingTop: 0
},
profileAvatar: {
width: 64,
height: 64,
[theme.breakpoints.up('md')]: {
width: 128,
height: 128,
},
backgroundColor: theme.palette.primary.main
},
profileUserBox: {
paddingLeft: theme.spacing.unit * 2
},
pageProfileAvatar: {
width: 128,
@ -123,7 +149,7 @@ export const styles = (theme: Theme) => createStyles({
backgroundColor: theme.palette.primary.main
},
pageProfileNameEmoji: {
height: theme.typography.h4.fontSize,
height: theme.typography.h4.fontSize
},
pageProfileStatsDiv: {
display: 'inline-flex',
@ -145,7 +171,7 @@ export const styles = (theme: Theme) => createStyles({
paddingRight: theme.spacing.unit,
paddingTop: theme.spacing.unit * 4,
paddingBottom: theme.spacing.unit * 2,
[theme.breakpoints.up('md')]: {
[theme.breakpoints.up('lg')]: {
paddingLeft: theme.spacing.unit * 32,
paddingRight: theme.spacing.unit * 32
},

38
src/pages/ProfilePage.tsx
View File

@ -135,23 +135,6 @@ class ProfilePage extends Component<any, IProfilePageState> {
});
}
statElement(classes: any, stat: 'following' | 'followers' | 'posts') {
let number = 0;
if (this.state.account) {
if (stat == 'following') {
number = this.state.account.following_count;
} else if (stat == 'followers') {
number = this.state.account.followers_count;
} else if (stat == 'posts') {
number = this.state.account.statuses_count;
}
}
return <div className={classes.pageProfileStat}>
<Typography variant="h6" color="inherit">{number}</Typography>
<Typography color="inherit">{stat}</Typography>
</div>;
}
loadMoreTimelinePieces() {
const { match: {params}} = this.props;
this.setState({ viewDidLoad: false, viewIsLoading: true})
@ -268,7 +251,7 @@ class ProfilePage extends Component<any, IProfilePageState> {
</IconButton>
</Tooltip>
<Tooltip title={"Send a message or post"}>
<LinkableIconButton to={`/compose?mention=${this.state.account? this.state.account.acct: ""}`} color={"inherit"}>
<LinkableIconButton to={`/compose?acct=${this.state.account? this.state.account.acct: ""}`} color={"inherit"}>
<ChatIcon/>
</LinkableIconButton>
</Tooltip>
@ -286,16 +269,15 @@ class ProfilePage extends Component<any, IProfilePageState> {
</Tooltip>: null
}
</Toolbar>
<div className={classes.pageHeroContent}>
<Avatar className={classes.pageProfileAvatar} src={this.state.account ? this.state.account.avatar: ""}/>
<Typography variant="h4" color="inherit" dangerouslySetInnerHTML={{__html: this.state.account? emojifyString(this.state.account.display_name, this.state.account.emojis, classes.pageProfileNameEmoji): ""}}/>
<Typography variant="caption" color="inherit">{this.state.account ? '@' + this.state.account.acct: ""}</Typography>
<Typography paragraph color="inherit">{this.state.account ? this.state.account.note: ""}</Typography>
<Divider/>
<div className={classes.pageProfileStatsDiv}>
{this.statElement(classes, 'followers')}
{this.statElement(classes, 'following')}
{this.statElement(classes, 'posts')}
<div className={classes.profileContent}>
<Avatar className={classes.profileAvatar} src={this.state.account ? this.state.account.avatar: ""}/>
<div className={classes.profileUserBox}>
<Typography variant="h4" color="inherit" dangerouslySetInnerHTML={{__html: this.state.account? emojifyString(this.state.account.display_name, this.state.account.emojis, classes.pageProfileNameEmoji): ""}}/>
<Typography variant="caption" color="inherit">{this.state.account ? '@' + this.state.account.acct: ""}</Typography>
<Typography paragraph color="inherit">{this.state.account ? this.state.account.note: ""}</Typography>
<Typography color={"inherit"}>
{this.state.account? this.state.account.followers_count: 0} followers | {this.state.account? this.state.account.following_count: 0} following | {this.state.account? this.state.account.statuses_count: 0} posts
</Typography>
</div>
</div>
</div>