treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Improving styling a little bit

remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
Eugen Rochko 2016-08-31 16:48:21 +02:00
parent 72591cc6d5
commit 1e0e17ba85
4 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/components/components/composer_drawer.jsx
View File

@ -29,7 +29,7 @@ const ComposerDrawer = React.createClass({
render () { render () {
return ( return (
<div style={{ width: '380px', boxSizing: 'border-box', background: '#454b5e', margin: '10px', marginRight: '0', padding: '10px' }}> <div style={{ width: '280px', boxSizing: 'border-box', background: '#454b5e', margin: '10px', marginRight: '0', padding: '10px' }}>
<textarea disabled={this.props.isSubmitting} placeholder='What is on your mind?' value={this.props.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} style={{ display: 'block', boxSizing: 'border-box', width: '100%', height: '100px', background: '#fff', resize: 'none', border: 'none', color: '#282c37', padding: '10px', fontFamily: 'Roboto', fontSize: '14px' }} /> <textarea disabled={this.props.isSubmitting} placeholder='What is on your mind?' value={this.props.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} style={{ display: 'block', boxSizing: 'border-box', width: '100%', height: '100px', background: '#fff', resize: 'none', border: 'none', color: '#282c37', padding: '10px', fontFamily: 'Roboto', fontSize: '14px' }} />
<div style={{ marginTop: '10px', overflow: 'hidden' }}> <div style={{ marginTop: '10px', overflow: 'hidden' }}>

14
app/assets/javascripts/components/components/relative_timestamp.jsx
View File

@ -4,17 +4,17 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
moment.updateLocale('en', { moment.updateLocale('en', {
relativeTime : { relativeTime : {
future: "in %s", future: "in %s",
past: "%s ago", past: "%s",
s: "s", s: "%ds",
m: "a minute", m: "1m",
mm: "%dm", mm: "%dm",
h: "an hour", h: "1h",
hh: "%dh", hh: "%dh",
d: "a day", d: "1d",
dd: "%dd", dd: "%dd",
M: "a month", M: "1mo",
MM: "%dmo", MM: "%dmo",
y: "a year", y: "1y",
yy: "%dy" yy: "%dy"
} }
}); });

4
app/assets/javascripts/components/components/status.jsx
View File

@ -21,7 +21,7 @@ const Status = React.createClass({
<Avatar src={status.getIn(['account', 'avatar'])} /> <Avatar src={status.getIn(['account', 'avatar'])} />
<div style={{ flex: '1 1 auto', marginLeft: '10px' }}> <div style={{ flex: '1 1 auto', marginLeft: '10px' }}>
<div style={{ overflow: 'hidden' }}> <div style={{ overflow: 'hidden', fontSize: '15px' }}>
<div style={{ float: 'right' }}> <div style={{ float: 'right' }}>
<a href={status.get('url')} style={{ textDecoration: 'none' }}><RelativeTimestamp timestamp={status.get('created_at')} /></a> <a href={status.get('url')} style={{ textDecoration: 'none' }}><RelativeTimestamp timestamp={status.get('created_at')} /></a>
</div> </div>
@ -29,7 +29,7 @@ const Status = React.createClass({
<DisplayName account={status.get('account')} /> <DisplayName account={status.get('account')} />
</div> </div>
<div className='status__content' dangerouslySetInnerHTML={content} style={{ fontSize: '14px' }} /> <div className='status__content' dangerouslySetInnerHTML={content} />
</div> </div>
</div> </div>
); );

8
app/assets/stylesheets/components.scss
View File

@ -1,6 +1,12 @@
.status__content { .status__content {
font-size: 15px;
line-height: 20px;
white-space: pre-wrap;
word-wrap: break-word;
font-weight: 300;
a { a {
color: #2b90d9; color: #d9e1e8;
text-decoration: none; text-decoration: none;
&:hover { &:hover {