diff options
| author | Eugen <eugen@zeonfederated.com> | 2017-01-26 11:07:42 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-01-26 11:07:42 +0100 |
| commit | c3a3ce81725ebd53d789857ec62edd3b8be6789d (patch) | |
| tree | 7d15bed8f051e3d0bcf239031b7075103f98907d /app | |
| parent | d53294b9333cece09f53da1126fbed72bd9e5b9e (diff) | |
| parent | 589837cfc71c8676d03f31358f31c41b9c59a95d (diff) | |
Merge pull request #541 from TrevInc/master
Add brackets to visually distinguish show more / show less text
Diffstat (limited to 'app')
| -rw-r--r-- | app/assets/javascripts/components/components/status_content.jsx | 12 |
1 files changed, 11 insertions, 1 deletions
diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx index 521b557f0..ded98c1cd 100644 --- a/app/assets/javascripts/components/components/status_content.jsx +++ b/app/assets/javascripts/components/components/status_content.jsx @@ -86,6 +86,16 @@ const StatusContent = React.createClass({ const content = { __html: emojify(status.get('content')) }; const spoilerContent = { __html: emojify(status.get('spoiler_text', '')) }; + const spoilerStyle = { + backgroundColor: '#616b86', + borderRadius: '4px', + color: '#363c4b', + fontWeight: '500', + fontSize: '12px', + padding: '0 4px', + textTransform: 'uppercase' + }; + if (status.get('spoiler_text').length > 0) { const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />; @@ -93,7 +103,7 @@ const StatusContent = React.createClass({ return ( <div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> <p style={{ marginBottom: hidden ? '0px' : '' }} > - <span dangerouslySetInnerHTML={spoilerContent} /> <a onClick={this.handleSpoilerClick}>{toggleText}</a> + <span dangerouslySetInnerHTML={spoilerContent} /> <a style={spoilerStyle} onClick={this.handleSpoilerClick}>[{toggleText}]</a> </p> <div style={{ display: hidden ? 'none' : 'block' }} dangerouslySetInnerHTML={content} /> |