diff options
Diffstat (limited to 'app')
| -rw-r--r-- | app/javascript/mastodon/components/status_content.js | 4 | ||||
| -rw-r--r-- | app/javascript/styles/components.scss | 17 |
2 files changed, 15 insertions, 6 deletions
diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js index 61a71e2f0..6528337ae 100644 --- a/app/javascript/mastodon/components/status_content.js +++ b/app/javascript/mastodon/components/status_content.js @@ -141,7 +141,7 @@ export default class StatusContent extends React.PureComponent { </Permalink> )).reduce((aggregate, item) => [...aggregate, item, ' '], []); - const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />; + const toggleText = hidden ? [<FormattedMessage id='status.show_more' defaultMessage='Show more' key='0' />, mediaIcon ? <i className={`fa fa-fw fa-${mediaIcon} status__content__spoiler-icon`} aria-hidden='true' key='1' /> : null] : [<FormattedMessage id='status.show_less' defaultMessage='Show less' key='0' />]; if (hidden) { mentionsPlaceholder = <div>{mentionLinks}</div>; @@ -153,7 +153,7 @@ export default class StatusContent extends React.PureComponent { <span dangerouslySetInnerHTML={spoilerContent} /> {' '} <button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}> - {toggleText} {mediaIcon ? <i className={`fa fa-fw fa-${mediaIcon}`} aria-hidden='true' /> : null} + {toggleText} </button> </p> diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index e75f92e9d..145854697 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -495,10 +495,19 @@ cursor: pointer; vertical-align: bottom; - &:hover { - background: lighten($ui-base-color, 33%); - text-decoration: none; - } + &:hover { + background: lighten($ui-base-color, 33%); + text-decoration: none; + } + + .status__content__spoiler-icon { + display: inline-block; + margin: 0 0 0 5px; + border-left: 1px solid currentColor; + padding: 0 0 0 4px; + font-size: 16px; + vertical-align: -2px; + } } .status__prepend-icon-wrapper { |