Merge pull request #177 from hyperspacedev/HD-49-post-name-overflow

HD-49 #done
This commit is contained in:
Marquis Kurt 2020-02-20 18:00:57 -05:00 committed by GitHub
commit 1e54b21672
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 29 deletions

View File

@ -6,6 +6,28 @@ export const styles = (theme: Theme) =>
marginTop: theme.spacing.unit,
marginBottom: theme.spacing.unit
},
postHeaderContent: {
overflow: "hidden",
whiteSpace: "nowrap"
},
postHeaderTitle: {
display: "flex",
flexWrap: "wrap",
color: theme.palette.text.secondary
},
postAuthorNameAndAccount: {
overflow: "hidden",
textOverflow: "ellipsis"
},
postAuthorName: {
whiteSpace: "nowrap",
color: theme.palette.text.primary
},
postAuthorAccount: {
overflow: "hidden",
textOverflow: "ellipsis",
marginLeft: theme.spacing.unit * 0.5
},
postReblogChip: {
color: theme.palette.common.white,
"&:hover": {
@ -81,14 +103,11 @@ export const styles = (theme: Theme) =>
paddingTop: theme.spacing.unit,
paddingBottom: theme.spacing.unit
},
postAuthorAccount: {
color: theme.palette.grey[500],
marginLeft: theme.spacing.unit * 0.5,
},
postReblogIcon: {
marginBottom: theme.spacing.unit * -0.5,
marginLeft: theme.spacing.unit * 0.5,
marginRight: theme.spacing.unit * 0.5,
color: theme.palette.text.primary
},
postAuthorEmoji: {
height: theme.typography.fontSize,

View File

@ -410,33 +410,34 @@ export class Post extends React.Component<any, IPostState> {
emojis.concat(reblogger.emojis);
}
// console.log(post);
return (
<>
<span
dangerouslySetInnerHTML={{
__html: emojifyString(
author.display_name || author.username,
emojis,
classes.postAuthorEmoji
)
}}
></span>
<span
className={classes.postAuthorAccount}
dangerouslySetInnerHTML={{
__html:
"@" +
emojifyString(
author.acct || author.username,
<span className={classes.postAuthorNameAndAccount}>
<span
className={classes.postAuthorName}
dangerouslySetInnerHTML={{
__html: emojifyString(
author.display_name || author.username,
emojis,
classes.postAuthorEmoji
)
}}
></span>
}}
></span>
<span
className={classes.postAuthorAccount}
dangerouslySetInnerHTML={{
__html:
"@" +
emojifyString(
author.acct || author.username,
emojis,
classes.postAuthorEmoji
)
}}
></span>
</span>
{reblogger ? (
<>
<div>
<AutorenewIcon
fontSize="small"
className={classes.postReblogIcon}
@ -451,7 +452,7 @@ export class Post extends React.Component<any, IPostState> {
)
}}
></span>
</>
</div>
) : null}
</>
);
@ -648,6 +649,10 @@ export class Post extends React.Component<any, IPostState> {
elevation={this.props.threadHeader ? 0 : 1}
>
<CardHeader
classes={{
content: classes.postHeaderContent,
title: classes.postHeaderTitle
}}
avatar={
<LinkableAvatar
to={`/profile/${
@ -673,9 +678,7 @@ export class Post extends React.Component<any, IPostState> {
</IconButton>
</Tooltip>
}
title={
<Typography>{this.getReblogAuthors(post)}</Typography>
}
title={this.getReblogAuthors(post)}
subheader={moment(post.created_at).format(
"MMMM Do YYYY [at] h:mm A"
)}